JSFiddle - React, Tailwind, and code Playground

by tomprogramming

HTML

<form>
<fieldset>
    <legend>Header</legend>
    <div id="list" align="left">
        <ul class="open">
            <li id="item1" class="listheader">
                <a  onclick="toggle('item1');">
                    <img src="closed.png" alt="" id="img_item1" border="0" />
                    <b>Title1</b>
                </a>
                <ul id="ul_item1" class="closed" style="list-style-type:disc;">
                    <li>Weee</li>
                    <li>Ladida</li>
                </ul>  
            </li>
            <li id="item2" class="listheader">
                <a  onclick="toggle('item2');">
                    <img src="closed.png" alt="" id="img_item2" border="0"/><b>Title2</b>
                </a>
                <ul id="ul_item2" class="closed" style="list-style-type:disc;">
                    <li>Weee</li>
                    <li>Ladida</li>
                </ul> 
            </li>
        </ul>   
    </div>
</fieldset>
</form>

CSS

fieldset {
border:2px solid black;
border-radius: 6px;
font-family:comic sans ms;
font-size: 20px;
width: 450px;
text-align: center;
align:center;
margin: auto;
display: block;
background-color: white;}

legend
{
    font-weight: bold;
    padding-left: .3em;
    padding-right: .3em;
}

ul.closed {
display:none;
}
ul.open {
display:block;
}

JavaScript

function toggle(id){
console.log('toggle')
    var ul = "ul_" + id;
    var img = "img_" + id;
    var ulElement = document.getElementById(ul);
    var imgElement = document.getElementById(img);
    if (ulElement){
        if (ulElement.className == 'closed'){
            ulElement.className = "open";
            imgElement.src = "open.png";
            }else{
            ulElement.className = "closed";
            imgElement.src = "closed.png";
        }
    }
}