Machen Sie erweiterbare div Start geschlossen

Question

Ich habe this Code, der, wenn das 'A' angeklickt wird, kommt zusätzlicher Inhalt herunter. Aber ich möchte, dass der zusätzliche Inhalt versteckt bleibt. Wie würde ich das tun? Hier

ist der Code:

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:

.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

Set die .box-content Elemente display: none in CSS standardmäßig:

.box-content { 
    display: none; 
} 

Updated fiddle

Answer 2

Verwenden Sie diese Art und Weise. Ersetzen Sie den Code ein:

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

Mit folgendem:

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

Der Grund für die Änderung ist, wenn Sie mehr .box-head haben, dann wird es den Schieber auf alles auslösen und nicht nur einen.