Problem with jquery code (newbie)

Question

I'm pretty new to jquery and I have an issue I need help with.
I have created a news section on my page, on the left is a list of the news items, once an item is clicked, the details open on the right. Everything works fine except that I noticed that I am HIDING and not REMOVING the details that are inactive. So let's say I have 10 times news items, there will be 10 corresponding details that are on top of each other, they are invisible until the item is click and then they become visible. The problem I have is that each detail contains links and once a detail is active, I can still "see" the links on the others that should be inactive. (see = if I put the mouse there, it shows there is a link there. How can I remove the inactive details so that this doesn't happen?

Here is my code:

HTML

<div id="overlay_news"><h3><a href="#">Item 1</a></h3>
<div class="news_text">
  <h4>Item 1<h4>
    <p>Detail 1 <a href="link1.com"></a></p>
</div><h3><a href="#">Item 2</a></h3>
<div class="news_text">
  <h4>Item 2<h4>
    <p>Detail 2 <a href="link1.com"></a></p>
</div>

JQUERY

$("#overlay_news div").css({ opacity: 0 });$("#overlay_news h3 a").click(function(){
$(this).addClass("news_active");
$(this).parent().siblings("h3").children("a").removeClass("news_active");
$(this).parent().siblings("div").animate({ opacity: 0}, 100 ); /*PROBLEM HERE*/
$(this).parent().next("div").animate({ opacity: .8}, 400 );
return false;});

The line I have commented out is where I think the problem is. Rather than change the opacity to 0, I should be removing the div so that only the active div should show.

Any help?

Answer 1

$("#overlay_news div").css({ opacity: 0 });
$("#overlay_news h3 a").click(function(){
    $(this).addClass("news_active");
    $(this).parent().siblings("h3").children("a").removeClass("news_active");
    $(this).parent().siblings("div").animate({ opacity: 0}, 100, function() {
        $(this).css("display", "none");
    });
    $(this).parent().next("div").css("display", "block").animate({ opacity: .8}, 400 );
    return false;
});

Does this work? BTW, please format your code in a bit cleaner way.

Answer 2

If you want to hide the links, use .fadeOut() instead of .animate({ opacity: 0 }) ( it sets display: none; at the end) and .fadeTo() instead of setting the opacity back (so it removes display: none;)...causing the details to occupy no space when hidden, overall like this:

$("#overlay_news div").hide();
$("#overlay_news h3 a").click(function() {
    $(this).addClass("news_active");
    $(this).parent().siblings("h3").children("a").removeClass("news_active");
    $(this).parent().siblings("div").fadeOut(100);
    $(this).parent().next("div").fadeTo(400, 0.8);
    return false;
});​

You can try it out here, note that we're also using .hide() to set display: none; initially. That version was for to be clear compared to your original code, here's a more efficient version that creates fewer jQuery objects:

$("#overlay_news div").hide();
$("#overlay_news h3 a").click(function() {
    $(this).addClass("news_active")
           .parent().siblings("div").fadeOut(100).end()
           .next("div").fadeTo(400, 0.8).end()
           .siblings("h3").children("a").removeClass("news_active");
    return false;
});​

You can give it a try here.

Answer 3

Thanks guys. I will try these out later today and let you know. I think Nick may have nailed it. You guys are great.

PS: sorry about the formatting. It was a little difficult pasting code in the forum.