A simple Jquery Accordion with no plugins

A simple Jquery Accordion with no plugins

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:

$(".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:


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:

<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!

EDIT:
I was able to find a fix. It was simple enough to just put if($(this).parent().next().is(":hidden") statement and it worked fine.

Thanks!