Accordion CSS

Вертикальный аккордеон

HTML аккордеон, в отличии от таб-вкладок, должен иметь фиксированную высоту, пусть даже она равна 100% высоты экрана монитора [см. единицу измерения vh]. Его можно применять для создания вертикального меню, которое раскрывается вниз, например, что-то вроде этого [www.cssplay.co.uk].

HTML

<div class="horizontal-click">
  <input type="radio" name="vkl" id="vkl1" checked="checked"/>
  <label for="vkl1">Заголовок 1</label>
  <div>Вкладка 1</div>
  <input type="radio" name="vkl" id="vkl2"/>
  <label for="vkl2">Заголовок 2</label>
  <div>Вкладка 2</div>
  <input type="radio" name="vkl" id="vkl3"/>
  <label for="vkl3">Заголовка 3</label>
  <div>Вкладка 3</div>
</div>

CSS

.horizontal-click [name="vkl"] { display: none; }
.horizontal-click > :not(input):not(label) {
  overflow: hidden;
  height: 0;
  margin: 0;
  padding: 0 .5em;
  border: 1px solid #808080;
  border-top-style: none;
  transition: .5s;
}
.horizontal-click > label {
  overflow: hidden;
  display: block;
  padding: .5em 1em;
  background: #606060;
  color: rgb(200,200,200);
  white-space: nowrap;
  text-overflow: ellipsis;
  cursor: pointer;
}
.horizontal-click > :checked + label + * {
  overflow: auto;
  height: 310px;
}
.horizontal-click > :checked + label {
  background: #454545;
  cursor: default;
}

Дополнительная информация

Код подходит для "резинового" дизайна:

1. если содержимое не помещается в поле div, то появляются полосы прокрутки,
2. если заголовок вкладки не помещается в строку, то он будет обрезан, в окончании названия проставлено многоточие.

Изначально будет открыта та вкладка, радиокнопка которой помечена checked="checked".

На странице может быть несколько аккордионов. id и for каждого input и label соответственно, а также name группы input должны отличаться.

После названия вкладки label может идти любой тег, не обязательно div.

• HTML

  <ul class="horizontal-hover">
   <li>
    <h4>Заголовок 1</h4>
    <div>Вкладка 1</div>
   <li>
    <h4>Заголовок 2</h4>
    <div>Вкладка 2</div>
   <li>
    <h4>Заголовка 3</h4>
    <div>Вкладка 3</div>
  </ul>

• CSS

  .horizontal-hover {
    height: calc(310px + 35px*3 + 1px*2);
    overflow: hidden;
    outline: 1px solid #808080;
  } 
  .horizontal-hover,
  .horizontal-hover > li,
  .horizontal-hover > li > h4 {
    display: block;
    margin: 0;
    padding: 0;
  } 
  .horizontal-hover > li > h4 {
    overflow: hidden;
    height: 35px;
    line-height: 35px;
    border-bottom: 1px solid #808080;
    text-indent: .5em;
    background: #606060;
    color: rgb(200,200,200);
    white-space: nowrap;
    text-overflow: ellipsis;
    cursor: pointer;
  }
  .horizontal-hover > li > div,
  .horizontal-hover:hover > li:not(:last-child):not(:hover) > div {
    overflow: auto;
    height: 0;
    padding: 0 .5em;
    transition: .5s;
  }
  .horizontal-hover > li:first-child > div,
  .horizontal-hover > li:last-child > div,
  .horizontal-hover > li:hover > div {
    height: 310px;
  }

• Дополнительная информация

  Код подходит для "резинового" дизайна:

  1. если содержимое не помещается в поле div, то появляются полосы прокрутки,
  2. если заголовок вкладки не помещается в строку, то он будет обрезан, в окончании названия проставлено многоточие.

  На странице может быть несколько аккордионов.

Горизонтальный аккордеон.

Далее по аналогии.

<style type="text/css">
.galleryh {width: 490px;} 

.galleryh img, .galleryh:hover img:first-child {height: 333px; width: 30px; padding: 0px; outline: groove #9a3425;} 

.galleryh img:hover, .galleryh img:first-child, .galleryh:hover img:first-child:hover {width: 400px;} 
</style>

<div class="galleryh">
<img alt="" src="URL_изо"/><img alt="" src="URL_изо"/><img alt="" src="URL_изо"/><img alt="" src="URL_изо"/></div>

• HTML
  <ul class="horizontalaccordion1">
  <li id="raz1"><a href="#raz1">HTML</a><div>Информация первого слайда.</div></li>
  <li id="dva1"><a href="#dva1">CSS</a><div>Информация второго слайда.</div></li>
  <li id="tri1"><a href="#tri1">Автор</a><div>Информация третьего слайда.</div></li>
  </ul>
• CSS
  <style type="text/css">
  .horizontalaccordion1 {
    margin: 0; padding: 0;
    height: 300px;
  }
  
  .horizontalaccordion1>li {
    overflow: hidden;
    float:left;
    margin: 0; padding: 0;
    list-style:none;
    width:40px;
    height: 300px;
    background:#f0f0f0;
    transition: width 0.3s; -moz-transition: width 0.3s; -webkit-transition: width 0.3s; -o-transition: width 0.3s;
  }
  
  .horizontalaccordion1>li>a {
    display: inline-block;
    margin: 0; padding: 10px;
    height: 19px;
    width: 280px;
    border-left:#f0f0f0 1px solid;
    font-family: Arial, Helvetica, sans-serif;
    text-decoration: none;
    color: #000;
    background: #ccc;
    white-space:nowrap;
    background: -moz-linear-gradient(#999999, #cccccc);
    background: -ms-linear-gradient(#999999, #cccccc);
    background: -o-linear-gradient(#999999, #cccccc);
    background: -webkit-linear-gradient(#999999, #cccccc);
    -moz-transform: rotate(90.0deg) translate(-40px,0px); /* FF3.5+ */
    -moz-transform-origin: 0 100%;
    -o-transform: rotate(90.0deg) translate(-40px,0px); /* Opera 10.5 */
    -o-transform-origin: 0 100%;
    -webkit-transform: rotate(90.0deg) translate(-40px,0px); /* Saf3.1+, Chrome */
    -webkit-transform-origin: 0 100%;
    transform: rotate(90.0deg) translate(-40px,0px); /* Saf3.1+, Chrome */
    transform-origin: 0 100%;
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1.0)
            progid:DXImageTransform.Microsoft.gradient(startColorstr=#ff999999, endColorstr=#ffcccccc); /* IE6,IE7 */
    -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=1.0)"
                "progid:DXImageTransform.Microsoft.gradient(startColorstr=#ff999999, endColorstr=#ffcccccc)"; /* IE8 */
  }
  
  .horizontalaccordion1>li>div {
    display: inline-block;
    overflow: auto;
    position:relative; top:-40px; left:40px;
    *top:0px; *left:0px; /* IE7 Hack */
    margin:0;
    width:320px;
    height:280px;
    padding:10px;
  }
  
  .horizontalaccordion1>li:target {
    overflow: hidden;
    width: 380px;
  }
  
  .horizontalaccordion1>li:target>a {
    color:#fff;
    background: #000;
    background: -moz-linear-gradient(#454545, #000000);
    background: -ms-linear-gradient(#454545, #000000);
    background: -o-linear-gradient(#454545, #000000);
    background: -webkit-linear-gradient(#454545, #000000);
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1.0) progid:DXImageTransform.Microsoft.gradient(startColorstr=#ff454545, endColorstr=#ff000000); /* IE 5.5 - IE 7 */
    -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=1.0)"
    "progid:DXImageTransform.Microsoft.gradient(startColorstr=#ff454545, endColorstr=#ff000000)"; /* IE 8 */
  }
  </style>
  
• Автор
  См. ниже, только немного подкорректирован.

• HTML
  <ul class="horizontalaccordion">
  <li><strong>HTML</strong><div>Информация первого слайда.</div></li>
  <li><strong>CSS</strong><div>Информация второго слайда.</div></li>
  <li><strong>Автор</strong><div>Информация третьего слайда.</div></li>
  </ul>
• CSS
  <style type="text/css">
  .horizontalaccordion {
    margin: 0; padding: 0;
    height: 300px; width:460px;
  }
  
  .horizontalaccordion>li, .horizontalaccordion:hover>li:last-child {
    overflow: hidden;
    float:left;
    margin: 0; padding: 0;
    list-style:none;
    width:40px;
    height: 300px;
    background:#f0f0f0;
    transition: width 0.3s; -moz-transition: width 0.3s; -webkit-transition: width 0.3s; -o-transition: width 0.3s;
  }
  
  .horizontalaccordion>li>strong, .horizontalaccordion:hover>li:last-child>strong {
    display: inline-block;
    margin: 0; padding: 10px;
    height: 19px;
    width: 280px;
    border-left:#f0f0f0 1px solid;
    font-family: Arial, Helvetica, sans-serif;
    text-decoration: none;
    color: #000;
    background: #ccc;
    white-space:nowrap;
    background: -moz-linear-gradient(#999999, #cccccc);
    background: -ms-linear-gradient(#999999, #cccccc);
    background: -o-linear-gradient(#999999, #cccccc);
    background: -webkit-linear-gradient(#999999, #cccccc);
    -moz-transform: rotate(90.0deg) translate(-40px,0px); /* FF3.5+ */
    -moz-transform-origin: 0 100%;
    -o-transform: rotate(90.0deg) translate(-40px,0px); /* Opera 10.5 */
    -o-transform-origin: 0 100%;
    -webkit-transform: rotate(90.0deg) translate(-40px,0px); /* Saf3.1+, Chrome */
    -webkit-transform-origin: 0 100%;
    transform: rotate(90.0deg) translate(-40px,0px); /* Saf3.1+, Chrome */
    transform-origin: 0 100%;
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1.0)
            progid:DXImageTransform.Microsoft.gradient(startColorstr=#ff999999, endColorstr=#ffcccccc); /* IE6,IE7 */
    -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=1.0)"
                "progid:DXImageTransform.Microsoft.gradient(startColorstr=#ff999999, endColorstr=#ffcccccc)"; /* IE8 */
  }
  
  .horizontalaccordion>li>div, .horizontalaccordion:hover>li:last-child>div {
    font: 13px normal helvetica, sans-serif;
    display:none;
    overflow: auto;
    position:relative; top:-40px; left:40px;
    *top:0px; *left:0px; /* IE7 Hack */
    margin:0;
    width:320px;
    height:280px;
    padding:10px;
  }
  
  .horizontalaccordion>li:hover, .horizontalaccordion>li:last-child, .horizontalaccordion:hover>li:last-child:hover {
    overflow: hidden;
    width: 380px;
  }
  
  .horizontalaccordion:hover>li:hover>div, .horizontalaccordion>li:last-child>div, .horizontalaccordion:hover>li:last-child:hover>div {
    display: inline-block;
  }
  
  .horizontalaccordion:hover>li:hover>strong, .horizontalaccordion>li:last-child>strong, .horizontalaccordion:hover>li:last-child:hover>strong {
    color:#fff;
    background: #000;
    background: -moz-linear-gradient(#454545, #000000);
    background: -ms-linear-gradient(#454545, #000000);
    background: -o-linear-gradient(#454545, #000000);
    background: -webkit-linear-gradient(#454545, #000000);
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1.0) progid:DXImageTransform.Microsoft.gradient(startColorstr=#ff454545, endColorstr=#ff000000); /* IE 5.5 - IE 7 */
    -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=1.0)"
    "progid:DXImageTransform.Microsoft.gradient(startColorstr=#ff454545, endColorstr=#ff000000)"; /* IE 8 */
  }
  
  .horizontalaccordion>li>strong:hover {
    cursor:pointer;
  }
  </style>
• Автор
  Автор.

Похожие материалы:

• Tab-меню или меню вкладками на CSS,
• Скрипт tab-меню или меню вкладками,
• Меню вкладками для Blogger.
• Спойлер HTML (тег details)
• Раскрывающаяся таблица