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

В отличие от предыдущего аккордеона на jQuery, этот имеет 3 отличия:
1. Он не на списках, а на блоках, поэтому можно легче контролировать высоту;
2. Открывается по клику, а не при наведении;
3. Реализовано подсвечивание заголовка.
Сначала код, потом разберем как работает:
Код:

<style type="text/css">

.
showhide{
cursorpointer;
    
color#fff; 
    
text-decorationnone
    
text-shadow1px 1px 2px #333; 
    
background#4698BF; 
    
background: -webkit-gradient(linearleft topleft bottomfrom(#55ACD4), to(#4698BF)); 
    
background: -moz-linear-gradient(top,  #55ACD4,  #4698BF); 
    
background: -o-linear-gradient(top#55ACD4 0%, #4698BF 100%); 
    
backgroundgradient(lineartop,  #55ACD4,  #4698BF); 
    
border1px solid #46768B; 
    
border-radius4px
    
padding5px 11px
    
font-size1.15em;
    
width250px;
    
margin-bottom:1px;
}
.
showhide:hover,.showhide.active{
    
color#fff; 
    
text-decorationnone;
    
background#A68328;
    
background: -webkit-gradient(linearleft topleft bottomfrom(#BFAB75), to(#A68328)); 
    
background: -moz-linear-gradient(top,  #BFAB75,  #A68328); 
    
background: -o-linear-gradient(top#BFAB75 0%, #A68328 100%); 
    
backgroundgradient(lineartop,  #BFAB75,  #A68328);
    
border1px solid #A68328;
    
border-radius4px;
}
.
showhide-all{
    
display:none;
    
width250px;
    
background#FFE7A7; 
    
background: -webkit-gradient(linearleft topleft bottomfrom(#FFE7A7), to(#FFDE87)); 
    
background: -moz-linear-gradient(top,  #FFE7A7,  #FFDE87); 
    
background: -o-linear-gradient(top#FFE7A7 0%, #FFDE87 100%); 
    
backgroundgradient(lineartop,  #FFE7A7,  #FFDE87); 
    
border1px solid #FFD25E; 
    
padding5px 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 должен быть подключен на странице до начала манипуляций;)
Продолжение — ещё один аккордеон, работающий при наведении.
26.10.2012 11:57 Автор/источник: Den1xxx

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

Вы не залогинены! Регистрация

Комментарии

admin
denis
03:41:01 14 Январь 2013
Цитата:
Добрый вечер. подскажите пожалуйста как сделать первый блок открытый при загрузке страницы ?
Примерно так:
Цитата:
<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>
Евгений
No avatar
02:21:10 14 Январь 2013
Добрый вечер. подскажите пожалуйста как сделать первый блок открытый при загрузке страницы ?
admin
denis
16:45:04 15 Ноябрь 2012
Цитата:
Куда сие можно пременить?
Куда угодно, обычно так делают в боковом меню.
Лично я массово применяю как меню в скрипте магазина с вложенными категориями, только несколько в другом виде.
Alesjo
alesjo
12:28:34 11 Ноябрь 2012
Куда сие можно пременить?

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