Ссылки

Поиск

Привет, Гость

Войти
Идентификация
Я забыл свой пароль
Регистрация

Обновления на форуме

Блок новостей в виде блога 2 >>
Игры для сайта 34 >>
Сервис создания тестов 94 >>
Дед 1 >>
На сайте регистрация пользователей спамом 3 >>

Боюсь, что если я так и продолжу стареть каждый год, непременно как-нибудь окочурюсь. Надо поаккуратнее с этой фигней.

RSS фиды

RSS Файлы
RSS Новости
RSS Форум

Статьи → Статьи → Разработка сайтов → Простой аккордеон на jQuery №2

В отличие от предыдущего аккордеона на jQuery, этот имеет 3 отличия:

1. Он не на списках, а на блоках, поэтому можно легче контролировать высоту;

2. Открывается по клику, а не при наведении;

3. Реализовано подсвечивание заголовка.

Сначала код, потом разберем как работает:
Код: 
<style type="text/css">

.showhide{

cursor: pointer;

    color: #fff; 

    text-decoration: none; 

    text-shadow: 1px 1px 2px #333; 

    background: #4698BF; 

    background: -webkit-gradient(linear, left top, left bottom, from(#55ACD4), to(#4698BF)); 

    background: -moz-linear-gradient(top,  #55ACD4,  #4698BF); 

    background: -o-linear-gradient(top, #55ACD4 0%, #4698BF 100%); 

    background: gradient(linear, top,  #55ACD4,  #4698BF); 

    border: 1px solid #46768B; 

    border-radius: 4px; 

    padding: 5px 11px; 

    font-size: 1.15em;

    width: 250px;

    margin-bottom:1px;

}

.showhide:hover,.showhide.active{

    color: #fff; 

    text-decoration: none;

    background: #A68328;

    background: -webkit-gradient(linear, left top, left bottom, from(#BFAB75), to(#A68328)); 

    background: -moz-linear-gradient(top,  #BFAB75,  #A68328); 

    background: -o-linear-gradient(top, #BFAB75 0%, #A68328 100%); 

    background: gradient(linear, top,  #BFAB75,  #A68328);

    border: 1px solid #A68328;

    border-radius: 4px;

}

.showhide-all{

    display:none;

    width: 250px;

    background: #FFE7A7; 

    background: -webkit-gradient(linear, left top, left bottom, from(#FFE7A7), to(#FFDE87)); 

    background: -moz-linear-gradient(top,  #FFE7A7,  #FFDE87); 

    background: -o-linear-gradient(top, #FFE7A7 0%, #FFDE87 100%); 

    background: gradient(linear, top,  #FFE7A7,  #FFDE87); 

    border: 1px solid #FFD25E; 

    padding: 5px 11px; 

    margin-bottom:3px;

}

</style>



<script type="text/javascript">

$(document).ready(function() {

$('.showhide').click(function() {

$('.showhide-all').slideUp(500);

$('.showhide').removeClass('active');

$(this).next('div').filter(function(){return $(this).css('display')=='block'}).slideUp(500);

$(this).next('div').filter(function(){

return $(this).css('display')=='none'

}).slideDown(500).prev('div').addClass('active');

});

});

</script>



<div class="showhide">Показать/скрыть 1</div>

<div class="showhide-all">

Подробный текст. Подробный текст. 

Подробный текст. Подробный текст. 

Подробный текст. Подробный текст. 

Подробный текст. Подробный текст. 

Подробный текст. Подробный текст.

</div>



<div class="showhide">Показать/скрыть 2</div>

<div class="showhide-all">

Подробный текст. Подробный текст. 

Подробный текст. Подробный текст. 

Подробный текст. Подробный текст. 

Подробный текст. Подробный текст. 

Подробный текст. Подробный текст.

</div>



<div class="showhide">Показать/скрыть 3</div>

<div class="showhide-all">

Подробный текст. Подробный текст. 

Подробный текст. Подробный текст. 

Подробный текст. Подробный текст. 

Подробный текст. Подробный текст. 

Подробный текст. Подробный текст.

</div>



<div class="showhide">Показать/скрыть 4</div>

<div class="showhide-all">

Подробный текст. Подробный текст. 

Подробный текст. Подробный текст. 

Подробный текст. Подробный текст. 

Подробный текст. Подробный текст. 

Подробный текст. Подробный текст.

</div>
Как работает.

По клику:

— Закрываем все под-слайды.

— Удаляем класс active у всех заголовков.

— Если следующий div (за тем, на который нажали) закрыт — открываем и предыдущему div добавляем класс active, а если открыт — закрываем.

Получилось такое решение "в лоб".



Пример (кликнуть):

Показать/скрыть 1
Подробный текст. Подробный текст. Подробный текст. Подробный текст. Подробный текст. Подробный текст. Подробный текст. Подробный текст. Подробный текст. Подробный текст.
Показать/скрыть 2
Подробный текст. Подробный текст. Подробный текст. Подробный текст. Подробный текст. Подробный текст. Подробный текст. Подробный текст. Подробный текст. Подробный текст.
Показать/скрыть 3
Подробный текст. Подробный текст. Подробный текст. Подробный текст. Подробный текст. Подробный текст. Подробный текст. Подробный текст. Подробный текст. Подробный текст.
Показать/скрыть 4
Подробный текст. Подробный текст. Подробный текст. Подробный текст. Подробный текст. Подробный текст. Подробный текст. Подробный текст. Подробный текст. Подробный текст.






Разумеется, jQuery должен быть подключен на странице до начала манипуляций;)

Продолжение — ещё один аккордеон, работающий при наведении.
Дата 2012-10-26 12:57:33

Комментировать

Вы не залогинены!

Комментарии

admin 2013-01-14 04:41:01
denis
Цитата:
Добрый вечер. подскажите пожалуйста как сделать первый блок открытый при загрузке страницы ?
Примерно так:
Цитата:
<script type="text/javascript">

$(document).ready(function() {



//Добавленная строчка:

//ищем в классе .showhide первый элемент,

//добавляем ему класс active, а затем открываем следующий за ним div

$('.showhide:first').addClass('active').next('div').css('display','block');



$('.showhide').click(function() {

$('.showhide-all').slideUp(500);

$('.showhide').removeClass('active');

$(this).next('div').filter(function(){return $(this).css('display')=='block'}).slideUp(500);

$(this).next('div').filter(function(){

return $(this).css('display')=='none'

}).slideDown(500).prev('div').addClass('active');

});

});

</script>
Евгений 2013-01-14 03:21:10
No avatar
Добрый вечер. подскажите пожалуйста как сделать первый блок открытый при загрузке страницы ?
admin 2012-11-15 17:45:04
denis
Цитата:
Куда сие можно пременить?
Куда угодно, обычно так делают в боковом меню.

Лично я массово применяю как меню в скрипте магазина с вложенными категориями, только несколько в другом виде.
Alesjo 2012-11-11 13:28:34
alesjo
Куда сие можно пременить?

Устал читать? Напиши! Или позвони +375 29 5344286. На связи по будним дням с 800 до 1700.