Blog

Blog

<ul id=”myUL”>  <li><span class=”caret”>Beverages</span>    <ul class=”nested”>      <li>Water</li>      <li>Coffee</li>      <li><span class=”caret”>Tea</span>        <ul class=”nested”>          <li>Black Tea</li>          <li>White Tea</li>          <li><span class=”caret”>Green Tea</span>            <ul class=”nested”>              <li>Sencha</li>              <li>Gyokuro</li>              <li>Matcha</li>              <li>Pi Lo Chun</li>            </ul>          </li>        </ul>      </li>    </ul>  </li></ul> Step 2) Add CSS: Example /* Remove default bullets */ul, #myUL {  list-style-type: none;} /* Remove margins and padding from the parent ul */#myUL {  margin: 0;  padding: 0;} /* Style the caret/arrow */.caret {  cursor: pointer;   user-select: none; /* Prevent text selection */} /* Create the caret/arrow with a unicode, and style it */.caret::before {  content: “\25B6”;  color: black;  display: inline-block;  margin-right: 6px;} /* Rotate the caret/arrow icon when clicked on (using JavaScript) */.caret-down::before {  transform: rotate(90deg); } /* Hide the nested list */.nested {  display: none;} /* Show the nested list when the user clicks on the caret/arrow (with JavaScript) */.active { ...
Test Post

Test Post

To download the script(s), see the script license, and check details like browser compatibility, use the links on the navigation panel at the top of this page. Unlike my collapsible list script (note the subtle name difference), this script takes an existing nested HTML UL or OL list and collapses it. This makes the script a lot easier to use, as you hardly need to know any JavaScript. It is also a lot more accessible, as JavaScript is not required to create the list. Even CSS support is not required, as non-CSS browsers will just show an unstyled list. If the browser does support CSS, styling these lists is a lot easier than styling lists made with the collapsible list script, as the HTML structure is very simple. However, unlike the collapsible list script, this script cannot automatically produce tree structure diagrams for you (you need to use CSS as shown below), and it does not collapse in Internet Explorer 4. It also cannot change the plus/minus HTML you provide as branches are expanded or collapsed. It also collapses all branches first, none can be left open by default like they can with the collapsible list script. However, their open/close state can be saved and recovered using cookies (new in version 2), and links to the current page can also be automatically highlighted and branches can be automatically expanded to show them (new in version...