The problem is that with the "text 1" field open, I click on "button 2" and this text is not hidden (I want to do it, after clicking it climbs what belongs to this button, I don’t understand how to do the cleaning)

script

$(document).ready(function(){ $('.spoiler-body').hide(); $('.spoiler-title').click(function(){ $(this).next().toggle(); }); });

css

 .spoiler-title { cursor: pointer; } .spoiler-body { display: none; }

html

 <div class="spoiler-title">Кнопка 1</div> <div class="spoiler-body">Текст 1</div> <div class="spoiler-title">Кнопка 2</div> <div class="spoiler-body">Текст 2</div>

    1 answer 1

    "Text1" when you click on "Button2" is not hidden because you do not hide texts that are not immediately following the button.

     $(document).ready(function(){ var $all_bodys = $('.spoiler-body') $all_bodys.hide(); $('.spoiler-title').click(function(){ $next = $( this ).next(); $all_bodys.not( $next ).hide() //скрыть все кроме следующей $next().toggle(); //показать/скрыть следующую за кнопкой. }); });

    UPDATE: Fixed hiding. Will hide everything except the next button. In the previous version it hid everything, so the toggle always worked only on opening.