The accordion CSS




Explanation

In this article, I'll show an example of creating a accordion CSS. Leads they themselves as well as the Bootstrap accordion. Link http://getbootstrap.com/javascript/#collapse-example-accordion

 

Feature

The principle of showing and hiding the contents of the accordion as in other examples, the site uses elements of input type="radio" and label, "tied" to these elements of the input.

Next, the sample code of one cell of the accordion and content to it.

  1. <div class="accordion">
  2. <input id="radio-1" type="radio" name="accordion"></input>
  3. <label for="radio-1">Button 1</label>
  4. <div>
  5. <div>Lorem ipsum ...</div>
  6. </div>
  7. </div>

 

The trick

Due to the fact that the property transition doesn't work on the property height: auto, have to limit the max-height, and a specific value, and the property height to leave equal auto.

Because of such limitations, the maximum height of an element, it may happen that the reduction of the width of the browser will increase the height of the content acici accordion, and the restriction on the maximum height will not allow to see the content beyond its limits, due to the property overflow: hidden.

  1. .accordion > div {
  2. max-height: 0;
  3. padding: 0 5px;
  4. overflow: hidden;
  5. transition: max-height .6s;
  6. }
  7. .accordion > input:checked ~ div {
  8. max-height: 500px;
  9. }

 

All the CSS code, see the DEMO. Good luck ;)

Live demo
Download ZIP







Found comments - 2






Козлов Андрей November 03, 2015
О каком CSS Bootstrap идет речь? Всё самописаное! Никаких Bootstrap плагинов нет! Для информации в Bootstrap тоже самое сделано на JS (JavaScript) у меня на CSS3. На сайте вообще ничего про JS и на JS нет! И не будет никогда, так как не о нем сайт. Конечно поддержки IE8 нет, вы на селекторы посмотрите или статью про селекторы прочитайте, там написана поддержка браузеров! По правилам CSS смотрите caniuse.com . Тот кто верстает каждый день и так знает какое свойство кроссбраузерное, а какое нет.
Silver November 01, 2015
Я так понял все это: "Аккордеон на CSS", "Закладки на CSS", "Модальное окно на CSS" работает только в современных браузерах и IE10+ (из-за transition, например)? Так указывай, плиз, этот нюанс в статьях. Еще ты пишешь "Ведут они себя также как и аккордеон Bootstrap ..." Я так понимаю, здесь вовсю используются библиотеки бутстрапа? Если да, то какие части (если можно не подключать всю библиотеку ради одного аккордеона, конечно)? В общем, все это прикольно выглядит, но не работает в IE8+ и не работает без библиотеки бутстрапа?
Current text is converted to a smiley
:) :( :0 :@ :# :$ :? :] :[ :} :{ :k :p :x :| :Q :O :S :D :X :C :-) :-( :-0 :-# :-$ :-? :-] :-[ :-} :-{ :-o :-p :-x :-| :-Q :-O :-S :-D :-X :-C :-* :-r :-t :-i :-s :-j :-k :-l :-z :-\ :-/ :-I :-J :-K :-L :-Z ;) ;] ;} ;-) ;-] ;-} =) =( =0 =@ =# =$ =? =] =[ =} ={ =o =p =x =| =Q =O =S =D =X =C
:)

Designer avatar

Gender
Hairs/Hats Mouth
Eyes Glasses
Result