Comments on: Accordion Madness

By: Ethan Gardner

Ethan Gardner — Thu, 11 Mar 2010 15:48:27 +0000

I modified the last script in the article so the expanded item can be styled differently than the collapsed one. You can see it at http://jsfiddle.net/KDC9c/1/

By: Adi

Adi — Tue, 22 Dec 2009 06:13:05 +0000

How can I also load a page (and expand the menu) every time I click on h3? I'm trying this code below

$(document).ready(function() {
  function addDanNav()
  {
    $("#navigation > li > ul").css("display","none");
    $("#navigation > li > a.selected").siblings("ul").css("display","block");
    $("#navigation > li > a").click(function(){
      if ($(this).siblings("ul").length > 0)
      {
        if ($(this).hasClass("active"))
        {
          return true;
        }
        else
        {
          $(this).parent("li").siblings("li").children("ul").slideUp("slow");
          $(this).parent("li").siblings("li").children("a").removeClass("active");
          $(this).siblings("ul").slideDown("slow");
          $(this).addClass("active");
          return false;
        }
      }
    });
  }

  $(document).ready(function(){
    if ($("#navigation").length > 0)
    {
      addDanNav();
    }
  });
});

Anyone could help me? Thank you!

By: +20 excellent jquery menus tutorials | ExtraTuts

+20 excellent jquery menus tutorials | ExtraTuts — Sun, 29 Nov 2009 14:51:33 +0000

[...] from here15.Make a Mega Drop-Down Menu with jQueryvisit the tutorial from here16.accordion menuvisit the tutorial from here17.Simple animated menu with jqueryvisit the tutorial from here18.apple style menu and improve it [...]

By: Accordion menuler « Open Source

Accordion menuler « Open Source — Sat, 07 Nov 2009 21:46:53 +0000

[...] [...]

By: Bob Knothe

Bob Knothe — Sat, 24 Oct 2009 16:35:40 +0000

Karl,

Thanks for the TUT – it’s been very helpful.

Question: Can you have nested accordion (hide\show) where the inside tag has it’s own trigger?

Bob

By: Accordion – Plugins, Demos and Tutorials - Hidden Pixels

Accordion – Plugins, Demos and Tutorials - Hidden Pixels — Sat, 24 Oct 2009 06:24:48 +0000

[...] Accordion Madness [...]

By: Austin Siewert

Austin Siewert — Fri, 23 Oct 2009 23:55:56 +0000

Thanks Karl,

So cool and so simple!!! I always make it harder on myself than it needs to be. I guess that goes with the territory as I’m just getting into jQuery and don’t know the full API.

I’m actually going to order your book tonight, been thinking about it for awhile and now is the time!

By: Karl Swedberg

Karl Swedberg — Fri, 23 Oct 2009 21:30:58 +0000

Hi Austin, Sorry I don't have time for a detailed reply, but the answer is yes. Something like this would work (if I'm understanding your html structure correctly):


$('.sidebar a').click(function() {
  var thisClass = this.className;
  $('h3.' + thisClass).trigger('click');
  return false;
);

By: Austin Siewert

Austin Siewert — Fri, 23 Oct 2009 20:58:04 +0000

Karl, any way to activate the accordion from outside? For instance, I would like to open/close the div’s via the H3’s or from an outside ’s in a sidebar with the same classes on the anchors as the #accordion > h3’s. Does that make sense?

By: Javier Rios

Javier Rios — Tue, 06 Oct 2009 20:18:19 +0000

Thank you for this tutorial it has been a great help. I am facing a problem that I am unable to solve though. My structure is similar to your with one difference, the H3 and div following are wrapped in a Div. This is done so that I can hide or show certain sections depending on your rights.

There are also times when the H3 is followed by a UL instead of a div. In the js I put the class name to show or hide.

I am able to get the h3 to toggle between the div or ul, I am not able to get it to show or hide other open divs or uls. I will have multiple sections open instead of one closing as another is being open.