Menu
18/08 2009

Adding a slidedown box with jQuery

I'm always coming up against situations where, in the planning process, you give a small consideration for a feature of the site you build, only to actually discover that to achieve this feature will take more work than you anticipated.

It is always a good idea, if you succeed in resolving these situations, to document the process you went through to bring it to a satisfactory conclusion. This blog post is the result of one such process.

The Scenario

I recently did some work on a site that required the integration of services like Twitter and YouTube. The requirement was to include two modules in the right hand column of a site for Twitter Updates and for a video on You Tube.

This was a straightforward decision. The right hand column lent itself to extra content. The problem I had was deciding what to do with some recent Blog Posts that were already there. The result was a Boxout with the title of the post in the top followed by a link which when clicked, needed to open out the boxout to show a short summary. I decided to do this because with the summary and links to tags etc all opened out on the page it looked very busy once I'd added all the extra content from the Twitter and You Tube modules.

Achieving this wasn't as straight forward as you would think with JQuery, mainly because of where I wanted to put the link. My Boxout markup looked like this:

<div class="roundcenter">
 <div class="roundtopleft">
  <div class="roundtopright">
   <div class="topcenter">
    <a rel="bookmark" class="entry-title" href="/user/webegg/view/real-web-development"> Real Web Development </a>
    <a href="javascript:void(0);" class="slidetease">»</a></div>
   </div>
  </div>
 <div class="roundbottomleft">
 <div class="roundbottomright">
  <div style="padding-top: 0pt;" class="bottomcenter">
   <div style="margin: 0pt; padding: 0pt;" class="teaser">
    <div style="margin: 0pt; padding: 0pt;" class="teaser-wrap">
     <div class="teaser-content summary">Summary text...</div>
     <div class="teaser-date">Feb 26, 2009  9:27 PM</div>
   </div>
   <div class="teaser-links">
    <a href="/user/webegg/view/real-web-development">Read More</a> · Published by: <a href="/user/webegg"> webegg </a> · Tags: <a rel="tag" href="/user/webegg/tag/web+development">web development</a></div>
   </div>
  </div>
 </div>
</div>
</div>

The obvious thing to do is to get each instance of the element with class slidetease and when clicked it opens up the current teaser-content div.

This posed one problem. The link itself is in the top half of the boxout (one of the children of the roundtopleft divs) and the teaser-content is in the lower div (roundbottomleft). This means that you somehow have to iterate back up through to the parent of both of these divs (roundcenter) and back down to the div you want to perform the toggle on (teaser-content).

This is the result of some work on this and using the parents command to find all parents of the current element and then the find command to go back down through the child elements to get to teaser-content:

$('.slidetease').click(function () {
 if ($(this).parents('.roundcenter').find('.teaser-wrap').is(':hidden')) {
 $(this).parents('.roundcenter').find('.teaser-wrap').slideDown('slow');
 } else {
 $(this).parents('.roundcenter').find('.teaser-wrap').slideUp('slow');
 }
 });
webegg

5 Responses to Adding a slidedown box with jQuery

  1. Queensland says:

    Useful script. was there a demo page??

  2. Webegg says:

    No there isn’t at the moment. Thanks for the comment and I’ll get onto adding a demo soon.

  3. Webegg says:

    A new demo area has been added to the site for all future blog posts and link has been added to this post. Hope that helps 🙂

  4. Elie andraos says:

    you could simply have done the following:

    $(‘.slidetease’).click(function () {
    $(this).slideToggle();
    });

  5. Webegg says:

    Thanks for your comment.
    Funnily enough, this is the first bit of script I tried. Problem is, keeping the head area in tact while hiding the area underneath. Using this simpler bit of code would be great, however, all it will do is hide the link when you click it, leaving the rest of the divs in place.

Leave a Reply

Your email address will not be published. Required fields are marked *

This article is in the jquery category. Here are some other related articles also in this category.