jquery-logo

Expand Collapse div and toggle images using jquery

Example1 | Example2

In this post I’ll be showing you how to implement expandable and collapsible toggle panel using jQuery. Here in this example when you click on the heading, the content gets displayed by sliding and when you again click on the heading the content collapses. To implement this we will be using the following jQuery methods : slideUp(), slideDown(), attr(), css(), next(), and children().

Below is the output that we shall achieve by the end of this post.

ExpandCollapseOutput

Html: (jsFiddle link)

<div>
    <span id="expandAll" class="links">Expand All</span>
    <span id="collapseAll" class="links">Collapse All</span>    
</div>

<div id="header1" class="header">
    <img src="http://cdn1.iconfinder.com/data/icons/fatcow/32/bullet_toggle_minus.png" />
    <span>Sachin Tendulkar</span>
</div>
<div id="description1" class="description">
    Sachin Ramesh Tendulkar is an Indian cricketer widely acknowledged as one of the greatest batsmen in One Day International[2] and second only to Don Bradman in the all time greatest list in Test cricket
</div>

<div id="header2" class="header">
    <img src="http://cdn1.iconfinder.com/data/icons/fatcow/32/bullet_toggle_minus.png" />
    <span>Rahul Dravid</span>
</div>
<div id="description2" class="description">
    Rahul Dravid is a former Indian cricketer, who captained the national Test and One Day International (ODI) teams. Born in a Marathi family, he started playing cricket at the age of 12 and later represented the state team at the under-15, under-17 and under-19 levels.
</div>

Css: (jsFiddle link)

body{font-family:Arial;}
.header img{position:relative; top:10px;}
.header { font-weight:bold; padding-bottom:10px;cursor:pointer;}
.links {color:#3366CC;cursor:pointer;}
.links:hover {border-bottom:1px solid #3366CC;}

Jquery: (jsFiddle link)

var mImg = "http://cdn1.iconfinder.com/data/icons/fatcow/32/bullet_toggle_minus.png";
var pImg = "http://cdn1.iconfinder.com/data/icons/fatcow/32/bullet_toggle_plus.png";

$(document).ready(function(){
    $("#expandAll").click(function(){
        $(".description").slideDown();
        $(".header img").attr("src", mImg)
    });

    $("#collapseAll").click(function(){
        $(".description").slideUp();
        $(".header img").attr("src", pImg)
    });

    $("#header1").click(function(){
        var currentState = $("#description1").css("display");
        if(currentState == "block"){
            $("#description1").slideUp();
            $("#header1 img").attr("src", pImg)
        }
        else{
            $("#description1").slideDown();
            $("#header1 img").attr("src", mImg)
        }
    });

    $("#header2").click(function(){
        var currentState = $("#description2").css("display");
        if(currentState == "block"){
            $("#description2").slideUp();
            $("#header2 img").attr("src", pImg)
        }
        else{
            $("#description2").slideDown();
            $("#header2 img").attr("src", mImg)
        }
    });        
});

the last two click events for “header1″ and “header2″ can be clubbed as shown below :

Jquery: (jsFiddle link)

$(".header").click(function(){
    var currentState = $(this).next(".description").css("display");
    console.log(currentState);
    if(currentState == "block"){
        $(this).next(".description").slideUp();
        $(this).children("img").attr("src", pImg)
    }
    else{
        $(this).next(".description").slideDown();
        $(this).children("img").attr("src", mImg)
    }
});

Hope this helps :)

One Comment

  1. This is great. One question I have is if in the second example, you wanted everything collapsed at the start, what would have to be changed?

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>