Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • Accordion Using Jquery Type -I

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 167
    Comment on it

    Hello Readers! In this blog we will discuss about one of the simplest type of accordion using jquery.

     

    In this type of accordion the content will be displayed on the click event of the the particular section. This task will be performed using the jquery slideToggle() function. SlideToggle() function is used to slide the content up and down on click.

     

    HTML Code:

    <div class="container">
    
    	<div class="accordian-heading" >
    		<h2>Accordian 1 <span class="plus"></span></h2>
    		<div class="accordian-content">
    			<p>This is a sample content of an accordian which is visible on click.</p>
    		</div>
            </div>
    
    	<div class="accordian-heading">
    		<h2>Accordian 2 <span class="plus"></span></h2>
    		<div class="accordian-content">
    			<p>This is a sample content of an accordian which is visible on click.</p>
    		</div>
    	</div>
    
    	<div class="accordian-heading">
    		<h2>Accordian 3 <span class="plus"></span></h2>
    		<div class="accordian-content">
    			<p>This is a sample content of an accordian which is visible on click.</p>
    		</div>
    	</div>
    
    	<div  class="accordian-heading">
    		<h2>Accordian 4 <span class="plus"></span></h2>
    		<div class="accordian-content">
    			<p>This is a sample content of an accordian which is visible on click.</p>
    		</div>
    	</div>
    </div>

     

    In the above code, on clicking on the "accordion-heading" div, the content of that particular "accordion-content" will be visible which is by default hidden. Also, the plus sign will change into the minus sign on click.

     

    Juery Code:

    $(function(){
    
    	$('.accordian-heading h2').click(function(){
    		$(this).siblings('.accordian-content').slideToggle();
    		$(this).children('span').toggleClass('minus');
    	});
    
    });

     

    The above jquery code is simple to understand the concept of the basic accordion. Here, we have used the slideToggle() function which will slide the content div on click.

     

    For output click on the link below

    Happy Coding :)

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: