[jQuery] Jquery Simple Accordion Script (No Plugins)

[Joel]

Good Day,

I've been working around Jquery for a little while now and I'm
creating a "News Accordion" menu to go on my site. The accordion works
fine in all browsers, however there is a bouncing effect if Click on
the same news article.

Here is the snippet of the first code I was working on:

Code:

$(".newsArticle:not(:first)").hide();
      $(".newsHeader h3").click(function() {
         $(".newsArticle:visible").slideUp("slow");
         $(this).parent().next().slideDown("slow");
         return false;
      });


I played around with it for a while and I came up with the following:


Code:

if($("#newsAccordion")) {// IE Fix
         $(".newsArticle").hide();
         $(".newsArticle:first").show();
         $(".newsArticle:first").addClass("active");
      }
      $(".newsHeader h3").click(function() {
         if($(".newsArticle").hasClass("active")) {
            $(".newsArticle:visible").slideToggle("slow");
            $(".newsArticle:visible").toggleClass("active");
            console.log("Inside If");
         } else if($(".newsArticle:hidden")) {
            $(".newsArticle:visible").slideUp("slow", function() {
               $(this).parent().next().slideDown("slow");
            });
            $(".newsArticle:visible").removeClass("active");
            $(this).parent().next().slideDown("slow");
            $(this).parent().next().addClass("active");
            console.log("The Other if");
         }
      });

This top code actually works with what I want it to do. To close in
case the news h3 was clicked again. However, if I clicked on a closed
one it closes the current one, but doesn't open the new one.
The HTML Hierarchy goes as follow:

Code:

<div id="newsAccordion">
   <div class="newsHeader">
   <h3>News Header</h3>
   <p class="date">August 10,2009</p>
   </div>
   <div class="newsArticle">
   <p>Content of Article</p>
   </div>
</div>


Any help would be gladly appreciated. Thanks! :)