jessica jessica - 1 month ago 11
CSS Question

show specific div on click

I have this code what it does that it shows some circles on click, but when i click on one of them all of the circles appear, i don't want that, what i want is with each click only the circles under the word "click" to appear not all of them, how can i do that? here is my code:



$(function() {
$('.clickme').click(function() {
$('.circle').toggle()
});
});

.circle{
width: 50px;
height: 50px;
border-radius: 50px;
background-color: blue;
border-radius: 50%;
position: absolute;
top: 0;
left: 0;
display: none;
transform: scale(0);
}


.circle{
animation: popin .25s forwards;
}

.circle:nth-of-type(1){

top: 22px;
left: 80px;
}
.circle:nth-of-type(2){
top: 22px;
left: 48px;
}
.circle:nth-of-type(3){
top: 22px;
left: 16px;
}

@keyframes popin {
80% {
transform: scale(1.15);
}
100% {
opacity: 1;
transform: scale(1);
}
}

<script
src="https://code.jquery.com/jquery-1.9.1.min.js"
integrity="sha256-wS9gmOZBqsqWxgIVgA8Y9WcQOa7PgSIX+rPA0VL2rbQ="
crossorigin="anonymous"></script>

<ul>
<li class="circles">
<button class="circle"></button>
<button class="circle"></button>
<button class="circle"></button>
<div class="clickme">click</div>
</li>
</ul>

<ul>
<li class="circles">
<button class="circle"></button>
<button class="circle"></button>
<button class="circle"></button>
<div class="clickme">click</div>
</li>
</ul>

<ul>
<li class="circles">
<button class="circle"></button>
<button class="circle"></button>
<button class="circle"></button>
<div class="clickme">click</div>
</li>
</ul>




Answer Source

.circle will target all .circles. To target the .circles before the .clickme element you click on, you can use $.siblings() since they're adjacent to .clickme

$(function() {
    $('.clickme').click(function() {
        $(this).siblings('.circle').toggle()
    });
});
.circle{
width: 50px;
height: 50px;
border-radius: 50px;
background-color: blue;
  border-radius: 50%;
  position: absolute;
  top: 0;
  left: 0;
  display: none;
  transform: scale(0);
}


  .circle{
    animation: popin .25s forwards;
    }
    
    .circle:nth-of-type(1){
   
      top: 22px;
      left: 80px;
      }
    .circle:nth-of-type(2){
      top: 22px;
      left: 48px;
      }
    .circle:nth-of-type(3){
      top: 22px;
      left: 16px;
      }

@keyframes popin {
  80% {
    transform: scale(1.15);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
<script
  src="https://code.jquery.com/jquery-1.9.1.min.js"
  integrity="sha256-wS9gmOZBqsqWxgIVgA8Y9WcQOa7PgSIX+rPA0VL2rbQ="
  crossorigin="anonymous"></script>
  
<ul>
  <li class="circles">
  <button class="circle"></button>
  <button class="circle"></button>
  <button class="circle"></button>
  <div class="clickme">click</div>
   </li>
 </ul>
 
 <ul>
  <li class="circles">
  <button class="circle"></button>
  <button class="circle"></button>
  <button class="circle"></button>
  <div class="clickme">click</div>
   </li>
 </ul>
 
 <ul>
  <li class="circles">
  <button class="circle"></button>
  <button class="circle"></button>
  <button class="circle"></button>
  <div class="clickme">click</div>
   </li>
 </ul>