Sensation Energy

Tutorials


Accordion


Example 1


The accordion allows us to group links or text in one or more places, for example as a category, and not to take up much space, and when it needs to read something or go to a link in the accordion, it opens and the content is visible.

It is used by copying the code below, and then pastes it into your application or website. Before that, you can use our CSS and JS to make certain functionalities work for you. These are the addressees:


<link rel="stylesheet" href="www.sensationenergy.com/se_css/se.css>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script  src="www.sensationenergy.com/js_css/se.js"></script>


Example 1

Example 2

Example 3...

HTML


<div align="center">
<h2> Example 1</h2>
</div>
<button id="dugme10" class="harmonika">Example 1 <span>⇓</span></button>
<div class="ploca" id="ploca10">
<p>Example 1<span>⇑</span></p>
</div>
<button id="dugme5" class="harmonika">Example 2<span>⇓</span></button>
<div class="ploca" id="ploca5">
<p>Example 2<span>⇑</span></p>
</div>
<button id="dugme6" class="harmonika">Example 3<span>⇓</span></button>
<div class="ploca" id="ploca6">
<p>Example 3...<span>⇑</span></p>
</div>


Example 2


HTML


<div id="containers">
<div class="accordion">
<label for="tm" class="accordionitem"><h2>Item 1 <span class="arrow">»</span></h2></label>
<input type="checkbox" id="tm"/>
<p class="hiddentext">
<a href="#" class="link">Example 1 A ⇑</a> <br>
<a href="#" class="link">Example 1 B ⇑</a>
</p>
</div>
<div class="accordion">
<label for="tn" class="accordionitem"><h2>Item 2 <span class="arrow">»</span></h2></label>
<input type="checkbox" id="tn"/>
<p class="hiddentext">
<a href="#" class="link">Example 2 A ⇑</a> <br>
<a href="#" class="link">Example 2 B ⇑</a>
</p>
</div>