pav
10/7/2013 - 5:07 PM

collapsible_message_panels.html

style.css
content_copyfile_download
.post { background: #ccc; }
.header { background: #ddd; }
.content { background: #eee; }
script.js
content_copyfile_download
$(function(){
    $('.header').click(function(){
        $(this).next().stop().animate({height: 'toggle'}, 250);
    });
    
    $('#hide_all').click(function(){
        $('.content').slideUp(250);
    });
    
    $('#show_all').click(function(){
        $('.content').slideDown(250);
    });
});
collapsible_message_panels.html
content_copyfile_download
<html>
<head>
    <link rel="stylesheet" href="style.css" />
    <script src='script.js'></script>
	<title></title>
</head>

<body>
    <!-- our standard data container -->
    <div class="post">
        <!-- clicking on the header will make the .content slide up -->
        <div class="header">Text</div>
        
        <!-- content should be placed here whose visibility you can toggle -->
        <div class="content">Hey there! I'm content!</div>
    </div>
    <div class="post">
        <div class="header">Text</div>
        <div class="content">Hey there! I'm content!</div>
    </div>
    <div class="post">
        <div class="header">Text</div>
        <div class="content">Hey there! I'm content!</div>
    </div>
    <button id="hide_all">Hide All</button>
    <button id="show_all">Show All</button>
</body>
</html>