Boostrap 3 данных тумблер Accordian

Question

Это то, что я есть

<a data-toggle="collapse" href="#collapsible-1">Digital</a> 

    <div id="collapsible-1"> 
     HTML stands for HyperText Markup Language. HTML is the main markup language for describing the structure of Web pages.</a> 
    </div> 

<a data-toggle="collapse" href="#collapsible-2">Radio</a> 

    <div id="collapsible-2"> 
     HTML stands for HyperText Markup Language. HTML is the main markup language for describing the structure of Web pages.</a> 
    </div> 

Я использую data-toggle boostrap, чтобы показать и скрыть элемент, но у меня есть некоторые незначительные проблемы, на этом пути, когда страницы загружаются содержание разборный всегда видимо, даже мне нужно сделать двойной щелчок, чтобы закрыть элемент, и после этого все нормально. что вы думаете, что мне нужно сделать, чтобы содержимое элемента collapsabe всегда было скрыто при загрузке страницы?

Answer 1

Bootstrap's documentation Взято из:

Использование
Распад плагин использует несколько классов для обработки тяжелого подъема:

.collapse скрывает содержимое
.collapse.in показывает содержание
.collapsing добавляется при начале перехода и удаляется, когда он заканчивается

Так короче: <div id="collapsible-1" class='collapse'>

Answer 2

Вы должны добавить collapse класс в DIV, чтобы скрыть содержимое по умолчанию, как этот

<a data-toggle="collapse" href="#collapsible-1">Digital</a> 

    <div id="collapsible-1" class="collapse"> 
     HTML stands for HyperText Markup Language. HTML is the main markup language for describing the structure of Web pages. 
    </div> 

<a data-toggle="collapse" href="#collapsible-2">Radio</a> 

    <div id="collapsible-2" class="collapse"> 
     HTML stands for HyperText Markup Language. HTML is the main markup language for describing the structure of Web pages. 
    </div> 

Js Fiddle Demo