Toggle List

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Document Object Model - HTML Elements</title>
</head>
<body>
<div id="dropdown">
</div>
<script>
    var items = [
        'Apples','Oranges','Bananas','Kiwis','Mangos'
    ];

    function createDropDown(selector, items){
        var container = document.querySelector(selector);
        container.className = 'dropdown-list';

        var selectedItem = document.createElement('strong');
        selectedItem.innerHTML = 'not selected'; // style with CSS

        var itemsList = document.createElement('ul');
        itemsList.style.display = 'none';

        for(var i = 0; i < items.length; i++){
            var item = document.createElement('li');
            item.innerHTML = items[i];
            itemsList.appendChild(item);
        }
        container.appendChild(selectedItem);
        container.appendChild(itemsList);

        selectedItem.onclick = function(){
            if(itemsList.style.display === 'none'){
                itemsList.style.display = '';
            }else{
                itemsList.style.display = 'none';
            }
        };
    }
    createDropDown('#dropdown',items);

</script>
</body>
</html>