Ссылки

Поиск

 
Новости, Статьи
Форум
Файлы

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

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

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

Гадания на таро 0 >>
Блок новостей в виде блога 1 >>
Игры для сайта 34 >>
Сервис создания тестов 94 >>
Дед 1 >>

Последние статьи

Антиспам «Я не робот» 0
За что воюет Украина и когда всё это кончится 12
Улучшен сайт «Лайт мебель» 0
Портфолио — сайт о художественной ковке 0
Изменение цен 0

Чтобы вебмастер сделал именно то, что нужно, подробно составьте техническое задание к договору.

RSS фиды

RSS Статьи
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 должен быть подключен на странице до начала манипуляций;)
Продолжение — ещё один аккордеон, работающий при наведении.
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.