JSFiddle - React, Tailwind, and code Playground

by korigan

HTML

<div class="drop-down">
        <button type="button" id="drop-down__button">Button</button>
        <div id="drop-down__content">
            <p>Hello world!</p>
        </div>
    </div>

CSS

* {
  margin: 0;
  padding: 0;
}
#drop-down__content {
  display: none;
}

JavaScript

var button = document.getElementById('drop-down__button');
        var content = document.getElementById('drop-down__content');

        var eventFunction = function(e) {
            if (content.style.display === 'none' || content.style.display === '') {
                content.style.display = 'block';
            } else {
                content.style.display = 'none';
            }
        }

        button.addEventListener('click', function(e){
            console.log('click');
            eventFunction(e);
            this.removeEventListener('click', eventFunction, false);
        }, false);

        // With Firefox
        button.addEventListener('keydown', function(e) {
            console.log('keydown');
            if(e.keyCode === 13 || e.keyCode === 32) {
                eventFunction(e);
                e.stopPropagation();
                e.preventDefault();
                this.removeEventListener('keydown', eventFunction, false);
            }
        }, false);