Jquery Hover Title, fold out div

I have a bunch of articles with titles and excerpts, I want to have the excerpt fold out when hovering the title. here is my code:

<div class="search-post" id="post-290">

    <div class="posty-content">
    <h2 class="title trigger"><a href="http://qa.cidev.info/case-study/future-shop-case-study/" rel="bookmark" title="Permanent Link to Future Shop Case Study">Future Shop Case Study</a></h2>

    <div class="entry boxed">
        <p>Overview Cum sociis natoque penatibus et magnis dis nascetur ridiculus mus lorem ipsum. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Cras mattis consectetur purus sit amet fermentum. Cum sociis natoque penatibus et magnis dis nascetur ridiculus mus lorem ipsum. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Cras&#8230;</p>
    </div>
    <div class="info">
    </div>
    </div>
    <div class="float-divider"></div>
</div>

<div class="search-post" id="post-288">

    <div class="posty-content">
    <h2 class="title trigger"><a href="http://qa.cidev.info/case-study/tiger-direct-case-study/" rel="bookmark" title="Permanent Link to Tiger Direct Case Study">Tiger Direct Case Study</a></h2>

    <div class="entry boxed">
        <p>Overview Cum sociis natoque penatibus et magnis dis nascetur ridiculus mus lorem ipsum. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Cras mattis consectetur purus sit amet fermentum. Cum sociis natoque penatibus et magnis dis nascetur ridiculus mus lorem ipsum. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Cras&#8230;</p>
    </div>
    <div class="info">
    </div>
    </div>
    <div class="float-divider"></div>
</div>

<div class="search-post" id="post-286">

    <div class="posty-content">
    <h2 class="title trigger"><a href="http://qa.cidev.info/case-study/kfc-case-study/" rel="bookmark" title="Permanent Link to KFC Case Study">KFC Case Study</a></h2>

    <div class="entry boxed">
        <p>Overview Cum sociis natoque penatibus et magnis dis nascetur ridiculus mus lorem ipsum. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Cras mattis consectetur purus sit amet fermentum. Cum sociis natoque penatibus et magnis dis nascetur ridiculus mus lorem ipsum. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Cras&#8230;</p>
    </div>
    <div class="info">
    </div>
    </div>
    <div class="float-divider"></div>
</div>

and my current jquery

$('.trigger').hover(function() {
   $('.boxed').show("slow");
});

The problem is when I hover over a trigger, all boxed items are showing, I just want the current post content box to open, any ideas??

Answers


Try this...

$('.trigger').hover(function() {
    $(this).parent().find('.boxed').show("slow");
});

It will only show the .boxed elements inside the parent of the clicked .trigger element.


Try this code:

$('.trigger').hover(function() {
   $(this).siblings('.boxed').show("slow");
});

This is happening because you are referencing a class for your show method. You should be referencing an ID instead, or at least you need to uniquely identify which div should pop out.

please try replacing your jQuery code with this, it should work:

$('.trigger').hover(function() {
   $(this).parent().find('.boxed').show("slow");
});

in order to hide the popup after you stop hovering, use this code:

$('.trigger').hover(function() {
    $(this).parent().find('.boxed').show("slow");
},function(){
    $(this).parent().find('.boxed').hide("slow");
});

Need Your Help

PHP font_size Captcha issue

php gd captcha

I tried to change the $font_size but it seems it is not working. It stays the same no matter what. Even if I altered the $font_size up to 130. It stays the same:

haskell libmagic how to use it?

haskell

I'm trying to write a program that will check the file type of a certain file and I found a haskell library that should do the trick.

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.