Hide text before a button is clicked

Question

I managed to make a small slide function on a button which can be seen here: JSfiddle

The only problem I have, is that the text is shown from the start now. The text should be hidden until you click the button. Can anybody give me a hint on how to solve that?

html

 <h3>
  This text should be hidden before you click the button
</h3>
<button>Toggle Me</button>

JS

$( "button" ).click(function() {
  $( "h3" ).slideToggle( "slow" );
});

Answer 1

You need to hide your H3 at the beginning, with a style-attribute.

<h3 style="display: none">his text should be hidden before you click the button</h3>

https://jsfiddle.net/uj47sgLj/3/

Answer 2

You can easily apply an inline style attribute (using display: none ) on your <h3> element to hide it:

<h3 style='display: none'>
  This text should be hidden before you click the button
</h3>

If you were planning on using this for multiple elements, a better approach would be to define a CSS class that would handle hiding it and then applying that class to the element:

<style>
    .hidden { display: none; }
</style>
<h3 class='hidden'>
  This text should be hidden before you click the button
</h3>

Example

 $("button").click(function() { $("h3").slideToggle("slow"); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <h3 style='display: none'> This text should be hidden before you click the button </h3> <button>Toggle Me</button>