Box closes when click triggered

user_869941 0
Viewed 45

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>

css html jquery javascript
4 Answers

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>

user_54598390

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>

user_67778560 
<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>

user_185677110 

$(".openNav").click(function() {
  $('.box').slideToggle();
});
.clickbox {
  width: 200px;
  height: 200px;
  background: yellow;
  margin: 0 auto;
  color: #fff;
}

.openNav {
  color: #fff;
  border:1px solid blue;
}

.box {
  width: 400px;
  height: 400px;
  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">Hello All How Are You!</a></div>
<div class="box" style="display: none;"><a href="javascript:;" class="openNav">Hello All How Are You!</a</di

user_185119690
Related