SO - 21276138

by Hollie Szadowski

HTML

<ul>
    <li>
        <a href="#" class="expandall-icon" title="expand all">expandall</a>
    </li>
    <li>
        <a href="#" class="collapseall-icon" title="Collapse all">collapseall</a>
    </li>
</ul>
<div class="content">First panel Content goes here. lorem ipsum elit sit
    <div class="inner-content">THis div is hidden by default</div>
    <div class="expand collapse">
        <a href="#">Expand/collapse</a>
    </div>
</div>
<div class="content">Second panelContent goes here. lorem ipsum elit sit
    <div class="inner-content">THis div is hidden by default</div>
    <div class="expand collapse">
        <a href="#">Expand/collapse</a>
    </div>
</div>

CSS

ul {
    padding: 4px;
    display:inline-block;
    list-style: none;
    background: #f4f4f4;
    height: 17px !important;
    margin-left:18px !important;
    border: 1px solid #ccc;
}
ul li {
    display:inline-block;
    border-right:solid 1px #333
}
ul li a.expandall-icon, ul li a.collapseall-icon {
    display:inline-block;
    padding:0 10px;
    color:Green;
}
ul li a.expand-inactive, ul li a.collapse-inactive {
    color:Grey
}
.content {
    position: relative;
    border: solid 1px #D8D8D8;
    float: left;
    width: 100%;
    background: #fff;
    margin-bottom: 20px;
    display: table;
}
/*Collapse/Expand*/
 .expand, .collapse {
    position: absolute;
    bottom: -12px;
    left: 0;
    width: 75%;
}
.expand a, .collapse a {
    background: black;
    line-height: 25px;
    display: block;
    width: 150px;
    text-align:center;
    color:white;
    margin-left: 44%;
}
.inner-content {
    padding: 20px;
    background:#fff8af
}

JavaScript

//expand/collapse all
$('.expandall-icon').click(function () {
    $(this).addClass('expand-inactive');
    $('.collapseall-icon').removeClass('collapse-inactive')
    $('.inner-content').slideDown();
});
$('.collapseall-icon').click(function () {
    $(this).addClass('collapse-inactive');
    $('.expandall-icon').removeClass('expand-inactive');
    $('.inner-content').slideUp();
}).addClass('collapse-inactive');

//Collapse and expand data
var $inners = $('.inner-content').hide();
$(".expand a").click(function (e) {
    e.preventDefault();
    var $parent = $(this).parent().toggleClass('collapse');
    if ($parent.hasClass('collapse')) {
        if ($('.expand').not('.collapse').length == 0) {
            $('.collapseall-icon').addClass('collapse-inactive')
        }
        $('.expandall-icon').removeClass('expand-inactive');
    } else {
        if ($('.expand.collapse').length == 0) {
            $('.expandall-icon').addClass('expand-inactive');
        }
        $('.collapseall-icon').removeClass('collapse-inactive')
    }
    $(this).closest('.content').find('.inner-content').slideToggle();
});