Помогите сделать слайдер аля аккордион

[Gestein]

Добрый день! Мне нужна помощь в написании слайдера в стиле аккордеон для моего сервиса. Есть вот такое меню надо сделать его в стиле аккордеон. С чего начать?

 

 

Очень нужна помощь.

[afdw]

http://jsfiddle.net/701Lmnrr/

[Gestein]

Спасибо кое что уже получилось. Вот тут можно посмотреть http://getop.ru. Сейчас буду пробовать доделать полностью. Если что отпишу в ЛС вам уважаемый afdw!

Edited June 16, 2015 by Gestein

[afdw]

У вас ЛС отключено. Нужно 30 сообщений написать, чтобы включилось.

[Gestein]

Хорошо отпишу в этой темке о возникших проблемах.

[Gestein]

После вставки дива в лайбел все поулчилось так как хотел. Есть и описания тарифов и ссылочку можно вставить. Но вот одна проблема. Последний блок выходит за рамки дизайна. Как решить? Код такой. На данный момент. Как выезжает можно заценить по адресу getop.ru

 

HTML:

<div id="accordion"><input type="radio" checked="checked" name="menu" id="ch1"/><label for="ch1"><div class="service_des">Тест Тест Тест</div></label><input type="radio" name="menu" id="ch2"/><label for="ch2"><div class="service_des">Тест Тест Тест</div></label><input type="radio" name="menu" id="ch3"/><label for="ch3"><div class="service_des">Тест Тест Тест</div></label><input type="radio" name="menu" id="ch4"/><label for="ch4"><div class="service_des">Тест Тест Тест</div></label><input type="radio" name="menu" id="ch5"/><label for="ch5"><div class="service_des">Тест Тест Тест </div></label><input type="radio" name="menu" id="ch6"/><label for="ch6"><div class="service_des">Тест Тест Тест</div></label></div>

CSS:

input[type=radio] {    display: none;}label {    display: block;    width: 100px;    height: 180px;    float: left;}label:nth-of-type(1) {    background: url(../images/alpha_2.png) no-repeat;}label:nth-of-type(2) {    background: url(../images/beta_2.png) no-repeat;}label:nth-of-type(3) {    background: url(../images/gamma_2.png) no-repeat;}label:nth-of-type(4){    background: url(../images/delta_2.png) no-repeat;}label:nth-of-type(5){    background: url(../images/omega_2.png) no-repeat;}label:nth-of-type(6){    background: url(../images/buy_2.png) no-repeat;}input:checked + label {    width: 400px;}#accordion{height: 180px;width: 900px;float: left;margin-top: 10px;}.service_des {height: 180px;width: 300px;float: left;margin-left: 100px;}

[afdw]

label {  overflow: hidden;  transition: 0.3s;}

Последняя строка добавляет анимацию.

[Gestein]

Спасибо Вам очень помогли!