Text verstecken, bevor eine Schaltfläche geklickt wird

Question

ich eine kleine Dia-Funktion auf Knopfdruck machen verwaltet, die hier zu sehen ist: jetzt JSfiddle

Das einzige Problem, das ich habe, ist, dass der Text von Anfang an gezeigt wird. Der Text sollte ausgeblendet werden, bis Sie auf die Schaltfläche klicken. Kann mir jemand einen Hinweis geben, wie ich das lösen kann?

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

Sie benötigen H3 am Anfang, mit einem Stil-Attribute zu verstecken.

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

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

Answer 2

Sie einfach ein Inline-Stil-Attribut (mit display: none) auf Ihrem <h3> Element anwenden kann, es verbergen:

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

Wenn Sie sich mit dieser für mehrere Elemente der Planung wurden, ein besserer Ansatz wäre, eine CSS-Klasse zu definieren, die damit umgehen würde und dann versteckt diese Klasse auf das Element anwenden:

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

Beispiel

$("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>