Collapsing table of content-CodePudding

I would like to create a table of contents where I can collapse and expand subtitles. So when I press the .top I have to go to the correct anchor and then the .subs should be visible in the table of contents.

<div >
  <ul  id="kcmenu">
    <li ><a href="#anchor" >Title</a></li>
    <li ><a href="#anchor">SubTitle</a></li>
    <li ><a href="#anchor">SubTitle</a></li>
    <li ><a href="#anchor">Title</a></li>
    <li ><a href="#anchor">SubTitle</a></li>
    <li ><a href="#anchor">SubTitle</a></li>
    <li ><a href="#anchor">SubTitle</a></li>
    <li ><a href="#anchor">SubTitle</a></li>
    <li ><a href="#anchor">SubTitle</a></li>
    <li ><a href="#anchorn">SubTitle</a></li>
    <li ><a href="#anchor">Title</a></li>
    <li ><a href="#anchor">SubTitle</a></li>
    <li ><a href="#anchor">SubTitle</a></li>
    <li ><a href="#anchor">SubTitle</a></li>
    <li ><a href="#anchor">SubTitle</a></li>
    <li ><a href="#anchor">SubTitle</a></li>
    <li ><a href="#anchor">SubTitle</a></li>
  </ul>
</div>

So can I make it so that when I press the .top class the underlying .sub classes become visible and it goes to the right anchor?

CodePudding user response：

With JQuery:

$(document).ready(function() {

  // Init
  $('.top').nextAll('.sub').hide();

  // Click Event
  $('.top').on('click', function() {
    $(this).nextUntil('.top').toggle('slow');
  });

});

.top > a {
  color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div >
  <ul  id="kcmenu">
    <li ><a href="#anchor" >Title</a></li>
    <li ><a href="#anchor">SubTitle</a></li>
    <li ><a href="#anchor">SubTitle</a></li>
    <li ><a href="#anchor">Title</a></li>
    <li ><a href="#anchor">SubTitle</a></li>
    <li ><a href="#anchor">SubTitle</a></li>
    <li ><a href="#anchor">SubTitle</a></li>
    <li ><a href="#anchor">SubTitle</a></li>
    <li ><a href="#anchor">SubTitle</a></li>
    <li ><a href="#anchorn">SubTitle</a></li>
    <li ><a href="#anchor">Title</a></li>
    <li ><a href="#anchor">SubTitle</a></li>
    <li ><a href="#anchor">SubTitle</a></li>
    <li ><a href="#anchor">SubTitle</a></li>
    <li ><a href="#anchor">SubTitle</a></li>
    <li ><a href="#anchor">SubTitle</a></li>
    <li ><a href="#anchor">SubTitle</a></li>
  </ul>
</div>

CodePudding user response：

// getting all .top elements
let topEls = document.querySelectorAll(".top");

topEls.forEach((el, index) => {
  // this childs variable is a array with all elements between
  let childs = getBetweenElements(topEls[index], topEls[index   1]);

  // we add a click event to the top element
  // and toogle a simple class (that hide and show)
  el.addEventListener("click", () => {
    childs.forEach((child) => child.classList.toggle("hidden")); // change here the logic to do also more (animation or etc...)
  });
});

// this function is getted from my previous answer on this topic
// https://stackoverflow.com/a/73425961/17716837
function getBetweenElements(firstElement, secondElement) {
  let result = [];
  let nextEl = firstElement.nextElementSibling;

  while (nextEl !== secondElement) {
    result.push(nextEl);
    nextEl = nextEl.nextElementSibling;
    if (nextEl === null) break;
  }

  return result;
}

.hidden {
  display: none;
}

<div >
  <ul  id="kcmenu">
    <!-- 1 -->
    <li >
      <a href="#anchor">Title</a>
    </li>
    <li >
      <a href="#anchor">SubTitle</a>
    </li>
    <li >
      <a href="#anchor">SubTitle</a>
    </li>
    <li >
      <a href="#anchor">SubTitles</a>
    </li>
    <!-- 2 -->
    <li >
      <a href="#anchor">Title</a>
    </li>
    <li >
      <a href="#anchor">SubTitle</a>
    </li>
    <li >
      <a href="#anchor">SubTitle</a>
    </li>
    <li >
      <a href="#anchor">SubTitle</a>
    </li>
    <li >
      <a href="#anchor">SubTitle</a>
    </li>
    <li >
      <a href="#anchor">SubTitle</a>
    </li>
    <li >
      <a href="#anchor">SubTitle</a>
    </li>
    <!-- 3 -->
    <li >
      <a href="#anchor">Title</a>
    </li>
    <li >
      <a href="#anchor">SubTitle</a>
    </li>
    <li >
      <a href="#anchor">SubTitle</a>
    </li>
    <li >
      <a href="#anchor">SubTitle</a>
    </li>
    <li >
      <a href="#anchor">SubTitle</a>
    </li>
    <li >
      <a href="#anchor">SubTitle</a>
    </li>
    <li >
      <a href="#anchor">SubTitle</a>
    </li>
  </ul>
</div>

how it becomes after clicking: