Collapsable Content

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.

Notes:

  • 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.