show one element, hide the rest

[kirkh34]

hello, i have some php code that prints a list of clickable colors that change the color of a div with a js function that changes the css with an onclick...this works just fine...but i'd like to have in the same onclick something to show the name of the color, i set up another loop to display all the names of the colors and i set them to display:none...is there anyway i can set up a javascript function to turn the display to block to whatever one that's clicked and when another is clicked it turns on that one and the current one off...sorry if this is confusing... any help is appreciated

 

foreach($colors as $color){

$sql2 = mysql_query("SELECT * FROM blanks WHERE id='$color' ")
or die(mysql_error());

$row = mysql_fetch_array($sql2);
$value = $row['color_value'];
$color_name = $row['color_name'];






echo "<ul class='colors'>";

echo "<li>";
echo "<a href='#' class='color_links' onclick=\"changecss('.template_fill','background-color','#" . $value . "');changecss('.magnifyarea','background-color','#" . $value . "');\"><img style='background-color:#" . $value . ";'/></a><br />";
echo "</li>";


} //end foreach

echo "</ul>";

foreach($colors as $color){

$sql2 = mysql_query("SELECT * FROM blanks WHERE id='$color' ")
or die(mysql_error());

$row = mysql_fetch_array($sql2);
$value = $row['color_value'];
$color_name = $row['color_name'];


echo "<p id='a" . $value . "' style='display:none' >";
echo $color_name;
echo "</p>";

}  

[arbitter]

I'm implementing something like this on my site too, though I'm having some troubles. This is the code I'm using:

function togglemenu(id)
{
var object = document.getElementById(id).style

if (object.display == "none")
{
	setAllInvisible()	
	object.display = "block"
}
else if (object.display == "block")
{
	object.display = "none"
}
}

function setAllInvisible()	
{
for(var i=1; i<=2 ; i++)
{

	var object = document.getElementById("sub"+i).style;
	object.display = "none";

}

}

 

So the div that's clickable would be: <div onclick="togglemenu('sub1')"

and the div that shows would have <div id='sub1'>

 

second one would be 'sub2', ...

in the javascript code where i<=2, the 2 should be the amount of objects you have that are clickable.