Show/hide content of posts with jquery

Using the wordpress loop and jquery, I'm trying to show/hide the content of the posts displayed. Example: user hovers title and tags then clicks and the content expands.

After some searches I've come to this result.

$f(function(){
    $f(".portfolio-destaques").hover(function(){
        $f( ".change" ).toggle(
            function() {
                $f('.highlight').slideUp('fast');
            },
            function() {
                $f('.highlight').slideDown('fast');
            });
    });
});

It almost works. The first post works fine, but the second posts expands the content of the first and second post. And it doesn't stop from showing/hiding. Content seems to be jumping!.. weird stuff.. Oh! Just noticed that these "jumps" are incremental, starts with 1, then 2, then 3, ...

Thanks in advance! (And sorry for any mistake in my english.)

Dani

Edit: Here's the HTML

<div id="portfolioContent">
    <div class="portfolio-destaques">
        <p class="destaques-data">2010-03-10</p>
        <h3><a href="#" class="change">Mauris aliquet mattis metus</a></h3>
        <p>Requerente: <a href="http://localhost:8888/aspp/requerente/ornare/" rel="tag">Ornare</a> <a href="http://localhost:8888/aspp/requerente/pede/" rel="tag">Pede</a> Localização: <a href="http://localhost:8888/a开发者_JS百科spp/localizacao/matosinhos/" rel="tag">Matosinhos</a> Tipologia: <a href="http://localhost:8888/aspp/tipologia/amet/" rel="tag">Amet</a> <a href="http://localhost:8888/aspp/tipologia/elit/" rel="tag">Elit</a></p>
        <div class="highlight">
            <p>Aliquam aliquet, est a ullamcorper condimentum, tellus nulla fringilla elit, a iaculis nulla turpis sed wisi. Fusce volutpat. Etiam sodales ante id nunc. Proin ornare dignissim lacus. Nunc porttitor nunc a sem. Sed sollicitudin velit eu magna. Aliquam erat volutpat. Vivamus ornare est non wisi. Proin vel quam. Vivamus egestas. Nunc tempor diam vehicula mauris. Nullam sapien eros, facilisis vel, eleifend non, auctor dapibus, pede.</p>
        </div>
    </div>
    <div class="portfolio-destaques">
        <p class="destaques-data">2006-11-08</p>
        <h3><a href="#" class="change">Cras aliquam massa ullamcorper sapien</a></h3>
        <p>Requerente: <a href="http://localhost:8888/aspp/requerente/enim/" rel="tag">Enim</a> Localização: <a href="http://localhost:8888/aspp/localizacao/matosinhos/" rel="tag">Matosinhos</a> Tipologia: <a href="http://localhost:8888/aspp/tipologia/ipsum/" rel="tag">Ipsum</a></p>
        <div class="highlight">
            <p>Pellentesque vel dui sed orci faucibus iaculis. Suspendisse dictum magna id purus tincidunt rutrum. Nulla congue. Vivamus sit amet lorem posuere dui vulputate ornare. Phasellus mattis sollicitudin ligula. Duis dignissim felis et urna. Integer adipiscing congue metus. Nam pede. Etiam non wisi. Sed accumsan dolor ac augue. Pellentesque eget lectus. Aliquam nec dolor nec tellus ornare venenatis. Nullam blandit placerat sem. Curabitur quis ipsum. Mauris nisl tellus, aliquet eu, suscipit eu, ullamcorper quis, magna. Mauris elementum, pede at sodales vestibulum, nulla tortor congue massa, quis pellentesque odio dui id est. Cras faucibus augue.</p>
        </div>
    </div>

And the CSS:

#portfolioContent {
    position: absolute;
    top: 20px;
    right: 60px;
    width: 670px;
}
.portfolio-destaques {
    position: relative;
    background: transparent url('images/menu_bg_dark.png');
}
.portfolio-destaques:hover {
    background: transparent url('images/menu_bg.png');
}

Now you are sliding up/down all elements with the .highlight and .change classes. You probably just want to select the corresponding element. You can use traversing methods like closest() or advanced selectors to get the right element or you can append the post id or an incrementing variable to make the class unique or use an unique id instead.

Update: For the HTML you posted, this should work:

$f(function(){
    $f(".change" ).toggle(
        function() {
            $f(this).parents(".portfolio-destaques").children('.highlight').slideUp('fast');
        },
        function() {
            $f(this).parents(".portfolio-destaques").children('.highlight').slideDown('fast');
        }
    );
});

This works for me:

jQuery(document).ready(function($){

   $(".entry-content").hide();

   $(".entry-title").click(function(){

$(this).parent().children(".entry-content").toggle("slide", {direction: "up"}, 500);})
});

And (in the WP loop; change html and CSS as needed):

<div class="entry-post">

<h1 class="entry-title"><?php the_title(); ?></h1>

<div class="thedate"><?php the_time('F jS, Y') ?></div>

<div class="entry-content"><?php the_content(); ?></div></div>

Mostly from http://pancaketheorem.com/hideshow-wordpress-post-content-when-clicking-post-title-with-jquery/

Try this :

$f('.portfolio-destaques').hover(function(){
    $f(this).find('.highlight').slideUp('fast');
},function(){
    $f(this).find('.highlight').slideDown('fast');
})

It might work your situation, I hope so.. good luck

When you use $f( ".change" ).toggle, and $f('.highlight').slideUp('fast'), you make jQuery execute these methods on all elements that have '.change' and '.highlight' class applied to. Instead you should use something like this:

$(this).find(".change").toggle

Anyway you should play with $(this) to achieve the result you need.