Показать скрытые divs при нажатии в HTML и CSS без jQuery

Мне нужно что-то очень похожее на складные заголовки Theming, расположенные здесь:

http://jquerymobile.com/demos/1.2.0-alpha.1/docs/content/content-collapsible.html

Без использования JQuery это возможно?

Это для мобильного сайта, но страница всегда будет отключена, поэтому я действительно не хочу использовать jquery. Также предоставление пользовательского стиля jQuery mobile намного сложнее, чем использование чистого CSS и его стиль.

Ответы

Ответ 1

Использование входа `label` и `checkbox`

Сохраняет выбранный элемент открытым и переключаемым.

.collapse{
  cursor: pointer;
  display: block;
  background: #cdf;
}
.collapse + input{
  display: none; /* hide the checkboxes */
}
.collapse + input + div{
  display:none;
}
.collapse + input:checked + div{
  display:block;
}

<label class="collapse" for="_1">Collapse 1</label>
<input id="_1" type="checkbox"> 
<div>Content 1</div>

<label class="collapse" for="_2">Collapse 2</label>
<input id="_2" type="checkbox">
<div>Content 2</div>

Ответ 2

Вы можете использовать checkbox для симуляции onClick с помощью CSS:

input[type=checkbox]:checked + p {
    display: none;
}

JSFiddle

Смежные селекторные ролики

Ответ 3

Мне нравится ответ Roko и добавлен несколько строк, чтобы вы получили треугольник, который указывает, когда элемент скрыт, и вниз, когда он отображается:

.collapse { font-weight: bold; display: inline-block; }
.collapse + input:after { content: " \25b6"; display: inline-block; }
.collapse + input:checked:after { content: " \25bc"; display: inline-block; }
.collapse + input { display: inline-block; -webkit-appearance: none; -o-appearance:none; -moz-appearance:none;  }
.collapse + input + * { display: none; }
.collapse + input:checked + * { display: block; }

Ответ 4

Конечно! jQuery - это просто библиотека, которая в любом случае использует javascript.

Вы можете использовать document.getElementById для получения соответствующего элемента, а затем соответствующим образом изменить его высоту через element.style.height.

elementToChange = document.getElementById('collapseableEl');
elementToChange.style.height = '100%';

Оберните это аккуратной маленькой функцией, которая предназначена для переключения вперед и назад, и у вас есть решение.