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

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 203
    Comment on it

    Hello Readers! In our previous blog we discussed about the simplest accordion with default functionalities. In this blog we will be discussing about the another type of accordion with content collapse feature. In this type of accordion when we click on one div, the content of other div will hide and the content of that particular div on which we clicked will be visible. For performing this task we have used jquery slideUp() and slideDown() functions.

     

    HTML Code:

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

     

    The above html code is same as we have mentioned in our previous blog. The difference is in the jquery code that you will see below.

     

    Jquery Code:

     

    $(function(){
    
    	$(".accordion-heading h2").click(function(){
                $(this).parent().siblings().children('div').slideUp();
                $(this).parent().siblings().children('h2').children('span').text("+");
                
                if($(this).siblings('.accordion-content').is(":visible")){
                    $(this).siblings('.accordion-content').slideUp();
                    $(this).children("span").text("+");
                }else{
                    $(this).siblings('.accordion-content').slideDown();
                    $(this).children("span").text("-");
                }
            });
    
    });

     

    Here, when we click on the div with class "accordion-heading" it will first check whether the content div is visible or not. If the div is visible it will close the content with the help of slideUp() function. And if the content is not visible it will display the content using the slideDown() function. Also, the sign will change respectively.

     

    For output download the below file.

    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: