如何使用jQuery实现类似GMail的选项卡式/装甲式界面？

我试图创建一个接口，就像下面用jQuery显示的右侧 - 带标题（主题）和页脚的选项卡式/装甲消息。如何使用jQuery实现类似GMail的选项卡式/装甲式界面？

有没有人做过类似的jQuery或可以建议一个方向来解决这个问题？我在网上搜索了一段时间，但还没有找到足够接近的解决方案。我跑过“30 jQuery tabs tutorial”，但没有找到我要找的。

在此先感谢您的帮助。让我知道我是否可以提供更多关于我所寻找的细节。

2011-09-01 Laguna

并不像手风琴的工作？ – Marko

手风琴仅显示一节。 – epascarello

基本丑的想法：

<!DOCTYPE html> 
<html> 
<head> 
<scriptsrc="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> 
<script> 
    jQuery(document).ready(function(){ 
    $('.thread .head').click(function() { 
    $(this).next().slideToggle("fast"); 
    return false; 
    }).next().hide(); 
    }); 
</script 
<meta charset=utf-8 /> 
<title>basic Idea</title> 

<style> 
    .thread { width: 300px; border: 1px soildl; } 
    .thread h2{ background-color: #CCC; margin: 0; border: 1px solid #FFC;} 
    .thread div{ background-color:#FDF; border: 1px solid #000;} 
</style> 
</head> 
<body> 
    <div class="thread"> 
    <h2 class="head">The information here</h2> 
    <div> 
     blah blah blah blah 
    </div> 
    <h2 class="head">come other information here</h2> 
    <div> 
     blah blah blah blah Goo Goo Goo 
    </div> 
    <h2 class="head">hee hee hee</h2> 
    <div> 
     ho ho ho ho ho 
    </div>  
    </div> 
</body> 
</html>

JSBIN

来源

2011-09-01 19:26:04 epascarello