Your title says (No Plugins). Are you set on not using an already built
accordion plugin that has solved these issues, and more? Because you're
hitting the first of many issues that previous plugin authors have hit
before you.
- Richard
On Mon, Oct 19, 2009 at 10:06 AM, Joel <typefasterj...@gmail.com> wrote:
>
> 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! :)
>
