The bottom line is this: When you click on Button, content leaves, when you click on another Button, the first content disappears, and the second leaves - the way it works ... But you need more ... When you click on the same Button (2nd time) - the block should be hiding ... how to implement? :)
PS
I tried with the second button, which had display: none; - when pressed, they changed, but a very large block came out and jQuery

.

3-4 such blocks

$(document).ready(function() { $(button).one('click', function() { $('.news').slideUp('slow'); $(this).siblings(".news").slideToggle('slow'); }); }); 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="bar"> <div class="text"> <p> <h1>Lorem ipsum</h1> </p> </div> <div class="news"> " Lorem ipsum dolor " </div> <div class="button "> <button type="button">Button</button> </div> </div> <div id="bar"> <div class="text"> <p> <h1>Lorem ipsum</h1> </p> </div> <div class="news"> " Lorem ipsum dolor " </div> <div class="button"> <button type="button">Button</button> </div> </div> 

 $(document).ready( function(){ $('.button').click(function(){ var block=$('.news').css('display'); if(block=='none') { $('.news').slideUp('slow'); $(this).siblings('.news').slideToggle('slow'); } else{ $('.news').slideUp('slow'); } }); });

Anyway, it will bug ... if several such news - it sees only the upper keys button u news

  • Oh, another accordion. @Grundy? - Qwertiy ♦
  • that's the way it is :) - Brave_Lime
  • But I didn’t come across this: (so I ask for help - Brave_Lime
  • can you add some realistic markup and a working snippet? - Grundy

3 answers 3

The idea of ​​an accordion is simple: a bunch of panels that can be opened, and buttons that can close or open panels.

In this case, to implement, you need to select the element for which you clicked, and the open element (they may coincide) and change their status.

 $(document).ready(function() { $('button').on('click', function() { $('.news:visible') // выбираем раскрытую новость .add( $(this).parent().prev() //берем новость кнопку которой кликнули и добавляем к раскрытым новостям ).slideToggle('slow'); //меняем их статус }); }); 
 .news { display: none; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="bar"> <div class="text"> <h1>Lorem ipsum</h1> </div> <div class="news"> " Lorem ipsum dolor " </div> <div class="button "> <button type="button">Button</button> </div> </div> <div class="bar"> <div class="text"> <h1>Lorem ipsum</h1> </div> <div class="news"> " Lorem ipsum dolor " </div> <div class="button"> <button type="button">Button</button> </div> </div>

  • Thank you! ..... - Brave_Lime
 var block=$(button).css("block"); if(block=="none") { /*открыть*/ } else { /*скрыть*/ }

    Here is the code that I use almost everywhere where something needs to be shown / hidden:

     var doc = $(document), parent, content; function beforeShow() { $('.sh-parent').removeClass('opened'); } doc.ready(function(){ doc.on('click', '.sh-parent .sh-btn', function(e){ e.preventDefault(); parent = $('.sh-parent', doc).has($(this)).last(); content = $('.sh-content', parent); /* необязательный фрагмент // заморочка со множественной вложеностью - надо открывать только одну content = content.filter(function(){ return !$('.sh-parent', parent).has($(this)).length; }); */ if (content.css('display') == 'none') { beforeShow(); parent.addClass('opened'); } else { parent.removeClass('opened'); } }); });

    https://jsfiddle.net/skywave/vu4cj4bq/1/

    There is a button / buttons .sh-btn, which opens / closes.

    There is a block / blocks .sh-content that should open / close.

    The action is limited to the .sh-parent container so that the necessary blocks are opened / closed.

    It also works if there is nesting of one container in another.

    Instead of show () and hide (), css is used.