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

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

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

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

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, Огромное спасибо!

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

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

Новые блоги и статьи Все статьи Все блоги /
Агрегаты и сущности в DDD микросервисах Javaican 10.04.2025 Разработка современных программных систем часто приводит на распутье: монолит или микросервисы? Даже при выборе микросервисной архитектуры многие команды сталкиваются с проблемой правильного. . .	Многопоточность в C#: Task и параллельное программирование UnmanagedCoder 10.04.2025 Современные процессоры уже давно перестали наращивать тактовую частоту в пользу увеличения количества ядер. Это создало интересную ситуацию: разработчики, привыкшие к последовательному. . .	Линейное решение нелинейной задачи. Формулы от LM по моему решению пока не проверял. В итоговой её формуле видно её заблуждение. Hrethgir 10.04.2025 В продолжение Эта LM дала ответ похожий на нормальный. В комментриях мой комментарий - похоже она ошиблась с выведением итоговой формулы, но остальные проверю. Assistant qwen2. 5-14b-instruct . . . .	Переменные в Python py-thonny 10.04.2025 Переменная в программировании — это символическое имя, связанное с областью памяти, в которой хранится значение. Она позволяет получать доступ к данным через понятные человеку идентификаторы, а не. . .	Многопоточность в C#: Task и асинхронные операции UnmanagedCoder 10.04.2025 Многопоточность позволяет выполнять несколько операций одновременно, что важно для решения двух основных задач: повышения скорости выполнения вычислительно-сложных операций и сохранения отзывчивости. . .
Линейное решение не линейной задачи (емкость вычислений в сравнении с традиционными решениями пока не определена). Hrethgir 10.04.2025 В рамках предстоящих вычислений пришлось (да, я тоже знаю про корень числа, и про степеня, и прочие теоремы, но. . . ) найти способ нахождения отношения двух углов. . . .	Запуск контейнеров Docker на ARM64 Mr. Docker 09.04.2025 Появление таких решений, как Apple M1/ M2, AWS Graviton, Ampere Altra и Raspberry Pi, сделало использование ARM-систем обыденностью для многих разработчиков и DevOps-инженеров. При этом Docker,. . .	Vue SFC компонент на PHP с Fusion Jason-Webb 09.04.2025 PHP на сервере и JavaScript на клиенте — классическое сочетание, которое, несмотря на свою эффективность, создает определенный когнитивный диссонанс при разработке. В этом контексте появляются. . .	TypeScript vs JavaScript: Отличия и когда что использовать Reangularity 09.04.2025 JavaScript появился в 1995 году как творение Брендана Эйха и быстро стал основой интерактивности в вебе. За свою историю он прошел путь от простого языка для манипуляций с DOM до полноценной. . .	Подключение Kafka к Elasticsearch Codd 09.04.2025 Apache Kafka и Elasticsearch — две мощные технологии, которые при совместном использовании создают эффективную платформу для обработки и анализа данных в реальном времени. Kafka, выступая в роли. . .

@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

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

Решение