2

Не знаю как отобразить только один блок из списка. Писать для каждого свою функцию уж совсем глупо будет. Прошу помощи у знающих людей. Заранее спасибо.

Вот пример кода

$(function() {
  $('.operation').on('click', function() {
    $('.plus-minus-toggle').toggleClass('collapsed');
    $('.operation-info').slideToggle(400)
  });
  //next dropdown1
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="operation">
  <div class="wrapper-icon">
    <div class="plus-minus-toggle collapsed"></div>
  </div>
  <span>text123</span>
</div>

<div class="personal-info-middle operation-info">
  <h3>Ласкаво просимо!</h3>
  <p>....</p>

</div>

Дополнение: .plus-minus-toggle - класс анимированого крестика. .op.operation-info - часть выпадающего окна.

3
  • У вас в разметке кол-во открывающих и закрывающих тегов не сходится
    – Cheg
    31 июл 2017 в 20:19
  • мне честно говоря совсем не понятно чего именно вы хотите добиться 31 июл 2017 в 20:25
  • @RostyslavKuzmovych это обычный аккордеон, он работает. Но если я создам несколько таких блоков в разметке, тогда будут отрываться все сразу. мне нужно что бы открывался только тот, на который я кликаю:) буду благодарен за любой совет). 31 июл 2017 в 20:30

1 ответ 1

1

Если правильно понял вопрос, то вам нужно, чтобы текст раскрывался именно в том блоке, где вы кликаете на .operation. Для этого этот текст нужно искать внутри того родителя, где и находится .operation. Используйте для этого метод .closest():

$(function() {
  $('.operation').on('click', function() {
    var block = $(this).closest('.block');
    block.find('.plus-minus-toggle').toggleClass('collapsed');
    block.find('.operation-info').slideToggle(400)
  });
  //next dropdown1
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="block">
  <div class="operation">
    <div class="wrapper-icon">
      <div class="plus-minus-toggle collapsed"></div>
    </div>
    <span>text123</span>
  </div>

  <div class="personal-info-middle operation-info">
    <h3>Ласкаво просимо!</h3>
    <p>....</p>

  </div>
</div>
<div class="block">
  <div class="operation">
    <div class="wrapper-icon">
      <div class="plus-minus-toggle collapsed"></div>
    </div>
    <span>text123</span>
  </div>

  <div class="personal-info-middle operation-info">
    <h3>Ласкаво просимо!</h3>
    <p>....</p>

  </div>
</div>
<div class="block">
  <div class="operation">
    <div class="wrapper-icon">
      <div class="plus-minus-toggle collapsed"></div>
    </div>
    <span>text123</span>
  </div>

  <div class="personal-info-middle operation-info">
    <h3>Ласкаво просимо!</h3>
    <p>....</p>

  </div>
</div>
<div class="block">
  <div class="operation">
    <div class="wrapper-icon">
      <div class="plus-minus-toggle collapsed"></div>
    </div>
    <span>text123</span>
  </div>

  <div class="personal-info-middle operation-info">
    <h3>Ласкаво просимо!</h3>
    <p>....</p>

  </div>
</div>

4
  • очень вам благодарен! Спасибо! 31 июл 2017 в 20:43
  • @Andriikhmelovskyi Пожалуйста
    – Cheg
    31 июл 2017 в 20:44
  • Недавно начал учить js, основы знаю. но на толковые материалы с задачками никак немогу выйти. может посоветуете книжечку или ресурс какой то полезный? 31 июл 2017 в 20:48
  • @Andriikhmelovskyi вот тут можно найти примеры на js, а тут - на jquery
    – Cheg
    31 июл 2017 в 20:53

Ваш ответ

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

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