Нужна простая складная штуковина

Question

Это странно; Я изучаю jQuery и Bootstrap, и у обоих есть так много классных инструментов, но я в шоке на одном из самых простых трюков в книге: простой складной элемент.

Я нашел идеальный кандидат here:

<div data-role="collapsible"> 
    <h3>I'm a header</h3> 
    <p>I'm the collapsible content. By default I'm closed, but you can click the header to open me.</p> 
</div> 

Единственная проблема заключается в том, что это Jquery MOBILE, и я не уверен, что это хорошая идея, чтобы раздуть свой код с более JavaScript и JS. Поэтому, прежде чем я реализую jQuery Mobile, я хотел бы спросить, может ли кто-нибудь порекомендовать альтернативу, которая работает с jQuery, Bootstrap и т. Д.

Одна из проблем заключается в том, что я пытаюсь создать многоуровневую штуковину. При нажатии на кнопку начальной или заголовок покажет ряд кнопок, как это:

<button id="na" class="btn btn-na"><b>North America</b></button> 
<div id="div-na"></div> 
<button id="sa" class="btn btn-sa"><b>South America</b></button> 
<div id="div-sa"></div> 

Клик по Северной Америке и т.д. будет вызывать AJAX для отображения списка стран. Одна из проблем, с которыми я сталкиваюсь, заключается в том, что когда я нажимаю кнопку «Северная Америка», «Я заголовок», она вложен внутрь.

Другая возможность заключается в том, чтобы перепроектировать заголовки в моем основном контенте, который может быть вручную открыт или закрыт ...

<ul class="ulMain"> 
    <li data-toggle="collapse" data-target="#d1"><a href="#introduction" title="Introduction" class="NavLink">&#8226; D1 <small><span class="only-collapsed glyphicon glyphicon-chevron-down"></span><span class="only-expanded glyphicon glyphicon-remove-sign"></span></small></a></li> 

    <div id="d1">D1</div> 
</ul> 

Но я не понял, как изменить настройки по умолчанию от расширено разрушилась.

Итак, я просто ищу очень простую штуковину, которая 1) скрывает контент по умолчанию и 2) не закрывается после того, как его открывают, пока пользователь не нажмет на нее еще раз. На самом деле, я думал, что есть способ сделать это с помощью простого CSS, но я не могу его запомнить.

Answer 1

Bootstrap коллапс/аккордеон может скрыть содержимое по умолчанию, просто опустить in класс от первой панели в примере: http://getbootstrap.com/javascript/#collapse-example-accordion

Насколько держать панели открытой, пока их заголовок не будет выбран снова, без добавления JS, есть большой ответ, что здесь: https://stackoverflow.com/a/11658976/2460535

Короткий ответ: Попробуйте бутстраповских аккордеоны и исключить data-parent='#idofAccordion'

https://jsfiddle.net/curtisweeks/jujL376j/

Answer 2

Если Вы желаете, чтобы держаться подальше от всего, кроме JQuery, это довольно легко по себе:

<div class='collapsible'> 
    <h3>I'm a header</h3> 
    <p style='background:orange; display:none;'>I'm the collapsible content. By default I'm closed, but you can click the header to open me.</p> 
</div> 

Тогда ваш Javascript может выглядеть следующим образом:

$(document).ready(function(){ 
    $('.collapsible h3').click(function(){ 
     $(this).next().slideToggle(); 
    }) 
}); 

Вот скрипку, где вы можете попробовать: https://jsfiddle.net/403f7k3e/