ExpandCollapse

The ExpandCollapse component has preserveChildElements set to true, so you can put your content in the container, then make it expandable/collapsable without blowing away the content inside.

Example Usage

<div class="expand-collapse-test-container">
  <!--Put your long content you want to expand/collapse in the container-->
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut porttitor 
    eros. In nec nulla quam. Nullam at vulputate ipsum. Curabitur elementum
    lectus sit amet orci placerat ultrices. Phasellus ipsum tellus, facilisis
    rhoncus maximus sit amet, sollicitudin quis felis. Morbi a ipsum congue 
    neque hendrerit mollis a ac turpis. Pellentesque habitant morbi tristique
    senectus et netus et malesuada fames ac turpis egestas. Sed auctor metus 
    sed nulla aliquet, in sagittis tellus sodales. Etiam nec neque eu enim
    consectetur vehicula.
  </p>
  <p>
    Nulla volutpat ante ut odio posuere dapibus. Nunc justo lacus, accumsan a
    lobortis eget, commodo sit amet ante. Donec mattis mauris eget eros luctus
    iaculis. Aenean vel aliquam nisi. Morbi fringilla imperdiet ultrices. Cras
    eget sem eleifend, blandit enim tempor, convallis augue. Phasellus id
    sagittis purus, a accumsan velit.
  </p>
</div>

// Pull in the library
const UI = require('jibe-juice');

// Instantiate a component, pass the selector of the container to insert component into and the opts
const container = new UI.ExpandCollapse('.expand-collapse-test-container',
'.toggle', {
  toggledClass: 'i-am-toggled',
  untoggledClass: 'i-am-NOT-toggled'
});

// Render the DOM for the ExpandCollapse component
container.render();

params

Name	Type	Default	Description
el	string	undefined	A string of the selector for the element to put the component in
opts	object	{}	A catch all for various options. See the opts table below for options specific to this component.
toggleSelector	string	undefined	A string for the selector to find the element you'd like to click to toggle expand/collapse

opts

Name	Type	Default	Description
toggledClass	string	undefined	The class to apply when toggled is true
untoggledClass	string	undefined	The class to apply when toggled is false