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.
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:
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: