list dropdown with javascript

click the ▾ below to toggle list dropdowns.

• fruit ▾
• apple
• orange
• banana
• vegetable ▾
• cucumber
• broccoli
• carrot

copy and paste all this code wherever you want it to be, within the body tags.

<ul> <li>fruit<span onclick="toggleFruit()"> ▾ </span></li> <ul id="FRUIT" style='display: none'> <li>apple</li> <li>orange</li> <li>banana</li> </ul> <li>vegetable<span onclick="toggleVeg()"> ▾ </span></li> <ul id="VEG" style='display: none'> <li>cucumber</li> <li>broccoli</li> <li>carrot</li> </ul> </ul> <script> function toggleFruit() { var text = document.getElementById("FRUIT"); if (text.style.display === "none") { text.style.display = "block"; } else { text.style.display = "none"; } } function toggleVeg() { var text = document.getElementById("VEG"); if (text.style.display === "none") { text.style.display = "block"; } else { text.style.display = "none"; } } </script>

by default, dropdowns do not show. to change this, in the ul tag's style, change "none" to "block"
multiple dropdowns can be done on one page, but id and function must be different for each. in the above example, id's are "FRUIT" and "VEG", and functions are "toggleVeg" and "toggleFruit"
i used ▾ (downward pointing triangle) as my dropdown togglers, but anything can be used with 'onclick="toggleVeg()"' in the tag around it.

download text file

return