Problem with jquery code (newbie)
<p>I'm pretty new to jquery and I have an issue I need help with.<br>
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?</p>

<p>Here is my code:</p>

<p>HTML</p>

<pre><code>&lt;div id="overlay_news"&gt;&lt;h3&gt;&lt;a href="#"&gt;Item 1&lt;/a&gt;&lt;/h3&gt;
&lt;div class="news_text"&gt;
  &lt;h4&gt;Item 1&lt;h4&gt;
    &lt;p&gt;Detail 1 &lt;a href="link1.com"&gt;&lt;/a&gt;&lt;/p&gt;
&lt;/div&gt;&lt;h3&gt;&lt;a href="#"&gt;Item 2&lt;/a&gt;&lt;/h3&gt;
&lt;div class="news_text"&gt;
  &lt;h4&gt;Item 2&lt;h4&gt;
    &lt;p&gt;Detail 2 &lt;a href="link1.com"&gt;&lt;/a&gt;&lt;/p&gt;
&lt;/div&gt;
</code></pre>

<p></p>

<p>JQUERY</p>

<pre><code>$("#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;});
</code></pre>

<p>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.  </p>

<p>Any help?</p>
