I want to toggle a div when pressing a button. Currently I have this:

$("#reportOptions").toggle("fast");

But when I first click the button, it sets the div to:

display: none;

And when I click again:

display: block;

Which is fine, but I want the first click to be style block, so the reverse the toggle.
How can I do this? Jquery does not explain this and every post on SO is about reversing the animations but not about the boolean.

I already tried to set the initial HTML to display: none; but the animation cancels in a weird way (only for the first click) if I do it like that.

I want to toggle a div when pressing a button. Currently I have this:

$("#reportOptions").toggle("fast");

But when I first click the button, it sets the div to:

display: none;

And when I click again:

display: block;

Which is fine, but I want the first click to be style block, so the reverse the toggle.
How can I do this? Jquery. does not explain this and every post on SO is about reversing the animations but not about the boolean.

I already tried to set the initial HTML to display: none; but the animation cancels in a weird way (only for the first click) if I do it like that.

• javascript
• jquery
• html

• Why not $("#reportOptions").toggle("hide"); – Niklesh Raut Commented Feb 20, 2016 at 17:24
• toggle check current style and show in was hide – Grundy Commented Feb 20, 2016 at 17:24
• @LearningMode Because it needs to unhide the first click, and hide the second and so on and so forth. – Mats de Waard Commented Feb 20, 2016 at 17:26
• @Grundy I know, but I cancels the animation in a weird way if I set the default HTML to "style: none;" – Mats de Waard Commented Feb 20, 2016 at 17:27

3 Answers 3

All toggle() does is switch between display: none and display: block. If you want your first click to set the element to display: block, initialize the element's style with display: none. Here's a demo:

#reportOptionsHidden {
  display: none;
}

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<h2>Initially visible</h2>
<div id="reportOptionsVisible">Here are the initially visible report options</div>
<button onclick="$('#reportOptionsVisible').toggle('fast')">Toggle</button>

<h2>Initially hidden</h2>
<div id="reportOptionsHidden">Here are the initially hidden report options</div>
<button onclick="$('#reportOptionsHidden').toggle('fast')">Toggle</button>

Toggle to hide and show can be use like this.

<script src="http://code.jquery./jquery-latest.min.js" type="text/javascript"></script>
<div id="reportOptions" style="display:none;">
this is just test
</div>
<input type="button" onclick="fun_toggle()" value="Toggle">
<script type="text/javascript">
function fun_toggle(){
   $("#reportOptions").toggle("hide");
}
</script>

Just start the div in CSS off with the opposite display that the first toggle should take you to.