[jQuery] Jquery Simple Accordion Script (No Plugins)

[jQuery] Jquery Simple Accordion Script (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:
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
</div>
<div class="newsArticle">

Content of Article


</div>
</div>
Any help would be gladly appreciated. Thanks! :)