I found this code example here and decided to implement a collapsible panel using css/html/javascript:
function toggleCollapsibleSectionWithAnimation() {
this.classList.toggle("collapsible-active");
var buttonId = this.id;
var sectionId = buttonId.replace("button","section");
var content = document.getElementById(sectionId);
if (content.style.maxHeight) {
content.style.maxHeight = null;
} else {
content.style.maxHeight = content.scrollHeight + "px";
}
}/* Style the button that is used to open and close the collapsible content */
.collapsible {
background-color: transparent;
color: #444;
cursor: pointer;
width: auto;
border: none;
text-align: left;
outline: none;
font-size: 15px;
}
/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
.collapsible-active, .collapsible:hover {
text-decoration: underline;
}
/* Style the collapsible content. Note: hidden by default */
.collapsible-content {
max-height: 0;
padding: 10px;
overflow: hidden;
transition: max-height 0.2s ease-out;
}
/* Style the collapsible content. Note: shown by default */
.collapsible-content-shown-by-default {
max-height: 100%;
padding: 10px;
overflow: hidden;
transition: max-height 0.2s ease-out;
}<button class="collapsible" id="collapsible-button-0" onclick="toggleCollapsibleSectionWithAnimation.call(this)"><b>Model</b> (show/hide)</button>
<div class="collapsible-content" id="collapsible-section-0">
<h1>
content
</h1>
</div>By default, the collapsible section is hidden using this code.
I wanted to have the panel displayed by default while still maintaining the toggling behavior when clicking the collapsible button.
I was struggling with reversing the starting variables to achieve this effect. I needed the content panel to start with a max-height of 0 when hidden, but initializing it to 100% did not work as expected.
In this JSfiddle example: https://jsfiddle.net/trbk5vwg/9/, switching the div classes between "collapsible-content" and "collapsible-content-shown-by-default" shows that the toggle only works one way.
I couldn't figure out how to get the scrollHeight in CSS and thus was unsure about setting the maxHeight for the panel to be shown by default.