Simple Accordion with HTML & JQuery
An accordion used to create FAQ and Question & Answers. A vertical accordion is the show list. Each item can be expanded or collapsed to show and hide content with that item. It helps to allow the developer to handle the larget amount of text into small spaces on the pages.
HTML Code for Accordion
<div id="stepIntegarateSection" class="stepIntegarateSection"> <div class="stepSection"> <div class="stepSection-heading" id="zohoIntegrationStepOne"><h5>Step 1</h5></div> <div class="stepSection-para"> <p> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. </p> </div> </div> <div class="stepSection"> <div class="stepSection-heading" id="zohoIntegrationStepTwo"><h5>Step 2</h5></div> <div class="stepSection-para"> <p> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. </p> </div> </div> <div class="stepSection"> <div class="stepSection-heading" id="zohoIntegrationStepThree"><h5>Step 3</h5></div> <div class="stepSection-para"> <p> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. </p> </div> </div> <div class="stepSection"> <div class="stepSection-heading" id="zohoIntegrationStepFour"><h5>Step 4</h5></div> <div class="stepSection-para"> <p> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. </p> </div> </div> </div>
JQuery Code for Accordion
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery('.stepSection .stepSection-para').hide();
jQuery('#stepIntegarateSection .stepSection').first().find('.stepSection-para').show();
jQuery('.stepSection-heading').click(function(){
jQuery(this).parent('.stepSection').find('.stepSection-para').slideDown();
jQuery(this).parent('.stepSection').siblings().find('.stepSection-para').slideUp();
});
});
</script>