jQuery SlideToggle, toggles several times with Wordpress Custom Posts -

i've made template in wordpress contains portfolio generated custom post type. trying make slidetoggle effect when hover on portfolio image.

the problem when hover image shows togglediv on first item , toggles several times. how fix this?

you can see problem @ http://www.camillawestin.se

(sorry if code 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 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;} 

first, id's must unique, use class instead. next, you'll want target port-link inside area hovered.

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

note .hover() going away, need replaced with:

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