Сворачивание блока при повторном клике на него

@Lovrentiy · Регистрация: 07.09.2011

Author24 — интернет-сервис помощи студентам

Доброго дня! На сайте используется простейший аккордеон:

Javascript

$(function() {
        $('.accordeon-content').not('.active').hide();          
 
        $('.accordeon-caption').click(function() {
            $('.accordeon-content').not($(this).next('.accordeon-content')).removeClass('active').slideUp(600);
            $(this).next('.accordeon-content').addClass('active').slideDown(600);
        })
    })

Слаб в JS поэтому есть ряд сложностей:
1. Нужно добавить функцию сворачивания блока при повторном клике на него
2. Нужно добавить функцию которая бы при клике делала спан с одним классом открытым, а при повторном нажатии, либо нажатии на следующем блоке делал бы спан закрытым. (просто два спан-а один с текстом "открыть" второй с текстом "закрыть")

Буду рад любой помощи. Заранее спасибо!

@Lovrentiy · 14.04.2014, 07:58 **[ТС]**

Если вопрос глупый и на него даже отвечать не стоит, то буду очень признателен за ссылку на почитать. СпасибО!

@Lazy_Den · 14.04.2014, 09:53

Сообщение от Lovrentiy

Если вопрос глупый ...

Ну, почему же? Только для полноты не хватает вашей html-структуры в вопросе. Смотрите такой пример. Если будут сложности, то показывайте свой код.

Javascript

$(function() {
    var caption = $('.accordeon-caption'),
        content = $('.accordeon-content').hide();         
    caption.click(function(e) {
        e.preventDefault();
        content.not($(this).next(content)).removeClass('active').slideUp(600);
        $(this).next(content).toggleClass('active').slideToggle(600);
    });
});

@Lovrentiy · 15.04.2014, 21:09 **[ТС]**

HTML5

<ul class="accordeon">
<li>
<div class="accordeon-caption">
<span class="accordeon-caption1"></span><span class="open">открыть</span><span class="close">закрыть</span>
<div class="clear">&nbsp;</div>
<h5></h5>
</div>
<div class="accordeon-content"></div
</li>
</ul>

Вот каркас.

Хотелось бы попросить помочь и с двумя спан блоками open и close, в них текст, открыть и закрыть, нужно задать им некий класс в коде, что бы при клике на аккордеон, надпись менялась, с открыть, на закрыть и т.д.

@Faust971 · 15.04.2014, 22:04

Соответственно у одной надписи должно быть display none.

Javascript

1
2
3

$('.accordeon').on('click', function(){
$('.open, .close').slideToggle();
});

@Lovrentiy · 16.04.2014, 10:33 **[ТС]**

извените, не совсем понятно.

Ваш код следует добавить просто отдельно, или совместно с вышеуказанным?

CSS

span.open, span.close{
    color:white;
    padding-left:20px;  
    font-size:18px;
    line-height:28px;
}
 
span.close{display:none;}

@Faust971 · 16.04.2014, 10:45

К вашему добавляйте строчку

Javascript

 caption.click(function(e) {
        e.preventDefault();
        content.not($(this).next(content)).removeClass('active').slideUp(600);
        $(this).next(content).toggleClass('active').slideToggle(600);
        $('.open, .close').slideToggle();
    });

я просто событие для примера написал.

@Lovrentiy · 18.04.2014, 05:41 **[ТС]**

Доброго дня!

Все заработало, но есть нюанс: если посетитель открыв один из пункта меню перейдет к следующему, то вместо "открыть" будет написано "закрыть" и все сбивается... как можно решить?

@Lovrentiy · 20.04.2014, 07:58 **[ТС]**

Faust971, Не посодействуете?

@Faust971 · 20.04.2014, 11:36

Так пробуйте:

Javascript

caption.click(function(e) {
        e.preventDefault();
        content.not($(this).next(content)).removeClass('active').slideUp(600);
        $(this).next(content).toggleClass('active').slideToggle(600);
        $(this).find('.open, .close').slideToggle();
    });

@Lovrentiy · 20.04.2014, 18:48 **[ТС]**

Faust971, к сожалению не помогло, визуально я не заметил разницы
страница с меню
код:

Javascript

$(function() {
    var caption = $('.accordeon-caption'),
        content = $('.accordeon-content').hide();         
    caption.click(function(e) {
        e.preventDefault();
        content.not($(this).next(content)).removeClass('active').slideUp(600);
        $(this).next(content).toggleClass('active').slideToggle(600);
        $(this).find('.open, .close').slideToggle();
    });
});

P.S. вру, разница есть, но работает не совсем корректно, на последующие пункты работает корректно (если открыт пункт, то следующий за ним показывает не "закрыть", а "отркыть"), но предыдущие ведут себя опять неадекватно.

@Faust971 · 20.04.2014, 19:35

Вот так попробуйте

Javascript

$(function() {
    var caption = $('.accordeon-caption'),
        content = $('.accordeon-content').hide();         
    caption.click(function(e) {
        e.preventDefault();
 
        content.not($(this).next(content)).removeClass('active').slideUp(600);
        $('.activeCap').not($(this)).removeClass('activeCap').find('.open, .close').slideToggle(0);
        $(this).next(content).toggleClass('active').slideToggle(600);
        $(this).toggleClass('activeCap');
        $(this).find('.open, .close').slideToggle(0);
    });
});

Добавлено через 6 минут
Сохранил вашу страницу проверил код все работает)

@Lovrentiy · 20.04.2014, 22:39 **[ТС]**

Faust971, Огромное спасибо!

Извините за назойливость, но уже не в первом аккордеоне интересует, есть ли способ фиксировать страницу при работе с аккордеоном? При клике на пункты в "верхушке" аккордеона, он раскрывается вниз и все хорошо, но когда мы просматриваем пункт значительных размеров, и нажимаем на пункт ПОД ним, то при сворачивании предыдущего блока, видим как правило или середину, или конец текста открываемого пункта.
Сталкивались ли с подобным? Знаете ли решение или какую нибудь хитрость?

Заранее спасибо за ответ!

@Lovrentiy 162 / 162 / 11 Регистрация: 07.09.2011 Сообщений: 995
	20.04.2014, 22:39 [ТС]	13
	Faust971, Огромное спасибо! Извините за назойливость, но уже не в первом аккордеоне интересует, есть ли способ фиксировать страницу при работе с аккордеоном? При клике на пункты в "верхушке" аккордеона, он раскрывается вниз и все хорошо, но когда мы просматриваем пункт значительных размеров, и нажимаем на пункт ПОД ним, то при сворачивании предыдущего блока, видим как правило или середину, или конец текста открываемого пункта. Сталкивались ли с подобным? Знаете ли решение или какую нибудь хитрость? Заранее спасибо за ответ! 0

Новые блоги и статьи
Создание макробота, как способа экономии времени и варианта ИИ. Hrethgir 28.01.2025 Чисто теоретически, создание ИИ на ПК можно разделить на части. Создать бота отвечающего за железо (эмулирование вкл, выкл, мышь, клавиатура), другой бот осуществляет распознавание изображений,. . .	[Golang] 121. Best Time to Buy and Sell Stock alhaos 28.01.2025 В этой задаче мы получаем слайс целых чисел, которые означают цену акции в разные моменты времени, и должны вернуть максимально возможную прибыль от купли продажи акции. / / . . .	Проектирование и моделирование hw_wired 28.01.2025 Введение в моделирование Моделирование представляет собой один из фундаментальных методов научного познания, который позволяет изучать объекты и явления через создание их упрощенных аналогов. В. . .	Алгоритмы и исполнители hw_wired 28.01.2025 Введение в алгоритмы В современном мире информационных технологий алгоритмы играют основополагающую роль в решении различных задач и автоматизации процессов. Алгоритм представляет собой точную. . .	Хранение информации hw_wired 28.01.2025 Введение: Роль систем хранения информации в современном мире В современную эпоху цифровых технологий эффективное хранение информации становится одним из ключевых факторов успешного развития любой. . .	Обработка числовой информации hw_wired 28.01.2025 Введение в обработку числовой информации В современном мире обработка числовой информации стала неотъемлемой частью как профессиональной деятельности, так и повседневной жизни. Электронные таблицы. . .
Мультимедиа hw_wired 28.01.2025 Введение в мультимедийные технологии В современном мире мультимедийные технологии стали неотъемлемой частью нашей жизни, проникнув во все сферы человеческой деятельности. Термин "мультимедиа". . .	Обработка текстовой информации hw_wired 28.01.2025 Введение в обработку текстовой информации В современном мире обработка текстовой информации играет фундаментальную роль в различных сферах человеческой деятельности. Текстовые редакторы стали. . .	Обработка графической информации hw_wired 28.01.2025 Введение в компьютерную графику Компьютерная графика стала неотъемлемой частью современного цифрового мира, пройдя впечатляющий путь развития от простейших черно-белых изображений до сложных. . .	Python в Алгоритмике: Решение задач hw_wired 28.01.2025 Введение в Python и Алгоритмику В современном мире программирование стало неотъемлемой частью образования и профессионального развития. Python зарекомендовал себя как один из самых популярных и. . .	Компьютер как универсальное устройство для работы с информацией hw_wired 28.01.2025 Введение в устройство компьютера Компьютер представляет собой универсальное электронное устройство, предназначенное для автоматической обработки информации. В современном мире компьютер стал. . .	Информация и информационные процессы hw_wired 28.01.2025 Понятие информации и ее виды В современном мире информация является одним из фундаментальных понятий, пронизывающих все сферы человеческой деятельности. Под информацией понимают любые сведения об. . .

@Lovrentiy 162 / 162 / 11 Регистрация: 07.09.2011 Сообщений: 995
	14.04.2014, 07:58 [ТС]	2
	Если вопрос глупый и на него даже отвечать не стоит, то буду очень признателен за ссылку на почитать. СпасибО! 0

@Lovrentiy 162 / 162 / 11 Регистрация: 07.09.2011 Сообщений: 995
	18.04.2014, 05:41 [ТС]	8
	Доброго дня! Все заработало, но есть нюанс: если посетитель открыв один из пункта меню перейдет к следующему, то вместо "открыть" будет написано "закрыть" и все сбивается... как можно решить? 0

@Lovrentiy 162 / 162 / 11 Регистрация: 07.09.2011 Сообщений: 995
	20.04.2014, 07:58 [ТС]	9
	Faust971, Не посодействуете? 0

Сворачивание блока при повторном клике на него

Решение