table collapse expand underlying data

[simpli]

There's something I want to do and I don't know how to go about it.

I have several users who have made different choices in my database. I want to show the users, their total points and the detail of their points. The detail of their points is the hockey players they've chosen and whatever points these players have earned so far. I want to be able to collapse and expand that structure so we can see the details or revert back to a summary view. Can you tell me how  I should proceed to do this? Should I use a table with underlying cell? How do I handle the collapse expand part?

example of what I wanna do is below:

Thanks,

J-R

 

 

 

[attachment deleted by admin]

[POG1]

You will need a JavaScript function. You could probably add it to the on click event for the image and show hide the additional data

 

Here is a function you could use

 

function toggle(obj) {

document.getElementById(obj).style.display = (el.style.display != 'none' ? 'none' : '' );

}

[simpli]

That's interesting but what would I toggle? It seems I would have to toggle all the underlying rows of the table. Incidentally could I have a table where for each user you would have a div and each of these divs would contain the different rows and maybe I could toggle the div so I wouldn't have to toggle each row one at a time? Let me know and thanks for the help.

J-R

[POG1]

you could wrap each of those underlying rows in a div or you could just put the additional rows in an extra table. Either way you will probably have it working pretty easy.

[RichardRotterdam]

Looks like typical "accordion" behaviour. Mootools, Jquery prototype all have this functionality build in. Maybe you want to have a look at that.

 

http://demos.mootools.net/Accordion

[simpli]

I have a problem with the accordion as only one can be expanded at the same time. Is there an equivalent that would allow me to have several or all of the branches open or collapsed at a time?

 

Thanks for your continued help.

J-R

[RichardRotterdam]

You could add slide behaviour to each element. Is there any type of js framework you are using? It doesn't really matter which one but any would make it a lot easier.

Thinking of which I just remembered that extjs has a demo that looks exactly like what you want.

 

http://extjs.com/deploy/dev/examples/desktop/desktop.html

click on "accordion window" and see what I mean

[simpli]

Hi, I saw the example you sent me to. It could do the work but in all honesty I'm a bit too newb to start working with frameworks. I intend to use dojo for my next project but this is my newbie project and I want to maybe keep it as plain vanilla as possible because it would probably take me a week to figure out how to use the framework.

Thanks,

J-R