CODEWITHSUNDEEP
javascriptjqueryjquery-uimenu
Ray
Ray

Reputation: 3449

Javascript expandable menu - sample code?

I'd like to know if anyone knows how I can implement something like the following?

Here's a sample below:

enter image description here

And once you click on the plus, the menu expands:

enter image description here

I've googled and have found quite a few menus. But I'm looking for something that has this +/- functionality.

Upvotes: 1

Views: 823

Answers (3)

bpeterson76
bpeterson76

Reputation: 12870

If it was me doing this, I'd do a jquery ui accordion with a single div. By default they use an arrow for the toggle, but it'd be trivial to change that out. Here's a tutorial on changing icons. It's infinitely adaptable using the API.

The biggest benefit is that if you already use jQuery UI, there's nothing else to load. You can't beat ThemeRoller for styling, either.

Upvotes: 1

Rebecca
Rebecca

Reputation: 587

If you want to use jQuery, you can use a TreeView extension

Once you have the HTML set up, one simple javascript call will get it working.

$("#yourDiv").treeview();

http://docs.jquery.com/Plugins/Treeview

Upvotes: 0

allaire
allaire

Reputation: 6045

Nothing complicated here :) A simple slideToggle in jQuery (http://api.jquery.com/slideToggle/) binded to a click on that plus image and you have your effect :)

Comment if you need more code to understand.

Upvotes: 1

Related Questions