Selectable Expanding Info Boxes

[showman13]

Good Morning,

I'm not really sure where to go with this line of thought, so decided to bring it here where the logical thought processes reside... ;)

What I have is this... A new membership program that has multiple levels that members can be paid on.

Each level is tracked separately, and I will be displaying an overview for each level so the member can look in their back office to see what they have earned / been paid / still have coming for each level independently. Each level in a separate display graphic.

That is all pretty straight forward, BUT

What I would like to do, is at the bottom of each display graphic that contains the overview, I would like a to provide a link that they can click on that would generate a drop down box containing a list of all individual transactions that contributed to those overview totals.

What I'm looking for is the best way to generate that drop down box. And the ability to open and close that box for each overview graphic independently.

Hope that makes sense...

If anyone has any suggestions, I would appreciate it. I'm not at a point where I have to have it instantly, but just thinking a few days ahead for the development of this display page.

Thanks in advance.

Douglas

[diafol]

Perhaps a graphic/wireframe would help.

You want to generate a dropdown from scratch via ajax?

That's a trivial ajax implementation. Use jQuery and attach a general event handler (script tag) for image clicks.
The script will pass info to a php script which in turn will return data back to the js function. The js then updates the DOM with / or inserts a dropdown.

[showman13]

You want to generate a dropdown from scratch via ajax?

That's a trivial ajax implementation. Use jQuery and attach a general event handler (script tag) for image clicks.
The script will pass info to a php script which in turn will return data back to the js function. The js then updates the DOM with / or inserts a dropdown.

ardav, thank you for your reply. I know nothing about ajax, but maybe it is time to learn. Not sure where to start, but I will see what I can find.

Any other suggestions, examples, etc would be welcome.

[chrishea]

What you probably want is a JQuery accordion that lets you click on the header to open the section. See the example below. Even though this example always has one section open, I have implemented accordions where all sections can start out closed.

http://jqueryui.com/demos/accordion/

[diafol]

showman - sorry misunderstood your post - when you said dropdown, I took that to mean a <select> form field. Doh! No, chrishea's right - have a look at the jQueryUI site. You may find that a tabbed interface may be easier? Otherwise the accordion should suffice.

[showman13]

Thank you very much both of you.

YES, the Accordion is Exactly what I was looking for.

I will consider this thread solved, because I think that will work.

If I have any issues I'll come back and let you know.

Again Thank you very much.
Douglas

[showman13]

Actually this isn't 100% solved.. But probably 95% anyway...

What I really need is something that operates in this fashion, but that all of the expandable boxes are closed on initial display of the page, then you can open and close each one individually.

The part where if you open one, and there is already another opened, it closes the previously opened one, is a good feature though.

I need to be able to have the page displayed with none of them opened..

Thanks in advance for any suggestions in that direction that you may have.

Douglas

[diafol]

I'm sure you can search jQuery for expandable dropdowns. There are literally thousands of plugins. There must be one there that will suit your purposes.

[showman13]

You were very correct ardav... Sometimes it just helps getting a nudge in the right direction for a search...

http://wijmo.com/widgets/wijmo-open/expander/

Appears to be exactly what I needed...

Thanks