Very Simple Collapsible List (Pure HTML CSS JS )

Welcome to a quick tutorial on how to create a collapsible list with HTML, CSS, and Javascript. Yes, there are plenty of such “free downloadable collapsible lists” all over the Internet. So here is one that is slightly different – A barebones no-bloat version, so you can build on top quickly. Read on!

ⓘ I have included a zip file with all the source code at the start of this tutorial, so you don’t have to copy-paste everything… Or if you just want to dive straight in.

 

 

TLDR – QUICK SLIDES

 

TABLE OF CONTENTS

 

DOWNLOAD & DEMO

Firstly, here is the download link to the example code as promised.

 

QUICK NOTES

If you spot a bug, feel free to comment below. I try to answer short questions too, but it is one person versus the entire world… If you need answers urgently, please check out my list of websites to get help with programming.

 

EXAMPLE CODE DOWNLOAD

Click here to download all the example source code, I have released it under the MIT license, so feel free to build on top of it or use it in your own project.

 

DEMO & HOW TO USE

collapse-list.html
<!-- (A) LOAD CSS & JS -->
<link rel="stylesheet" href="collapse-list.css"/>
<script src="collapse-list.js"></script>
 
<!-- (B) NESTED LIST -->
<ul class="collapse">
  <li>
    One
    <ul>
      <li>Two</li> <li>Three</li>
      <li>
        Four
        <ul>
            <li>Five</li> <li>Six</li>
        </ul>
      </li>
    </ul>
  </li>
</ul>
  • One
    • Two
    • Three
    • Four
      • Five
      • Six

For you guys who just want to use this as a “widget”:

  1. Load the CSS and JS, or embed them directly on the page. Captain Obvious at your service.
  2. Define your nested list as usual. Just attach a class="collapse" to the <ul> <ol> container.

 

 

HTML CSS COLLAPSIBLE LIST

All right, let us now get into more details on how the collapsible list works. This is for you guys who want to “deep customize” it.

 

PART 1) THE JAVASCRIPT

collapse-list.js
window.addEventListener("load", () => {
  // (A) LOOP THOUGH ALL SUB-ITEMS
  for (let i of document.querySelectorAll(".collapse ul, .collapse ol")) {
    // (B) CREATE A <DIV ONCLICK="TOGGLE">TEXT</DIV>
    let toggle = document.createElement("div");
    toggle.innerHTML = i.previousSibling.textContent;
    toggle.className = "toggle";
    toggle.onclick = () => { toggle.classList.toggle("show") };
 
    // (C) REPLACE THE "TITLE TEXT" WITH THE <DIV> TOGGLE
    i.parentElement.removeChild(i.previousSibling);
    i.parentElement.insertBefore(toggle, i);
  }
});
  • (A) document.querySelectorAll(".collapse ul, .collapse ol") – Get all the “sub-lists” <ul> <ol> inside of <ul class="collapse"> and loop through them.
  • (B) Create a new “toggle button” – <div class="toggle" onclick="TOGGLE SUB SECTION BELOW">TITLE TEXT</div>.
  • (C) Replace the existing “title text” with the “toggle button”.

Yep, that’s about it. This is only 10 lines of code without the comments.

 

 

PART 2) THE CSS

collapse-list.css
/* (A) CONTAINER */
.collapse, .collapse ul, .collapse ol {
  list-style-type: none;
  padding-left: 10px;
}

/* (B) LIST ITEMS */
.collapse li { padding: 10px; }

/* (C) TOGGLE */
.toggle { padding: 10px; }
.toggle::before { content: "+"; }
.toggle.show::before { content: "-"; }

/* (D) SHOW/HIDE */
.collapse ul, .collapse ol { display: none; }
.toggle.show + ul, .toggle.show + ol { display: block; }
  • (A & B) Just some cosmetics, list-style-type: none will remove the default points/numbers/alphabets. Feel free to retain them if required.
  • (C) More cosmetics. Remember that we created <div class="toggle"> buttons in the above Javascript?
    • .toggle::before { content: "+" } will show a + symbol on the left side.
    • When the user clicks on the “toggle button”, a .show CSS class will be added. That is, <div class="toggle show">.
    • .toggle.show::before { content: "-"; } Should be self-explanatory now. We just change + to -.
  • (D) The only functional part.
    • .collapse ul, .collapse ol { display: none; } By default, all the sub-sections are hidden.
    • .toggle.show + ul, .toggle.show + ol { display: block; } When the toggle button is show, we display the corresponding sub-section.

 

 

EXTRA BITS & LINKS

That’s all for the tutorial, and here is a small section on some extras and links that may be useful to you.

 

COMPATIBILITY CHECKS

This example works on all modern “Grade A” browsers.

 

LINKS & REFERENCES

 

INFOGRAPHIC CHEAT SHEET

Collapsible List (Click To Enlarge)

 

THE END

Thank you for reading, and we have come to the end. I hope that it has helped you to better understand, and if you want to share anything with this guide, please feel free to comment below. Good luck and happy coding!

Leave a Comment

Your email address will not be published. Required fields are marked *