Panels

Bootstrap panels with tabs

by Puddster

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<div style="margin: 15px;">
    <div class="panel panel-default">
        <div class="panel-heading">Panel Title
            <div class="pull-right" style="white-space: nowrap;"> <span id="showPanel0" class="label label-default" style="cursor: pointer;">One</span>
 <span id="showPanel1" class="label label-default" style="cursor: pointer;">Two</span>
 <span id="showPanel2" class="label label-default" style="cursor: pointer;">Three</span>
 <span id="closePanel" class="label label-default" style="cursor: pointer;">
 x
                </span>

            </div>
        </div>
        <div class="panel-body" style="display: none;">
             <h3>Panel One</h3>

            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        </div>
        <div class="panel-body" style="display: none;">
             <h3>Panel Two</h3>

            <p>Duis ut augue viverra, posuere nisl eu, facilisis nisl. Vestibulum id volutpat libero.</p>
        </div>
        <div class="panel-body" style="display: none;">
             <h3>Panel Three</h3>

            <p>Aliquam erat volutpat.</p>
        </div>
        <div class="panel-footer text-right text-muted"> <small>
            Created by Puddster
        </small>

        </div>
    </div>
</div>

CSS

.panel-body {
    margin-bottom: 15px;
}

JavaScript

var greatestHeight = 0;

$(".panel-body").each(function () {
    if (greatestHeight < $(this).height()) {
        greatestHeight = $(this).height();
    }
});

$(".panel-body").css("height", greatestHeight);

$("[id*=showPanel]").click(function () {
    var thePanelBodies = $(this).parents(".panel").find(".panel-body"),
        theNumber = $(this).attr("id").match(/\d+/);
    $(thePanelBodies).each(function (index) {
        if (index == theNumber) {
            if ($(".panel-body:visible").length === 0) {
                $(this).slideDown(250);
            } else {
                $(this).delay(250).fadeIn(250);
            }
        } else {
            $(this).stop(true, false).fadeOut(250);
        }
    });
    $(this).parent().children("[id*=showPanel]").removeClass("label-info").addClass("label-default").finish().animate({
        fontSize: "0.70em"
    }, 500);
    $(this).removeClass("label-default").addClass("label-info").finish().animate({
        fontSize: "0.85em"
    }, 500);
});

$("#closePanel").click(function () {
    $(".panel-body").slideUp();
    $("[id*=showPanel]").removeClass("label-info").addClass("label-default").animate({
        fontSize: "0.75em"
    });
});