Easy to Use jQuery Accordion
Hi friend now i am going to share with you Easy to Use jQuery Accordion, here have Working demo, HTML, css and jquery for Accordion menu
Demo
Lorem ipsum dolor sit amet, consectetur adipiscing elit
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed laoreet ullamcorper enim, a elementum lorem fermentum a. Integer metus mi, porttitor sed orci ut, commodo tincidunt risus. Nulla felis sapien, tempor feugiat facilisis quis, ullamcorper vel nibh.
Lorem ipsum dolor sit amet, consectetur adipiscing elit
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed laoreet ullamcorper enim, a elementum lorem fermentum a. Integer metus mi, porttitor sed orci ut, commodo tincidunt risus. Nulla felis sapien, tempor feugiat facilisis quis, ullamcorper vel nibh.
Lorem ipsum dolor sit amet, consectetur adipiscing elit
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed laoreet ullamcorper enim, a elementum lorem fermentum a. Integer metus mi, porttitor sed orci ut, commodo tincidunt risus. Nulla felis sapien, tempor feugiat facilisis quis, ullamcorper vel nibh.
Lorem ipsum dolor sit amet, consectetur adipiscing elit
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed laoreet ullamcorper enim, a elementum lorem fermentum a. Integer metus mi, porttitor sed orci ut, commodo tincidunt risus. Nulla felis sapien, tempor feugiat facilisis quis, ullamcorper vel nibh.
Lorem ipsum dolor sit amet, consectetur adipiscing elit
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed laoreet ullamcorper enim, a elementum lorem fermentum a. Integer metus mi, porttitor sed orci ut, commodo tincidunt risus. Nulla felis sapien, tempor feugiat facilisis quis, ullamcorper vel nibh.
The HTML Markup
<div class="accordion"> <h3>Lorem ipsum dolor sit amet, consectetur adipiscing elit</h3> <div class="accordionContainer"> <div class="clearfix accordionSubContainer"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed laoreet ullamcorper enim, a elementum lorem fermentum a. Integer metus mi, porttitor sed orci ut, commodo tincidunt risus. Nulla felis sapien, tempor feugiat facilisis quis, ullamcorper vel nibh. </p> </div> </div> <h3>Lorem ipsum dolor sit amet, consectetur adipiscing elit</h3> <div class="accordionContainer"> <div class="clearfix accordionSubContainer"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed laoreet ullamcorper enim, a elementum lorem fermentum a. Integer metus mi, porttitor sed orci ut, commodo tincidunt risus. Nulla felis sapien, tempor feugiat facilisis quis, ullamcorper vel nibh. </p> </div> </div> <h3>Lorem ipsum dolor sit amet, consectetur adipiscing elit</h3> <div class="accordionContainer"> <div class="clearfix accordionSubContainer"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed laoreet ullamcorper enim, a elementum lorem fermentum a. Integer metus mi, porttitor sed orci ut, commodo tincidunt risus. Nulla felis sapien, tempor feugiat facilisis quis, ullamcorper vel nibh. </p> </div> </div> <h3>Lorem ipsum dolor sit amet, consectetur adipiscing elit</h3> <div class="accordionContainer"> <div class="clearfix accordionSubContainer"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed laoreet ullamcorper enim, a elementum lorem fermentum a. Integer metus mi, porttitor sed orci ut, commodo tincidunt risus. Nulla felis sapien, tempor feugiat facilisis quis, ullamcorper vel nibh. </p> </div> </div> <h3>Lorem ipsum dolor sit amet, consectetur adipiscing elit</h3> <div class="accordionContainer"> <div class="clearfix accordionSubContainer"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed laoreet ullamcorper enim, a elementum lorem fermentum a. Integer metus mi, porttitor sed orci ut, commodo tincidunt risus. Nulla felis sapien, tempor feugiat facilisis quis, ullamcorper vel nibh. </p> </div> </div> </div>
The CSS
<style> .accordion { display: block; } .accordion h3 { background: #d6d6d6; margin: 1px 0 0; padding: 5px 3%; cursor: pointer; } .accordion h3:first-child { margin-top: 0 } .accordion h3:before { content: '.'; display: block; font-size: 0; line-height: 0; position: absolute; margin: 8px 0 0 -10px; width: 4px; height: 7px; background:url(img/arrow.png) no-repeat 0 0; } .accordion h3.active:before { transform: rotate(90deg); -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -o-transform: rotate(90deg); -ms-transform: rotate(90deg); } .accordionContainer { display: none; width: 100%; padding: 0; margin: 0; } .accordionSubContainer { padding: 10px 20px; } </style>
JavaScript
<script> $(function(){ $(".accordion h3.active").next('.accordionContainer').slideDown() $(".accordion h3").click(function(){ var accordionContainer = $(this).next('.accordionContainer'); var thisaccordionContainer = $(this).parents('.accordion').find('.accordionContainer'); if(thisaccordionContainer.is(":visible")){ if(accordionContainer.is(":visible")){ accordionContainer.slideUp().prev("h3").removeClass('active'); }else{ thisaccordionContainer.slideUp().prev("h3").removeClass('active'); accordionContainer.slideDown().prev("h3").addClass('active'); } }else{ accordionContainer.slideDown().prev("h3").addClass('active'); } }); }) </script>Download