拡張可能なdiv開始を閉じる

Question

私はthisコードを持っています。「A」をクリックすると余分なコンテンツが下がります。しかし、私は余分なコンテンツを隠しておきたい。どうすればいい？この方法を使用し

.widget-toggle { 
    display: block; 
    overflow: hidden; 
    text-indent: -9999px; 
    width: 18px; 
    height: 9px; 
    margin-top: 15px; 
    margin-left: 13px; 
    background: url(../img/sidebar-arrows.png) no-repeat 0 -18px; 
} 
.widget-toggle.active { 
    background: url(../img/sidebar-arrows.png) no-repeat 0 0; 
} 

Answer 1

は、デフォルトではCSSでdisplay: noneから.box-contentの要素を設定します。

.box-content { 
    display: none; 
} 

Updated fiddle

Answer 2

：

HTML：：

<section class="box2"> 
    <header class="box-head"> 
     <div class="box-title fr"> <span class="box-icon"></span> 

     </div> <a class="box-toggle fl active" href="#">A</a> 

    </header> 
    <div class="box-content active"> 
     Content</div> 
</section> 

Javascriptを：

$("a.box-toggle").on('click', function() { 
    $('div.box-content').slideToggle(200).toggleClass('active'); 
}); 

CSSここで

はコードです。あなたのコードを置き換えます。

$("a.box-toggle").on('click', function() { 
    $('div.box-content').slideToggle(200).toggleClass('active'); 
}); 

次の場合：

$('div.box-content').hide(); 
$("a.box-toggle").on('click', function() { 
    $(this).closest(".box-head").next('div.box-content').slideToggle(200).toggleClass('active'); 
}); 

変更の理由は、あなたが.box-head複数を持っている場合は、それがすべてではなく一つだけのスライドをトリガーする、です。