Открыть div по клику на другой div

208

20 апреля 2017, 16:58

Всем доброго времени суток. Есть такая разметка

<div class="pans-room"> 
  <div class="table"> 
    <div class="head">Название группы</div> 
    <div class="row capt"> 
      <div>Тип товара</div> 
      <div>Стоимость</div> 
    </div> 
    <div class="row"> 
      <div class="click">Товар</div> 
      <div>Цена</div> 
    </div> 
    <div class="row"> 
      <div class="click">Товар</div> 
      <div>Цена</div> 
    </div> 
    <div class="row"> 
      <div class="click">Товар</div> 
      <div>Цена</div> 
    </div> 
  </div> 
  <div class="complect"> 
    <h3>Описание</h3> 
    <div class="complects"> 
      <div class="open">Скрытый текст</div> 
      <div class="open">Скрытый текст</div> 
      <div class="open">Скрытый текст</div> 
 
    </div> 
  </div> 
</div>

как сделать так что бы при клике на div с классом "click" открывался div с классом "open"? Соответственно должна соблюдаться очередность, т.е. кликнули по первому div "click" открылся первый div "open" кликнули по второму - первый закрылся второй открылся и т.д. Количество div не ограничено их может быть 3, а может 100. И самих блоков с дивом "pans-room" тоже может быть несколько, все это формируется динамически с помощью php. Для меня вся сложность как раз оказалась в том что заранее не известно количество дивов, может кто знает как такое можно реализовать?

Answer 1

var $set = $('.table .click'); 
$('.table').on('click', '.click', function() { 
  var n = $set.index(this); 
  $('.complects .open').removeClass('active') 
  $('.complects .open:eq(' + n + ')').addClass('active'); 
});

.click { 
  border: 1px solid black; 
} 
 
.open { 
  display: none; 
  border: 2px solid red; 
} 
 
.open.active { 
  display: block; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div class="pans-room"> 
  <div class="table"> 
    <div class="head">Название группы</div> 
    <div class="row capt"> 
      <div>Тип товара</div> 
      <div>Стоимость</div> 
    </div> 
    <div class="row"> 
      <div class="click">Товар</div> 
      <div>Цена</div> 
    </div> 
    <div class="row"> 
      <div class="click">Товар</div> 
      <div>Цена</div> 
    </div> 
    <div class="row"> 
      <div class="click">Товар</div> 
      <div>Цена</div> 
    </div> 
  </div> 
  <div class="complect"> 
    <h3>Описание</h3> 
    <div class="complects"> 
      <div class="open">1</div> 
      <div class="open">2</div> 
      <div class="open">3</div> 
 
    </div> 
  </div> 
 
</div>