Adding auto expand functionality to collapsible Content script-CodePudding

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 expand\contract 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 >
<p align="center"><i> <strong>ONTOLOGICAL</strong></i></p>
<ul >
      <li><span >Voice One</span>
        <ul >
          <li><span >First Way</span>
            <ul >
              <li>01 Item one</li>
              <li>02 Item two</li>
              <li>03 Item three</li>
              <li>04 Item four</li>
            </ul>
          <li><span >Second Way</span>
            <ul >
              <li>01 Item one</li>
              <li>02 Item two</li>
              <li>03 Item three</li>
              <li>04 Item four</li>
            </ul>
          <li><span >Third Way</span>
            <ul >
              <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 >Voice Two</span>
        <ul >
          <li><span >First Way</span>
            <ul >
              <li>01 Item one</li>
              <li>02 Item two</li>
              <li>03 Item three</li>
              <li>04 Item four</li>
            </ul>
          <li><span >Second Way</span>
            <ul >
              <li>01 Item one</li>
              <li>02 Item two</li>
              <li>03 Item three</li>
              <li>04 Item four</li>
            </ul>
          <li><span >Third Way</span>
            <ul >
              <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>

CodePudding user response：

try this:

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;
    });

  });
document.querySelectorAll(".collapsible.slow").forEach(l=>{ //this one I added
  l.addEventListener("click", e => {  //and this one

    document.querySelectorAll(".collapsible.slow").forEach(current => {
      setTransitionHeights(current);
    });

  });
})

});

CodePudding user response：

thank you HamiD, auto expand functionality now works, but I lost the transition effect that I had in the beginning, is there a way to keep it? this is the result of your code - this is the previous version with transiction effect –