Where a section may have a very long list of information, it can be desirable to use collapsable content. There is a premade function for showing/hiding elements, though its use may or may not be practical, depending on the situation. Use it, or don't, on a case-by-case basis.
To use the collapsable-content function: Create a toggle button using
<div class="btn-collapse">Show More</div> and a data attribute using
data-toggle. Clicking this button will toggle any sibling element(s) containing the class
collapsable-content and an identical
data-toggle attribute. It will also change the button to read "Show Less"; another click toggles it back to the previous state. Ideally, use pre-existing elements and add the class and attribute; creating a new div around the existing content may lead to unexpected results, as the toggle function will use
display:block if no previous display specification was found.
- Changes made to the text of the button will require adjustment to the function, but for the sake of consistency and user experience, this is best avoided.
- Collapsable content inside of a pjax loaded container will require
collapsableContent();to be called from within the container. No variables are necessary.