Accordion, Toggle

Demo

https://demo2.drupar.com/xarapro/elements/content-elements/accordion-toggle

Accordion

<div class="accordion">
	<h4 class="accordion-title">Mission</h4>
	<div class="accordion-content">content under mission ...</div>

	<h4 class="accordion-title">Vision</h4>
	<div class="accordion-content">content under vision ..</div>

	<h4 class="accordion-title">History</h4>
	<div class="accordion-content">content under history ..</div>
</div>

Accordion with first child active

<div class="accordion">
	<h4 class="accordion-title active-accordion">Mission</h4>
	<div class="accordion-content">content under mission ...</div>

	<h4 class="accordion-title">Vision</h4>
	<div class="accordion-content">content under vision ..</div>

	<h4 class="accordion-title">History</h4>
	<div class="accordion-content">content under history ..</div>
</div>

Toggle

<div class="toggle">
	<h4 class="toggle-title">Our Vision</h4>
	<div class="toggle-content">content under vision ...</div>

	<h4 class="toggle-title">Our Mission</h4>
	<div class="toggle-content">content under mission ...</div>

	<h4 class="toggle-title">Our History</h4>
	<div class="toggle-content">content under history ...</div>
</div>

Toggle with first child active

<div class="toggle">
	<h4 class="toggle-title active-toggle">Our Vision</h4>
	<div class="toggle-content">content under vision ...</div>

	<h4 class="toggle-title">Our Mission</h4>
	<div class="toggle-content">content under mission ...</div>

	<h4 class="toggle-title">Our History</h4>
	<div class="toggle-content">content under history ...</div>
</div>