I have used THIS SCRIPT to create collapsible sections into my website: LINK
as you can see I have problem since inside the collapsible section, I inserted a drop down menu’,
when I expand section and I click on drop down menu’ to see more voices, the collapsible section doesn’t expand automatically with the content. How can I make the collapsible section automatically expandcontract according to its content?
this is the Whole Code (Javascrip,CSS and HTML) and you can run snipet to see what happens (Section doesn’t expand according to it’s content):
window.addEventListener("DOMContentLoaded", e => {
const getContainerHeight = el => {
return window.getComputedStyle(el).getPropertyValue("height");
};
const setTransitionHeights = el => {
let containerWasOpen = el.classList.contains("open");
el.style.height = null;
el.classList.remove("open", "ready");
el.dataset.initial = getContainerHeight(el);
el.classList.add("open");
el.dataset.final = getContainerHeight(el);
el.classList.remove("open");
if(containerWasOpen) {
el.classList.add("open");
el.style.height = el.dataset.final;
} else {
el.style.height = el.dataset.initial;
}
el.classList.add("ready");
};
document.querySelectorAll(".collapsible.slow").forEach(current => {
let toggler = document.createElement("div");
toggler.className = "toggler";
current.appendChild(toggler);
setTransitionHeights(current);
toggler.addEventListener("click", e => {
current.style.height = current.classList.toggle("open") ? current.dataset.final : current.dataset.initial;
});
});
window.addEventListener("resize", e => {
document.querySelectorAll(".collapsible.slow").forEach(current => {
setTransitionHeights(current);
});
});
});
</script><style>
ul, #myUL {
list-style-type: none;
}
#myUL {
margin: 0;
padding: 0;
}
.caret {
cursor: pointer;
-webkit-user-select: none; /* Safari 3.1+ */
-moz-user-select: none; /* Firefox 2+ */
-ms-user-select: none; /* IE 10+ */
user-select: none;
}
.caret::before {
content: "25B6";
color: black;
display: inline-block;
margin-right: 6px;
}
.caret-down::before {
-ms-transform: rotate(90deg); /* IE 9 */
-webkit-transform: rotate(90deg); /* Safari */'
transform: rotate(90deg);
}
.nested {
display: none;
}
.active {
display: block;
}
html *
{
font-family: verdana !important;
}
body {
background-image: url("bg.jpg");
background-repeat: repeat;
}
.container {
position: relative;
}
.vertical-center {
width: 350;
margin: 0;
position: absolute;
top: 12%;
left: 5%;
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.content {
width: 850;
margin: 0;
padding-bottom: 25px;
}
.empty {
width: 100%;
}
/* Tooltip container */
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black; /* If you want dots under the hoverable text */
}
/* Tooltip text */
.tooltip .tooltiptext {
visibility: hidden;
top: -5px;
left: 105%;
width: 220px;
background-color: black;
color: #fff;
text-align: center;
padding: 5px 0;
border-radius: 6px;
/* Position the tooltip text - see examples below! */
position: absolute;
z-index: 1;
}
/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
visibility: visible;
}
.tooltip .tooltiptext::after {
content: " ";
position: absolute;
top: 20%;
right: 100%; /* To the left of the tooltip */
margin-top: -5px;
border-width: 5px;
border-style: solid;
border-color: transparent black transparent transparent;
}
.boxed {
border: 1px solid #ccc;
padding: 1em 2em;
}
.collapsible.slow {
position: relative;
overflow: hidden;
padding-bottom: 0.5em;
transition: height 0.5s ease-out;
}
.collapsible.slow > * {
display: none;
}
.collapsible.slow > p:first-child,
.collapsible.slow.open > *,
.collapsible.slow.ready > * {
display: revert;
}
.collapsible.slow > .toggler {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
background: #fff;
text-align: center;
cursor: pointer;
}
.collapsible.slow > .toggler::after {
content: "25bc";
}
.collapsible.slow.open > .toggler::after {
content: "25b2";
}
</style><div class="collapsible slow boxed">
<p align="center"><i> <strong>ONTOLOGICAL</strong></i></p>
<ul class="nested">
<li><span class="caret">Voice One</span>
<ul class="nested">
<li><span class="caret">First Way</span>
<ul class="nested">
<li>01 Item one</li>
<li>02 Item two</li>
<li>03 Item three</li>
<li>04 Item four</li>
</ul>
<li><span class="caret">Second Way</span>
<ul class="nested">
<li>01 Item one</li>
<li>02 Item two</li>
<li>03 Item three</li>
<li>04 Item four</li>
</ul>
<li><span class="caret">Third Way</span>
<ul class="nested">
<li>01 Item one</li>
<li>02 Item two</li>
<li>03 Item three</li>
<li>04 Item four</li>
</ul>
</li>
</ul>
<li><span class="caret">Voice Two</span>
<ul class="nested">
<li><span class="caret">First Way</span>
<ul class="nested">
<li>01 Item one</li>
<li>02 Item two</li>
<li>03 Item three</li>
<li>04 Item four</li>
</ul>
<li><span class="caret">Second Way</span>
<ul class="nested">
<li>01 Item one</li>
<li>02 Item two</li>
<li>03 Item three</li>
<li>04 Item four</li>
</ul>
<li><span class="caret">Third Way</span>
<ul class="nested">
<li>01 Item one</li>
<li>02 Item two</li>
<li>03 Item three</li>
<li>04 Item four</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
<p></p>
</div>
<script>
var toggler = document.getElementsByClassName("caret");
var i;
for (i = 0; i < toggler.length; i++) {
toggler[i].addEventListener("click", function() {
this.parentElement.querySelector(".nested").classList.toggle("active");
this.classList.toggle("caret-down");
});
}
</script>