Каков самый простой способ реализовать чистый css show / hide?
Я обнаружил элемент для html5, и это вызвало у меня желание определить, возможно ли реализовать простое и многократно используемое отображение / скрытие с помощью css только.
В прошлом я создавал механизм отображения / скрытия для отображения и скрытия контента, задавая двум элементам относительное позиционирование и один отрицательный z-index, а затем уменьшая z-index переднего элемента при наведении (и увеличивая z-index заднего элемента при наведении).
Однако этот метод работает только для элементов, находящихся в одном месте. Существуют ли другие методы имитации отображения / скрытия неперекрывающихся элементов? например, заголовок, который вызывает отображение раздела описательного текста.
Тривиальный пример кода, к которому я хотел бы применить отображение / скрытие:
<div id='container'>
<h3 id='show-hide-trigger'>summary</h3>
<p id='show-hide-text'>Paragraph of detail text paragraph Paragraph of detail text paragraph Paragraph of detail text paragraph Paragraph of detail text paragraph</p>
</div>
И да, я знаю, что jQuery существует.