Accordion
Insert it in <head>
<!-- Choose one for Light Mode -->
<link id="themecss" rel="stylesheet" type="text/css" href="https://i-as.dev/devui/css/light/all.min.css" />
<!-- Choose one for Dark Mode -->
<link id="themecss" rel="stylesheet" type="text/css" href="https://i-as.dev/devui/css/dark/all.min.css" />
<script type="text/javascript" src="https://i-as.dev/devui/js/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="https://i-as.dev/devui/js/devui-all.min.js"></script>
Use Components
<body>
<div class="accordion-container">
<h2>Company Teams</h2>
<ul id="accordion">
<li>
<h2>Billing & Sales</h2>
<div>Manager: Scott Rogers</div>
<ul>
<li>
<h3>Chicago</h3>
<div>
<p>Amanda Clark</p>
<p>Mike Wazowsky</p>
<p>Alan Decker</p>
<p>Zoe Bane</p>
</div>
</li>
<li>
<h3>Vancouver</h3>
<div>
<p>Terry Norton</p>
<p>Miranda Wayne</p>
<p>Jack Doe</p>
</div>
</li>
</ul>
</li>
<li>
<h2>R&D</h2>
<div>Manager: Charles Murphy</div>
<ul>
<li>
<h3>Chicago</h3>
<div>
<p>Peter King</p>
<p>Phillip Trasi</p>
<p>Phillip Boyle</p>
<p>Angel Heart</p>
</div>
</li>
<li>
<h3>Tampa</h3>
<div>
<p>Ryan Wadd</p>
<p>Steve Carot</p>
<p>Larry Great</p>
</div>
</li>
</ul>
</li>
<li>
<h2>Support</h2>
<div>
Manager: George Lee
<br /><br />
<p>Mickey Falls</p>
<p>Josh Brooks</p>
<p>Yayne Hills</p>
<p>Laurie Kole</p>
<p>Michelle Drush</p>
<p>Xavier Gonzales</p>
<p>Joe Santiago</p>
</div>
</li>
</ul>
</div>
<script type="text/javascript">
jQuery(function ($) {
$("#accordion").devuiAccordion();
});
</script>
<style>
.accordion-container
{
max-width: 400px;
margin: auto;
margin-bottom: 30px;
}
</style>
</body>