While working on creating an expandable/collapsible Div-Container, I came across this code that has been a lifesaver for me as a novice designer.
Now, I'm looking to add an expandable div within one of these containers. The challenge I'm facing is how to modify the function so that it automatically adjusts the outer height of the initial expandable div. I have provided an example below:
Collapsible 1
- Collapsible 1-1
- Collapsible 1-2
- Collapsible 1-3
You can find the code I'm currently using here:
HTML:
<button id="button">Toggle Expand/Collapse</button>
<div id="wrapper" class="open">
<ul id="list">
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
</ul>
</div>
CSS:
#wrapper {
background: #ccc;
overflow: hidden;
transition: height 200ms;
}
JS:
$(function() {
var b = $("#button");
var w = $("#wrapper");
var l = $("#list");
w.height(l.outerHeight(true));
b.click(function() {
if(w.hasClass('open')) {
w.removeClass('open');
w.height(0);
} else {
w.addClass('open');
w.height(l.outerHeight(true));
}
});
});