$15
Sorting Elements by ID

So I have, say, a list of members that are sorted out on the page in sections, each section has its own id#. By default I want to display all of the IDs, but when someone selects a radio button I want only one section (id) to be shown.

Jeff Peak | 11/10/10 at 11:48am | Edit

Sorting Elements by ID

(2) Possible Answers Submitted...

Last edited:
11/10/10
12:12pm
Jarret Minkler says:
First,

dom element id's can not be numbers (some frameworks will no work properly because of this)

that aside,

You want a list of all the id's in a javascript array, populate it however you want ..

var ids = new Array('id1','id2','id3','id4');
var current = 'id1'; // Currently shown member id

function switch($id) {
hide = new Array();
len = ids.length;
for(x=0; x< len; x++) {
if(ids[x] != $id) {
hide.push(ids[x]); // add ones that dont match
}
}
hide(hide); // Hide all the ones that dont match
ele = document.getElementById($id);
ele.style.display = ''; // show the Id
}

function hide() {
len = arguments.length;
for(x=0; x<len; x++) {
ele = document.getElementById(arguments[x]);
ele.style.display = 'none';
}
}

in Your radio buttons ..

<input type="radio" onclick="switch(this.value)" value="<?php echo $theid; ?>" .....

Previous versions of this answer: 11/10/10 at 12:12pm
Last edited:
11/21/10
4:03am
Rainner Lins says:
If you know the ID of each section, and depending on the structure of your HTML tags, you can can loop through all the main tags within a section ( by #id ) and hide all except for the one that referred to by the radio butotn.

<input type="radio" onclick="single( 'item3', 'section1' )" value="" />

function single( id, sec )
{
var section = document.getElementById( sec );
var items = section.getElementsByTagName( 'li' );

for( var i=0; i < items.length ; i++ )
{
items[i].style.display = ( items[i].id === id ) ? '' : 'none';
}
}

something like that.