CSS/jQuery Vertical Accordion

A very simple verical acccordion menu. I used this one to demo the new Paulist Press web site, to shoow the first & second level book categories.

  • Built in a UL Framework.
  • Has Idle, Hover and Active States.
  • Utilizes CSS3/HTML5 Gradients in Element Fields for Button States.

Because I was using this as a demo and couldn't spend a great deal of time refining, I stopped short of applying button states to the second level elements. Shouldn't take much to make that happen here.

Demo the Original Construct

Download this Original Construct Version

BTW: This Demo version uses multiple CSS files and includes things like browser-based gradient backgrounds generated by the body tag, and other extras we may not want. This next version, "Refined", has all CSS in one file, no frills and is most ready to use.

Demo the Refined, Ready-To-Eat, Combined-CSS Version

Download the Refined, Ready-To-Eat, Combined-CSS Version

Download Full 4-Version Package with Source Info