How to make accordion in pure javascript and html

Question

I want this list to behave as an accordion. I have to do this in pure javascript without using jQuery or other external libraries. I am not allowed to adjust the HTML code shown below.

<ul class="accordion">
        <li><a href="#">Apple</a>
            <ul>
                <li><a href="#">abc</a></li>
                <li><a href="#">xyz</a></li>
                <li><a href="#">pqr</a></li>
            </ul>
        </li>
        <li><a href="#">Apple1</a></li>
        <li><a href="#">Apple2</a></li>
        <li><a href="#">Apple3</a></li>
        <li><a href="#">Apple4</a></li>
    </ul>

I have javascript code below provided by @Ruud, which is showing accordion menu but it does not have animation effect. I want animation effect with only one item activated at a time

window.getTopUL = function() {
    var uls = document.getElementsByTagName('UL');
    for (var i = 0; i < uls.length; i++) {
        if (uls[i].className == 'accordion') return uls[i];
    }
    return null;
};

window.getChild = function(li, tag) {
    return li.getElementsByTagName(tag)[0];
};

window.toggleDisplay = function(s) {
    s.display = s.display == 'none' ? 'block' : 'none';
};

window.setEventHandlers = function(topUL) {
    if (topUL) {
        var lis = document.getElementsByTagName('LI');
        for (var i = 0; i < lis.length; i++) {
            var ul = getChild(lis[i], 'UL');
            if (ul) {
                ul.style.display = 'none';
                getChild(lis[i], 'A').onclick = function() {
                    toggleDisplay(getChild(this.parentNode, 'UL').style);
                    return false;
                }
            }
        }
    }
};

setEventHandlers(getTopUL());

---

 window.getTopUL = function() { var uls = document.getElementsByTagName('UL'); for (var i = 0; i < uls.length; i++) { if (uls[i].className == 'accordion') return uls[i]; } return null; }; window.getChild = function(li, tag) { return li.getElementsByTagName(tag)[0]; }; window.toggleDisplay = function(s) { s.display = s.display == 'none' ? 'block' : 'none'; }; window.setEventHandlers = function(topUL) { if (topUL) { var lis = document.getElementsByTagName('LI'); for (var i = 0; i < lis.length; i++) { var ul = getChild(lis[i], 'UL'); if (ul) { ul.style.display = 'none'; getChild(lis[i], 'A').onclick = function() { toggleDisplay(getChild(this.parentNode, 'UL').style); return false; } } } } }; setEventHandlers(getTopUL()); 

 <ul class="accordion"> <li><a href="#">Apple</a> <ul> <li><a href="#">abc</a> </li> <li><a href="#">xyz</a> </li> <li><a href="#">pqr</a> </li> </ul> </li> <li><a href="#">Apple1</a> </li> <li><a href="#">Apple2</a> </li> <li><a href="#">Apple3</a> </li> <li><a href="#">Apple4</a> </li> </ul> 

Answer 1

You can do it with simple html and css also

 /* Clean up the lists styles */ ul.accordion { list-style: none; margin: 0; padding: 0; } /* Hide the radio buttons */ /* These are what allow us to toggle content panes */ ul.accordion label + input[type='radio'] { display: none; } /* Give each content pane some styles */ ul.accordion li { background-color: #CCCCCC; border-bottom: 1px solid #DDDDDD; } /* Make the main tab look more clickable */ ul.accordion label { background-color: #666666; color: #FFFFFF; display: block; padding: 10px; } ul.accordion label:hover { cursor: pointer; } /* Set up the div that will show and hide */ ul.accordion div.content { overflow: hidden; padding: 0 10px; display: none; } /* Show the content boxes when the radio buttons are checked */ ul.accordion label + input[type='radio']:checked + div.content { display: block; } 

 <ul class='accordion'> <li> <label for='cp-1'>Content pane 1</label> <input type='radio' name='a' id='cp-1' checked='checked'> <div class='content'> <p>content to be displayed</p> </div> </li> <li> <label for='cp-2'>Content pane 2</label> <input type='radio' name='a' id='cp-2'> <div class='content'> <p>content to be displayed</p> </div> </li> <li> <label for='cp-3'>Content pane 3</label> <input type='radio' name='a' id='cp-3'> <div class='content'> <p>content to be displayed</p> </div> </li> <li> <label for='cp-4'>Content pane 4</label> <input type='radio' name='a' id='cp-4'> <div class='content'> <p>content to be displayed</p> </div> </li> <li> <label for='cp-5'>Content pane 5</label> <input type='radio' name='a' id='cp-5'> <div class='content'> <p>content to be displayed</p> </div> </li> </ul>