jQuery SlideToggle, toggles several times with Wordpress Custom Posts

I've made a template in wordpress that contains my portfolio generated with custom post type. I am trying to make a slidetoggle effect when I hover over a portfolio image.

The problem is that when I hover an image it only shows my togglediv on the first item and it toggles several times. How do I fix this?

You can see the problem yourself at http://www.camillawestin.se

(Sorry if the code is a bit messy).

jQuery:

   $(".portfolio-item").hover(function () {
    $("#port-link").slideToggle("fast");
    });

Wordpress template:

 <?php
    $args = array(
    'post_type' => 'portfolio'
    );
    $portfolio = new WP_Query( $args );
    if( $portfolio->have_posts() ) {
        while( $portfolio->have_posts() ) {
            $portfolio->the_post();
            ?>

            <div class="portfolio-item">
            <a href="<?php meta('special-link'); ?>"><div class="port-image"><?php the_post_thumbnail();?></div></a>



                <div id="port-link">
                <div class="port-tags"><?php the_tags($sep); ?></div>
                <div class="port-click">Klicka för att se hemsidan</div>
                </div>


                <a href="<?php the_permalink(); ?>"><h3 class="port-title"><?php the_title() ?></h3></a>
                <!--<a target="_blank" href="<?php meta('special-link'); ?>">Link</a>-->
                <div class='content'>
                    <?php the_content() ?>
                </div>
                </div><!--portfolio-item-->
            <?php
        }
    }
    else {
        echo 'Oh uhm there is no portfolio here yet!';
    }
?>

CSS:

    .portfolio-item {float: left; padding: 9px;}

    #port-link { 
    display:none; 
    left: 0;
    bottom: 0;
    width: 282px;
    opacity: 0.9;
    background: #000;
    color: #fff;
    margin-top: -60px;
    padding: 10px;
    height: 38px;}

Answers


First, id's must be unique, use a class instead. Next, you'll want to target only the port-link that is inside the area that was hovered.

$(".portfolio-item").hover(function () { 
    $(this).find(".port-link").slideToggle("fast");
}); 

Note however that .hover() is going away, it would need to be replaced with:

$(".portfolio-item").on("mouseenter mouseleave", function () { 
    $(this).find(".port-link").slideToggle("fast");
}); 

Need Your Help

Updating extensions in a XULRunner application

xul mozilla xulrunner

Is it possible for extensions in XUL application to auto update to newer version when app starts? I'm trying to figure this out. If this is possible I would be very grateful if someone would point ...

if(objc_getAssociatedObject(self, &Key)) return true for nil object

ios iphone objective-c

How can I test that objc_getAssociatedObject is nil? The following says element is NOT nil but the associated object has never been set before nor been accessed.

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.