CODEWITHSUNDEEP
jqueryslidetoggle
Francesca
Francesca

Reputation: 28138

slideToggle jQuery closed on load

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>

Upvotes: 1

Views: 2080

Answers (1)

Kevin B
Kevin B

Reputation: 95023

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

Upvotes: 8

Related Questions