CSS3 для реализации табов, аккордеона и тогглера без javascript

• 01, 20, 2013
•  bullgare
•  HTML and CSS
• No Comments.

Табы

JS Bin
Методика — скрытые инпуты и следующий css:

.tab-switcher input[type=radio]:checked ~ .tab-content {
  z-index: 10;
  opacity: 1;
  background: #888;
  color: white;
}

.tab-switcher input[type=radio]:checked ~ label {
  background: #888;
  color: white;
}

~ позволяет обращаться к элементам-«братьям».

Аккордеон

JS Bin
Методика — скрытые чекбоксы и css:

.accordion-wrap input[type=checkbox]:checked ~ .accordion-content {
  max-height: 500px;
  -webkit-transition: all 2.5s linear;
  -moz-transition: all 2.5s linear;
  -ms-transition: all 2.5s linear;
  -o-transition: all 2.5s linear;
  transition: all 2.5s linear;
}

.accordion-wrap input[type=checkbox]:checked ~ label {
  background: #ddd;
}

Тогглер

JS Bin

input:focus ~ label {
    left: 11em;
}

Тогглер правда не совсем «честный», т.к. при потере фокуса инпут скрывается. Но, думаю, можно реализовать и нормальный (с чекбоксами).

Источник — http://www.adobe.com/devnet/html5/articles/using-form-elements-and-css3-to-replace-javascript.html