Feb 10, 2020 | Test, test nEwwwwwwwwwww, Test ttttttttttttttttt, Uncategorized
<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 { ...
