Как показать/скрыть divs с тем же именем класса отдельно?

Question

Я попытался реализовать ответы, которые я нашел в stackoverflow, заданные другими людьми, но я не получаю результаты, которые я хочу.

У меня есть раздел о сайте, который я строю. В этом разделе у меня есть четыре разных предмета. В нижней части находится кнопка, и когда эта кнопка нажата, я хочу, чтобы четыре ящика были скрыты, и чтобы на экране появился предмет (показать), и отобразите информацию о том, кто нажал кнопку. С кодом, который у меня есть сейчас, когда я нажимаю одну из кнопок, все большие элементы элементов отображаются вместо одного. Можно ли просто отображать только один большой предмет (showfullabout) при нажатии, а не все четыре? Я хочу индивидуально показывать элементы при нажатии.

<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 showfullabout"> 
    <div class="about-item-full"> 
     <h1>Title</h1> 
     <h2>Description</h2> 
     <p>Content</p> 
     <button class="small-about"><i class="fa fa-plus"></i> 
     </button> 
    </div> 
</div> 
<div class="col-xs-12 col-sm-6- col-md-3 col-lg-3"> 
    <div class="about-item"> 
     <div class="about-item-top"> 
      <img src="img/img07.jpg" alt="img"> 
      <div class="about-item-circle"> 
       <span class="oi oi-justify-left"></span> 
      </div> 
     </div> 
     <div class="about-item-bottom"> 
      <h1>Title</h1> 
      <h2>Description</h2> 
      <p> 
       Content 
      </p> 
      <button class="full-about"><i class="fa fa-plus"></i> 
      </button> 
     </div> 
    </div> 
    <!--END ITEM--> 
</div> 
<!--END COLUMN--> 
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 showfullabout"> 
    <div class="about-item-full"> 
     <h1>Title</h1> 
     <h2>Description</h2> 
     <p>Content</p> 
     <button class="small-about"><i class="fa fa-plus"></i> 
     </button> 
    </div> 
</div> 
<div class="col-xs-12 col-sm-6- col-md-3 col-lg-3"> 
    <div class="about-item"> 
     <div class="about-item-top"> 
      <img src="img/img07.jpg" alt="img"> 
      <div class="about-item-circle"> 
       <span class="oi oi-image"></span> 
      </div> 
     </div> 
     <div class="about-item-bottom"> 
      <h1>Title</h1> 
      <h2>Description</h2> 
      <p> 
       Content 
      </p> 
      <button class="full-about"><i class="fa fa-plus"></i> 
      </button> 
     </div> 
    </div> 
    <!--END ITEM--> 
</div> 
<!--END COLUMN--> 
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 showfullabout"> 
    <div class="about-item-full"> 
     <h1>Title</h1> 
     <h2>Description</h2> 
     <p>Content</p> 
     <button class="small-about"><i class="fa fa-plus"></i> 
     </button> 
    </div> 
</div> 
<div class="col-xs-12 col-sm-6- col-md-3 col-lg-3"> 
    <div class="about-item"> 
     <div class="about-item-top"> 
      <img src="img/img07.jpg" alt="img"> 
      <div class="about-item-circle"> 
       <span class="oi oi-monitor"></span> 
      </div> 
     </div> 
     <div class="about-item-bottom"> 
      <h1>Title</h1> 
      <h2>Description</h2> 
      <p> 
       Content 
      </p> 
      <button class="full-about"><i class="fa fa-plus"></i> 
      </button> 
     </div> 
    </div> 
    <!--END ITEM--> 
</div> 
<!--END COLUMN--> 
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 showfullabout"> 
    <div class="about-item-full"> 
     <h1>Title</h1> 
     <h2>Description</h2> 
     <p>Content</p> 
     <button class="small-about"><i class="fa fa-plus"></i> 
     </button> 
    </div> 
</div> 
<div class="col-xs-12 col-sm-6- col-md-3 col-lg-3"> 
    <div class="about-item"> 
     <div class="about-item-top"> 
      <img src="img/img07.jpg" alt="img"> 
      <div class="about-item-circle"> 
       <span class="oi oi-location"></span> 
      </div> 
     </div> 
     <div class="about-item-bottom"> 
      <h1>Title</h1> 
      <h2>Description</h2> 
      <p> 
       Content 
      </p> 
      <button class="full-about"><i class="fa fa-plus"></i> 
      </button> 
     </div> 
    </div> 
    <!--END ITEM--> 
</div> 
<!--END COLUMN--> 

<!--CSS--> 
.showfullabout{ 
display:none; 
} 

<!--Script--> 
$("button.full-about").click(function(){ 
    $(".about-item").hide(); 
    $(".showfullabout").fadeToggle(500); 
}); 
$("button.small-about").click(function(){ 
    $(".about-item").fadeToggle(500); 
    $(".showfullabout").hide(); 
}); 

Answer 1

Вы должны использовать относительные селекторы, чтобы найти целевые элементы

$("button.full-about").click(function() { 
    $(".about-item").hide(); 
    $(this).closest(".about-item").parent().prev('.showfullabout').fadeIn(500); 
}); 
$("button.small-about").click(function() { 
    $(this).closest(".showfullabout").hide(); 
    $(".about-item").fadeToggle(500); 
}); 

Демо: Fiddle

В случае кнопки full-about вам нужно, чтобы скрыть все about-item элементы и показать предыдущий родственный родителя-предшественника about-item, напротив для small-about кнопка