Question

I’m using jQuery to slidedown and reveal content on my page after a “read more” link is clicked. The animation works well but the content that is being revealed appears immediately after the link is clicked, before the animated slidedown. The funny part is that I’ve used this code on a few other sites and never had this issue.

Here’s the code:

<script type="text/javascript">

function ShowHide(){
$(".details").animate({"height": "toggle"}, { duration: 500 });
}

</script>

and the html

<div class="readmore"><a href="#" onclick="ShowHide(); return false;">More Info</a></div>            
    <div class="details">
        <div class="description">
         <div class="title">Description</div>
          <p>content here</p>

         <div class="title">Subscribe</div>
         <a href="#">lorem</a><br />
         <a href="#">lorem</a>
        </div>
    </div> 

Any help would be great! Also on a side note, I may want to have multiple instances of this slidedown on one page. Right now clicking the “read more” link would reveal all the “details” divs. How would I go about making this work just on a single div without having to write new code for each instance. An example where I would want that would be a wordpress site that reveals details from a post in a list of posts.

Answer 1

Make sure that the div containing the content (in your case the one with the class “details”) also has the overflow: hidden CSS style set.

To answer your second question, you could do it as follows:

$(document).ready(function() 
{ 
    //Bind the ShowHide function to onclick for each first link in the "readmore" div
    $('div.readmore > a').click(ShowHide);
});

function ShowHide(event)
{
    //Find the next "details" div sibling below the link container and animate it
    $(event.target).parent('div.readmore').next('div.details').animate(
        {"height": "toggle"}, { duration: 500 });
}

Also make sure to remove the inline “onclick” handler assigned to the link when using this.