slideToggle jQuery closed on load

Question

I'm using jQuery .slideToggle to create an expanding area when a link is clicked. At present the following code creates a page where the content is showing onload.

How do I specify that the info text should be hidden on page load and only appear when the link is clicked?

<script>
    $(".moreInfo").click(function () {
        $(".moreInfoText").slideToggle("slow");
    });
</script>


<span class="moreInfo">Read more</span></p>
<p class="moreInfoText">More info text goes here</p>

Answer 1

Hide the p element directly by adding the style="display: none;" attribute:

<span class="moreInfo">Read more</span></p>
<p class="moreInfoText" style="display: none;">More info text goes here</p>

If you try to do it with javascript, you will get a FOUC