Аккордеон с помощью CSS3 и HTML5

by Andrey Dobrovoi

HTML

<div class="demo">
<input class="toggle-box" id="unit-1" type="radio" >
<label for="unit-1">Аккордеон - Нажмите Здесь!</label>
<div class="box">HTML — стандартный язык разметки документов во Всемирной паутине. Большинство веб-страниц содержат описание разметки на языке HTML (или XHTML). Язык HTML интерпретируется браузерами и отображается в виде документа в удобной для человека форме..</div>
<input class="toggle-box" id="unit-2" type="radio" >
<label for="unit-2">Аккордеон - Нажмите Здесь!</label>
<div class="box">CSS - CSS Cascading Style Sheets — каскадные таблицы стилей — формальный язык описания внешнего вида документа, написанного с использованием языка разметки. Преимущественно используется как средство описания, оформления внешнего вида веб-страниц, написанных с помощью языков разметки HTML и XHTML, но может также применяться к любым XML-документам, например, к SVG или XUL.</div>
</div>

CSS

.toggle-box {
  display: none;
}
.toggle-box + label { 
  cursor: pointer;
  background: #6c6e74;
  background: -moz-linear-gradient(top,  #6c6e74 0%, #4b4d51 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#6c6e74), color-stop(100%,#4b4d51));
  background: -webkit-linear-gradient(top,  #6c6e74 0%,#4b4d51 100%);
  background: -o-linear-gradient(top,  #6c6e74 0%,#4b4d51 100%);
  background: -ms-linear-gradient(top,  #6c6e74 0%,#4b4d51 100%);
  background: linear-gradient(top,  #6c6e74 0%,#4b4d51 100%);  
  display: block;
  font: normal 14px InconsolataMedium, Helvetica, Arial, sans-serif;
  line-height: 21px;
  padding: 8px 22px; 
  margin-bottom: 0px;
  color: #C9C9C9;
}
.toggle-box + label:hover{
      
}
.toggle-box + label + div {
  display: none;
  margin-bottom: 0px;
}
.toggle-box:checked + label + div {
  display: block;
}
.toggle-box + label:before {
   background: #404247;
  -webkit-border-radius: 12px;
  -moz-border-radius: 12px;
   border-radius: 12px;
   color: #C9C9C9;
   content: "+";
   display: block;
   float: right;
   font-size: 14px;
   font-weight: bold; 
   height: 18px;
   line-height: 18px;
   margin: 2px 5px 0px;
   text-align: center;
   width: 18px;
   box-shadow: inset 1px 1px 1px rgba(0,0,0, .2), 1px 1px 1px rgba(255,255,255, .1); 
   -moz-box-shadow: inset 1px 1px 1px rgba(0,0,0, .2), 1px 1px 1px rgba(255,255,255, .1); 
   -webkit-box-shadow: inset 1px 1px 1px rgba(0,0,0, .2), 1px 1px 1px rgba(255,255,255, .1);    
}
.toggle-box:checked + label:before {
  content: "\2212";
}
.box{
    border-left: #eee solid 1px;
    border-right: #eee solid 1px;
    border-bottom: #eee solid 1px;
    padding: 10px 10px 10px;font: 12px Helvetica, Arial, Sans-Serif;
    line-height: 1.5;
}
/* demo box position */
.demo {
    width: 350px;
    margin: 15% 20%;
}