inaz inaz - 1 month ago 8
CSS Question

How to show div when click on a link

I have a link with class yes and I want to show a

div
with classname
(box)
when the link is clicked. I wrote the below code but it does not work and display nothing when clicked . here is my snippet :



$('.yes').on('click', function(e){ e.preventDefault(); $(this).siblings('.box').toggleClass('active');})

.box {
display: none;
line-height: 100px;
background: #ccc;
border: 1px solid #444;
text-align: center;
-webkit-transform: scale(0);
transform: scale(0);
opacity: 0;
-webkit-transition: opacity .3s ease-in-out, -webkit-transform .3s ease-in-out;
transition: opacity .3s ease-in-out, -webkit-transform .3s ease-in-out;
transition: transform .3s ease-in-out, opacity .3s ease-in-out;
transition: transform .3s ease-in-out, opacity .3s ease-in-out, -webkit-transform .3s ease-in-out;
}
.box.active {
display: block;
-webkit-transform: scale(1);
transform: scale(1);
opacity: 1;
}

.box.active.good {
-webkit-animation: anim .3s ease-in-out;
animation: anim .3s ease-in-out;
}

@-webkit-keyframes anim {
0% {
display: none;
opacity: 0;
}
1% {
display: block;
opacity: 0;
-webkit-transform: scale(0);
transform: scale(0);
}
100% {
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1);
}
}

@keyframes anim {
0% {
display: none;
opacity: 0;
}
1% {
display: block;
opacity: 0;
-webkit-transform: scale(0);
transform: scale(0);
}
100% {
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1);
}
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<html>
<head>
</head>
<body>
<ul>
<li><a href="#tab-1" class="yes">Show Box</a></li>
</ul>
<div class="box good" style="width:200px; height:200px;border:1px solid red;"></div>
</body>
</html>





Thanks

Answer

Why don't you use directly class selector $('.box'), if you've only one box.

$('.box').toggleClass('active');

If you've multiple .box after each ul, use .parents()

$(this).parents('ul').next().toggleClass('active');

$('.yes').on('click', function(e){  
  e.preventDefault(); 
  $('.box').toggleClass('active');
  //$(this).parents('ul').next().toggleClass('active');
})
.box {
  display: none;
  line-height: 100px;
  background: #ccc;
  border: 1px solid #444;
  text-align: center;
  -webkit-transform: scale(0);
          transform: scale(0);
  opacity: 0;
  -webkit-transition: opacity .3s ease-in-out, -webkit-transform .3s ease-in-out;
  transition: opacity .3s ease-in-out, -webkit-transform .3s ease-in-out;
  transition: transform .3s ease-in-out, opacity .3s ease-in-out;
  transition: transform .3s ease-in-out, opacity .3s ease-in-out, -webkit-transform .3s ease-in-out;
}
.box.active {
  display: block;
  -webkit-transform: scale(1);
          transform: scale(1);
  opacity: 1;
}

.box.active.good {
  -webkit-animation: anim .3s ease-in-out;
          animation: anim .3s ease-in-out;
}

@-webkit-keyframes anim {
  0% {
    display: none;
    opacity: 0;
  }
  1% {
    display: block;
    opacity: 0;
    -webkit-transform: scale(0);
            transform: scale(0);
  }
  100% {
    opacity: 1;
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}

@keyframes anim {
  0% {
    display: none;
    opacity: 0;
  }
  1% {
    display: block;
    opacity: 0;
    -webkit-transform: scale(0);
            transform: scale(0);
  }
  100% {
    opacity: 1;
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<html>
<head>
</head>
<body>          
<ul>
<li><a href="#tab-1" class="yes">Show Box</a></li>
</ul>
<div class="box good" style="width:200px; height:200px;border:1px solid red;"></div>
</body>
</html>