Collapsible Content

Objective

Toggleable content that has an icon associated with the content being visible or hidden ( + / - ).

Problems

My solution was to use JS/jQuery to hook onto the open/close events fired by Collapse.js.
I'm missing something that is preventing the smooth open and close transition when using javascript.
jQuery currently targets all '.collapsible' instead of 'this'.

Questions

Is it possible to hook into the js event that the data-attribute options are using?
Should i just be using CSS or the default jQuery functionality instead of working with the Bootstrap Collapse.js?
How would you do it?

Actions

Fork this and send me your solution -or- Email me a written solution -or- Come tell me your solution

Answers

Category One (JS)

Always visible content. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus lacinia ante et augue ullamcorper rutrum. Nullam rhoncus orci nec elementum lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus lacinia ante et augue ullamcorper rutrum. Nullam rhoncus orci nec elementum lacinia.

Our patented magnetic door sealing feature minimizes infiltration losses and assures a positive repeatable seal without the wear and degradation associated with conventional sealing methods. What’s more, the unique mechanics of the RollSeal system makes automating this process much more efficient, effective, and reliable.

Category Two (Data Attributes)

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus lacinia ante et augue ullamcorper rutrum. Nullam rhoncus orci nec elementum lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus lacinia ante et augue ullamcorper rutrum. Nullam rhoncus orci nec elementum lacinia.

Collapsible Content

Category One (JS)

Category Two (Data Attributes)

Category Three (Data Attributes)