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
  • Share
  • Copyright 2016 by WebiBeris.com. All Rights Reserved.