1

$(document).ready(function() {
  $('.spoiler_links').click(function() {
    $(this).parent().children('div.spoiler_body').toggle('normal');
    return false;
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="s2-item-wrap spoiler-wrap disabled">
  <a href="#q" class="s2-item spoiler_links">
    <span class="img-wrap"><img src="img/icons/section_2/22.png" alt="Alt">
		</span>
    <span class="s2-item-text">Электротехника</span>
  </a>
  <div class="spoiler-body spoiler_body"><b>Ваш интерес здесь</b>
    <a href="#q" class="button">
      <span class="pulse-button">Вопрос эксперту</span></a>
  </div>
</div>

Сделал спойлер, использую данный js код. Помогите пожалуйста, сделать так, чтобы при открытии одного, другой автоматически закрывался.

2 ответа 2

2

Вот так, если ориентироваться на ваш HTML. И если вы хотите одинаковую анимацию скрытия всех блоков

$(document).ready(function() {

  $('.spoiler_links').each(function() {

   $(this).click(function(e) {
      var nextElem =  $(this).next('.spoiler_body')
     
      e.preventDefault(); //отменяем стандартное действие ссылки
      $('.spoiler_body').not(nextElem).each(function() {
        $(this).hide();
      });

      if (nextElem.css('display') === 'block') {
        nextElem.hide();
        return;
      }
      
      nextElem.fadeIn(300);
    });
  });
});
.spoiler_body {
  display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="spoiler-wrap disabled">
    <a href="#q" class="s2-item spoiler_links">Электротехника</a>
      <div class="spoiler-body spoiler_body">Ваш интерес здесь
  </div>
</div>
<div class="spoiler-wrap disabled">
    <a href="#q" class="s2-item spoiler_links">Электротехника 2</a>
      <div class="spoiler-body spoiler_body">Ваш интерес здесь
  </div>
</div>
<div class="spoiler-wrap disabled">
    <a href="#q" class="s2-item spoiler_links">Электротехника 3</a>
      <div class="spoiler-body spoiler_body">Ваш интерес здесь
  </div>
</div>

Если анимация активного блока должна быть одинаковой для раскрытия и скрытия, то вот так

 $(document).ready(function() {

  $('.spoiler_links').each(function() {

   $(this).click(function(e) {
      e.preventDefault(); //отменяем стандартное действие ссылки
      $('.spoiler_body').not($(this).next()).each(function() {
        $(this).hide();
      });

      $(this).next('.spoiler_body').fadeToggle(300);
    });
  });
}); 
.spoiler_body {
  display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="spoiler-wrap disabled">
    <a href="#q" class="s2-item spoiler_links">Электротехника</a>
      <div class="spoiler-body spoiler_body">Ваш интерес здесь
  </div>
</div>
<div class="spoiler-wrap disabled">
    <a href="#q" class="s2-item spoiler_links">Электротехника 2</a>
      <div class="spoiler-body spoiler_body">Ваш интерес здесь
  </div>
</div>
<div class="spoiler-wrap disabled">
    <a href="#q" class="s2-item spoiler_links">Электротехника 3</a>
      <div class="spoiler-body spoiler_body">Ваш интерес здесь
  </div>
</div>

9
  • Все супер, спасибо большое, а можно еще маленький вопрос, анимация появления немного поменялась, раньше она выходила будто из центра а сейчас выдвигается сверху внизу, как можно заменить эффект появления ? 28 мар 2018 в 10:36
  • и если кликаешь по одному и тому же 2 раза, он открывается по новой, а можно сделать чтобы он закрывался при втором клике на один и тот же блок 28 мар 2018 в 10:38
  • Подскажите пожалуйста как сделать чтобы он не просто выдвигался, а выдвигался со стилями появления из opacity:0 в opacity:1 и эффект закрытия при 2 клике 28 мар 2018 в 10:55
  • @АлексейСоколов Я поправил код, согласно вашим пожеланиям 28 мар 2018 в 11:19
  • @АлексейСоколов все. Окончательно поправил все и проверил. Два варианта на выбор вам. Тот, который нужен Вас, как я понял, это первый вариант 28 мар 2018 в 11:55
1

Попробуйте сохранить предыдущая спойлера которые открыли.

пример (angular):

onSpoilerClick(newSpoiler) {
    if (this.prevSpoiler && this.prevSpoiler.isOpen && this.prevSpoiler !== newSpoiler) {
      newSpoiler.isOpen = false;
    }
    newSpoiler.isOpen = !newSpoiler.isOpen;
    this.prevSpoiler = newSpoiler;

  }

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

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