Box closes when click triggered-CodePudding

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 ><a href="javascript:;" >dddd</a></div>
<div  style="display: none;"><a href="javascript:;" >dddd</a</div>

CodePudding user response：

Just add the "slideUp" class in your HTML markup:

<div >

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 ><a href="javascript:;" >dddd</a></div>
<div ><a href="javascript:;" >dddd</a</div>

CodePudding user response：

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 ><a href="javascript:;" >dddd</a></div>
<div  style="display: none;"><a href="javascript:;" >dddd</a</div>

CodePudding user response：

<div ><a href="javascript:;" >dddd</a></div>
<div ><a href="javascript:;" >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 ><a href="javascript:;" >dddd</a></div>
<div  style="display: none;"><a href="javascript:;">dddd</a</div>