1

Суть такова: При нажатии на Button выезжает контент, при нажатии на другой Button - первый контент скрывается, а второй выезжает - так оно и работает... Но нужно еще... При нажатии на тот же Button (2-й раз) - блок должен скрываться...как осуществить? :)
P.S.
Пробовал с второй кнопкой, у которой был display: none; - при нажатии они менялись, но так выходил очень большой блок и подлагивал JQuery

.

И таких блоков 3-4

$(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');
    }
});
});

Все равно багует... если несколько таких новостей - оно видит только верхние ключи button u news

4
  • О, очередной аккордеон. @Grundy?
    – Qwertiy
    18 апр 2016 в 17:57
  • так-то оно так :)
    – Brave_Lime
    18 апр 2016 в 18:00
  • Но с таким я не сталкивался :( вот и прошу помощи
    – Brave_Lime
    18 апр 2016 в 18:00
  • можешь разметку какую-нибудь риалистичную добавить и рабочий сниппет?
    – Grundy
    19 апр 2016 в 7:24

3 ответа 3

0

Идея аккордеона проста: куча панелей которые могут быть открыты, и кнопки которые могут закрывать или открывать панели.

В данном случае для реализации нужно выбрать элемент для которого щелкнули, и открытый элемент (они могут совпадать) и поменять их статус.

$(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>

1
  • Благодарю!.....
    – Brave_Lime
    19 апр 2016 в 16:49
0
var block=$(button).css("block");
if(block=="none")
{
/*открыть*/
}
else
{
/*скрыть*/
}
0
0

Вот код, который использую почти везде где надо что то показать/скрыть:

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/

Имеется кнопка/кнопки .sh-btn, которая открывает/закрывает.

Имеется блок/блоки .sh-content, которые должны открыться/закрыться.

Действие ограничивается контейнером .sh-parent, чтобы открывались/закрывались нужные блоки.

Работает также если имеется вложенность одного контейнера в другой.

Вместо show() и hide() используется css.

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.