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

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

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

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

JavaScript
1
2
3
4
5
6
7
8
$(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
1
2
3
4
5
6
7
8
9
$(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
1
2
3
4
5
6
7
8
9
10
<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
1
2
3
4
5
6
7
8
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
1
2
3
4
5
6
 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
1
2
3
4
5
6
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
1
2
3
4
5
6
7
8
9
10
$(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
1
2
3
4
5
6
7
8
9
10
11
12
13
$(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, Огромное спасибо!

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

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

Новые блоги и статьи Все статьи Все блоги /
PhpStorm 2025.3: WSL Terminal всегда стартует в ~ and_y87 14.12.2025 PhpStorm 2025. 3: WSL Terminal всегда стартует в ~ (home), игнорируя директорию проекта Симптом: После обновления до PhpStorm 2025. 3 встроенный терминал WSL открывается в домашней директории. . .	Access VikBal 11.12.2025 Помогите пожалуйста !! Как объединить 2 одинаковые БД Access с разными данными.	Новый ноутбук volvo 07.12.2025 Всем привет. По скидке в "черную пятницу" взял себе новый ноутбук Lenovo ThinkBook 16 G7 на Амазоне: Ryzen 5 7533HS 64 Gb DDR5 1Tb NVMe 16" Full HD Display Win11 Pro	Музыка, написанная Искусственным Интеллектом volvo 04.12.2025 Всем привет. Некоторое время назад меня заинтересовало, что уже умеет ИИ в плане написания музыки для песен, и, собственно, исполнения этих самых песен. Стихов у нас много, уже вышли 4 книги, еще 3. . .	От async/await к виртуальным потокам в Python IndentationError 23.11.2025 Армин Ронахер поставил под сомнение async/ await. Создатель Flask заявляет: цветные функции - провал, виртуальные потоки - решение. Не threading-динозавры, а новое поколение лёгких потоков. Откат?. . .
Поиск "дружественных имён" СОМ портов Argus19 22.11.2025 Поиск "дружественных имён" СОМ портов На странице: https:/ / norseev. ru/ 2018/ 01/ 04/ comportlist_windows/ нашёл схожую тему. Там приведён код на С++, который показывает только имена СОМ портов, типа,. . .	Сколько Государство потратило денег на меня, обеспечивая инсулином. Programma_Boinc 20.11.2025 Сколько Государство потратило денег на меня, обеспечивая инсулином. Вот решила сделать интересный приблизительный подсчет, сколько государство потратило на меня денег на покупку инсулинов. . . .	Ломающие изменения в C#.NStar Alpha Etyuhibosecyu 20.11.2025 Уже можно не только тестировать, но и пользоваться C#. NStar - писать оконные приложения, содержащие надписи, кнопки, текстовые поля и даже изображения, например, моя игра "Три в ряд" написана на этом. . .	Мысли в слух kumehtar 18.11.2025 Кстати, совсем недавно имел разговор на тему медитаций с людьми. И обнаружил, что они вообще не понимают что такое медитация и зачем она нужна. Самые базовые вещи. Для них это - когда просто люди. . .	Создание Single Page Application на фреймах krapotkin 16.11.2025 Статья исключительно для начинающих. Подходы оригинальностью не блещут. В век Веб все очень привыкли к дизайну Single-Page-Application . Быстренько разберем подход "на фреймах". Мы делаем одну. . .

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

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

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

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

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

Решение