显示和隐藏div点击

Question

基本上，我有一个关于我的页面，它将显示关于部分的摘要，在这将是一个按钮，一旦点击我想让它隐藏摘要部分和显示详细的DIV 。我目前有以下代码只能切换详细部分，并不隐藏摘要部分。感谢：

HTML：

<div class="row" class="unhidden" id="about_basic"> 
    <!-- Summary Content Here --> 
</div> 

<a href="javascript:unhide('about_detailed');" class="btn-large">View Detail</a> 
<!-- The Javascript in the href tag needs to unhide the about_detailed section (As it does here) but THEN hide the about_basic section. --> 

<div id="about_detailed" class="hidden"> 
    <!-- Detailed Content Here --> 
</div> 

的Javascript：

<script type="text/javascript"> 
    function unhide(divID) { 
    var item = document.getElementById(divID); 
    if (item) { 
     item.className=(item.className=='hidden')?'unhidden':'hidden'; 
    } 
    } 
</script> 

CSS：

.hidden { display: none; } 
.unhidden { display: block; } 

Answer 1

首先，写入javascript“inline”（也就是说，作为HTML元素的属性）被认为是差的形式。它工作，但很难维护。

此外，jQuery的处理这个这么好听... 有没有必要取消隐藏功能，或用于隐藏/取消隐藏CSS类

jsFiddle Demo

的jQuery：

$('.btn-large').click(function() { 
    $('#about_basic').toggle(); 
    $('#about_detailed').toggle(); 
}); 

Answer 2

改变

<a href="javascript:unhide('about_detailed');" 
    class="btn-large"> 
    View Detail 
</a> 

到

<a href="javascript:unhide('about_detailed');unhide('about_basic')" 
    class="btn-large"> 
    View Detail 
</a> 

将与about_detailed部一起切换about_basic部。