The show/hide toggle works when clicked more than 1 time, but when the page loads it closes when I first clicked the hyperlink. It was supposed to open when clicked at first.
$(".openNav").click(function() {
$('.box').show();
$('.box').toggleClass("slideUp")
});.clickbox {
width: 100px;
height: 100px;
background: #343434;
margin: 0 auto;
color: #fff;
}
.openNav {
color: #fff;
}
.box {
width: 200px;
height: 200px;
background: orange;
margin: 0 auto;
margin-top: 3%;
overflow: hidden;
transition: all 0.2s ease-in-out;
}
.box.slideUp {
height: 0;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="clickbox"><a href="javascript:;" class="openNav">dddd</a></div>
<div class="box" style="display: none;"><a href="javascript:;" class="openNav">dddd</a</div>Just add the "slideUp" class in your HTML markup:
<div class="box slideUp">
NB: the style="display: none;" attribute on that element is then no longer needed, nor do you have to execute $('.box').show().
Updated snippet:
$(".openNav").click(function() {
$('.box').toggleClass("slideUp")
});.clickbox {
width: 100px;
height: 100px;
background: #343434;
margin: 0 auto;
color: #fff;
}
.openNav {
color: #fff;
}
.box {
width: 200px;
height: 200px;
background: orange;
margin: 0 auto;
margin-top: 3%;
overflow: hidden;
transition: all 0.2s ease-in-out;
}
.box.slideUp {
height: 0;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="clickbox"><a href="javascript:;" class="openNav">dddd</a></div>
<div class="box slideUp"><a href="javascript:;" class="openNav">dddd</a</div>Try this code:
$(".openNav").click(function() {
$('.box').slideToggle("fast");
});.clickbox {
width: 100px;
height: 100px;
background: #343434;
margin: 0 auto;
color: #fff;
}
.openNav {
color: #fff;
}
.box {
width: 200px;
height: 200px;
background: orange;
margin: 0 auto;
margin-top: 3%;
overflow: hidden;
transition: all 0.2s ease-in-out;
}
.box.slideUp {
height: 0;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="clickbox"><a href="javascript:;" class="openNav">dddd</a></div>
<div class="box" style="display: none;"><a href="javascript:;" class="openNav">dddd</a</div><div class="clickbox"><a href="javascript:;" class="openNav">dddd</a></div>
<div class="box"><a href="javascript:;" class="openNav">dddd</a</div>
$(".openNav").click(function() {
$('.box').show();
$('.box').toggleClass("slideUp")
});.clickbox {
width: 100px;
height: 100px;
background: #343434;
margin: 0 auto;
color: #fff;
}
.openNav {
color: #fff;
}
.box {
width: 200px;
height: 0px;
background: orange;
margin: 0 auto;
margin-top: 3%;
overflow: hidden;
transition: all 0.2s ease-in-out;
}
.box.slideUp {
height: 200px;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="clickbox"><a href="javascript:;" class="openNav">dddd</a></div>
<div class="box" style="display: none;"><a href="javascript:;">dddd</a</div>