Loading information

[Cags]

I have a series of information, currently stored in classes in PHP. For the sake of simplicity though lets imagine they are stored in arrays like so...

[php]$items = array('item 1'=>array('sub_item_1', 'sub_item_2', 'sub_item_3'),
'item 2'=>array('sub_item_1', 'sub_item_2'),
'item 3'=>array('sub_item_1', 'sub_item_2', 'sub_item_3'));[/php]
This information is stored in a session. Now I wish to display this information in a long list, but I don't want the list to all be viewable at the same time. It should start out looking like this...

item1 [View]
item2 [View]
item3 [View]

...and when you click view next to an item it should change to this...

item1 [View]
item2 [Hide]
- sub_item_1
- sub_item_2
item3 [View]

I assume the simplest solution will be to load all of the information into a JavaScript array and use JavaScript to manipulate the HTML to add an remove elements. Problem is I haven't got the faintest idea how to start as I know pretty much nothing about JavaScript.

Any suggestions?

[libeco]

Well, I would not load it into a JavaScript array as users who do not have JavaScript enabled will not be able to use your website. Instead I would create the list as you would normally and only afterwards use JavaScript (or jQuery) to select what to show and what not.

If you would want to create the JavaScript array, it would be as simple as echoing out the data inside a JavaScript script block. Or to create a php file which with a header of a JavaScript file, in which you can also echo out your session.

[Cags]

Good point if JavaScript isn't installed I guess I would probably just want everything being shown. That being said, I can obviously work out how to echo all the data, how do I use JavaScript to hide some of it?

[libeco]

Personally I feel jQuery makes this a lot easier. It's as simple as selecting an item through a CSS-selector and calling the hide() function.
[syntax=javascript]$('ul li.sub_item').hide();[/php]

Ofcourse jQuery has a lot more options, you could only hide other menus, specifiy which menu to hide etc. etc.

The problem I'm having with JavaScript is that it only supports selecting elements with an id and not a class, while jQuery lets you do both by simply using CSS selector style.

[Cags]

That shouldn't be too much of an issue, I can easily enough give the elements id's since every menu item has a unique id anyway.

[bowersbros]

If your doing a hide and a show, i would probiably use jQuery toggle();

[libeco]

That shouldn't be too much of an issue, I can easily enough give the elements id's since every menu item has a unique id anyway.

In that case you could use something like
[syntax=javascript]var selection = document.getElementById('element_id');
selection.style.display = "none";[/php]

Ofcourse you'd probably want to hide and show it upon a click, so it could be placed inside a function, something like this:
[syntax=javascript]function ShowHide(element) {
var element = document.getElementById(element);
if (element.style.display == "none") {
element.style.display = "block";
} else {
element.style.display = "none";
}
}[/php]