JSFiddle - React, Tailwind, and code Playground

by Julien Vernet

HTML

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/normalize/3.0.1/normalize.min.css">
<a class="btn" onclick="toggle('opening_hours', this);">View opening hours</a>

<div id="opening_hours" class="collapse" onclick="toggle();">
    <p><strong>Open days:</strong> Monday, Tuesday, Wednesday, Thursday, Friday, Saturday</p>
    <p><strong>Service hours:</strong> 11:00 to 14:30 and 18:00 to 22:30</p>
</div>

CSS

body {
    padding: 5%;
}

.collapse {
	display: none;
	transition: all .25s ease;
	background-color: #efefef;
	text-align: center;
	padding: 2em;
	border: 1px solid #ccc;
	border-top: none;
}
.collapse-open {
	background-color: orange;
	margin-bottom: none;
}

JavaScript

function toggle(elementId,btn) {
    ele = document.getElementById(elementId);
    btn.classList.add('collapse-open');
    if (ele.style.display == 'block') {
        ele.style.display = 'none';
        btn.classList.remove('collapse-open');
    } else {
        ele.style.display = 'block';
    }
}