slideToggle как отобразить только один блок из списка

312

01 августа 2017, 18:59

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

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

$(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 - часть выпадающего окна.

Answer 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>

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Открыть несколько табов по одному клику Chrome

Вопрос таков - хоть какими-нибудь хаками возможно это сделать? У меня пользователи выбирают список линков и по клику они должны разом открываться...

376

javascript

Валидация шаблонов url на JavaScript

Как лучше всего валидировать url по шаблонам, содержащим регулярки подобного вида:

301

javascript

onerror event xhr js

Доброе утроЧто должно произойти, чтобы сработал onerror xhr? Сервер иногда возвращает json данные с кодом 500, и согласно логике в этом случае должно...

293

javascript

Не выполняется gulpfile.babel.js

Но получаю такой ответ:

286