показ и сокрытие div по клику одного из 100

Question

Есть блок с данными - единый шаблон для всех однотипных. Таких блоков на сайте может быть до 100. При клике на крестик происходит добавление классов, сам крестик поворачивается и открывается ранее скрытый блок. Но изменения происходят сразу во всех однотипных блоках. Как можно ограничить выполнение команды только тем блоком, в котором выполнен клик?

введите сюда код

$(biochrist).click(function () {
    var activeBioClass = 'open';

    $(biochrist).toggleClass(activeBioClass);
    $(speaker__bio).toggleClass(activeBioClass);
});

.speaker__photo-btn {
  background-color: black;
  right: 0px;
  cursor: pointer;
  bottom: 0px;
  position: absolute;
  border-radius: 100%;
  width: 35px;
  height: 35px;
}
.speaker__photo-btn_link {
  position: relative;
  transition: .3s all;
  width: 35px;
  height: 35px;
  border-radius: 100%;
}
.speaker__bio {
  display: none;
}  
.speaker__photo-btn_link.open {
  transform: rotate(45deg);
  transition: 300ms;
}
.speaker__photo-btn_link:before {
  content: '';
  display: block;
  width: 20px;
  height: 3px;
  background-color: #fff;
  position: absolute;
  top: 16px;
  left: 8px;
}
.speaker__photo-btn_link:after {
  content: '';
  display: block;
  width: 20px;
  height: 3px;
  background-color: #fff;
  position: absolute;
  top: 16px;
  left: 8px;
  transform: rotate(90deg);
}
.speaker__bio.open {
  display: block;
}


<div class="speaker">
    <div class="speaker__photo">
        <?php echo  wp_get_attachment_image($speaker['photo'], 'medium_large') ?>
        <div class="speaker__photo-btn">
             <div class="speaker__photo-btn_link biochrist" id="biochrist"></div>
        </div>
    </div>
    <div class="speaker__text">
        <h4><?php echo $speaker['name'] ?></h4>
        <div class="speaker__capture">
            <?php echo $speaker['desciption'] ?>
        </div>  
    </div>
    <div class="speaker__bio" id="speaker__bio">
         <?php echo $speaker['bio'] ?>
    </div> 
</div>

Answer 1

$(biochrist).click(function () {
    var activeBioClass = 'open';

    $(this).toggleClass(activeBioClass);
    $(this).closest('.speaker').find(speaker__bio).toggleClass(activeBioClass);
});

$(biochrist).click(function () {
    let activeBioClass = 'open';
    let wasOpen = $(this).hasClass(activeBioClass);

    $('.biochrist.open').removeClass(activeBioClass);
    $('.speaker__bio.open').removeClass(activeBioClass);

    if (!wasOpen) {
      $(this).addClass(activeBioClass);
      $(this).closest('.speaker').find(speaker__bio).addClass(activeBioClass);
    }
});

БЛОГ НА HUSL

показ и сокрытие div по клику одного из 100

Ответы (1 шт):