JSFiddle - React, Tailwind, and code Playground
HTML
<div id="accordion">
<h4><a class="accordionlink" href="#"><span class="accordionspan">‣</span> Opening Hours</a></h4>
<div>
<p>Monday-Friday 0730-2100</p>
<p>Saturday & Sunday 0900-2000</p>
<p>UK bank holidays 0900-2000</p>
</div>
<h4><a href="#"><span>‣</span> FBO Facilities</a></h4>
<div>
<ul>
<li><span>Executive reception area</span></li>
<li><span>Free Wi-Fi</span></li>
<li><span>Re-fuelling</span></li>
<li><span>Aircraft Cleaning</span></li>
<li><span>Immigration/Customs</span></li>
<li><span>Car rental</span></li>
<li><span>Aircraft Cleaning</span></li>
<li><span>Immigration/Customs</span></li>
<li><span>Car rental</span></li>
</ul>
</div>
<h4><a href="#"><span>‣</span> Airport Frequencies</a></h4>
<div>
<p>Approach 123.15</p>
<p>Tower 125.40</p>
<p>ATIS 125.30</p>
</div>
<h4><a href="#"><span>‣</span> Location Map</a></h4>
<div>
<img src="<?php bloginfo( 'template_url' ); ?>/images/locationmapweb.jpg" />
</div>
</div>
CSS
#accordion {
float:left;
width:320px;
}
#accordion a {
display:block;
width:300px;
background-color:#d8d8d8;
color:#222;
margin:5px auto;
margin-top:0;
position: relative;
}
#accordion h4.ui-state-active a, #accordion h4.ui-state-active a, #accordion h4.ui-state-active a:hover {
background-color:#00B5F8;
color:#fff;
cursor:default;
outline: none;
}
#accordion h4 {
outline: none;
}
#accordion h4 a:hover {
background-color:#00B5F8;
color:#fff;
cursor:pointer;
outline: none;
}
.accordionspan {
-webkit-transform: rotateZ(60deg);
-moz-transform: rotateZ(60deg);
transform: rotateZ(180deg);
}
#accordion div {
float:left;
padding-top:10px;
padding-bottom:10px;
}
#accordion ul {
list-style:disc;
}
#accordion ul li {
font-family: 'Ubuntu', sans-serif;
font-weight:400;
font-size:14px;
float:left;
width:185px;
padding:5px;
color:#00B5F8;
}
#accordion ul li span {
color:#222;
}
JavaScript
$(function() {
$( "#accordion" ).accordion({
autoHeight: false,
navigation: false
});
});