Accordion для сайта

Самое простой Accordion для сайта, работает на свойствах CSS3. Настраивается всё, размеры, цвета, кто не смог разобраться описываем что не понятно. Accordion может содержать заголовок с ссылкой или быть без неё на Ваше усмотрение.
Установите там где хотите видеть Accordion:

<style> [id="accordion"] > [class="accordion"] { width: 300px; height: 30px; overflow: hidden; transition: height ease-in-out 500ms; -o-transition: height ease-in-out 500ms; -moz-transition: height ease-in-out 500ms; -webkit-transition: height ease-in-out 500ms; border: 1px solid #ccc; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; margin-bottom: 2px; } #accordion h3 { display: block; height: 30px; line-height: 20px; margin: 0px 0px 5px 0px; background: #e6e6e6; padding: 5px; } #accordion h3 > a { color: #1e1e1e; text-decoration: none; } #accordion p { height: 150px; padding: 5px; } #accordion li { list-style:none; float:left; } #accordion li a { padding: 5px; color:3D3D3D; text-decoration:none !important; } #accordion li a:hover:before { content: "►"; padding-right:5px; color:red; } #accordion div:hover {height: 180px;} #accordion div:hover h3 { border-bottom: 1px solid #ccc; font-weight: bold; } </style> <div id="accordion"> <div class="accordion"> <h3> <a href="#">Аккордион</a></h3> <p> Меню <span style="color:red;">accordion</span> для сайта. Облегчённый вариант с эффектом замедленного раскрытия.</p> </div> <div class="accordion"> <h3> Настройки Accordion</h3> <p> В меню регулируется всё, цвета, размеры и время замедления при открытии. Можно использовать заголовок как ссылку для перехода, можно без ссылки.</p> </div> <div class="accordion"> <h3> Применение Accordion</h3> <p> Применяться может для чего угодно, даже как вид материалов сайта uCoz, тогда здесь будет краткое описание.</p> </div> <div class="accordion"> <h3> Ссылки Accordion</h3> <li> <a href="//cs-unity3d.ucoz.ru/"> Counter Strike 1.6 ® Unity 3D </a> </li> <li> <a href="//cs-unity3d.ucoz.ru/#tab2"> Counter Strike 1.6 Portable Unity 3D </a> </li> <li> <a href="//cs-unity3d.ucoz.ru/#tab3"> Counter Strike 1.6 Unity 3D </a> </li> <li> <a href="#">Меню Аккордион</a> </li> </div> </div>
Accordion в подключенном виде:

Аккордион
Меню accordion для сайта. Облегчённый вариант с эффектом замедленного раскрытия.

Настройки Accordion
В меню регулируется всё, цвета, размеры и время замедления при открытии. Можно использовать заголовок как ссылку для перехода, можно без ссылки.

Применение Accordion
Применяться может для чего угодно, даже как вид материалов сайта uCoz, тогда здесь будет краткое описание.

Ссылки Accordion

Counter Strike 1.6 ® Unity 3D

Counter Strike 1.6 Portable Unity 3D

Counter Strike 1.6 Unity 3D

Меню Аккордион