Need Scripting Help

[Punchinello]

I need some help showing/hiding a set of <span> elements.

I've got an area on the html page that shows a company name and address. What I want to do is place some anchors (I think) that let the user select which address to display among choices like "Shipping address", "Billing address" and so on. Each address is enclosed in a <span> block with a unique id. So when the user clicks on "Shipping address", I want a script to make the selected address visible and make sure that the others are hidden. And to highlight or bold the active anchor and make sure the inactive anchors are normal text.

 

[tigerjade]

I put this one together for my forms:

function swapClass(field,newClass) {

	if (document.getElementById) {
		document.getElementById(field).className = newClass; 
	} else {
		return;
	}
}

I usually call this one on an event, like onclick='swapClass("theName","theClass");' . The classes I use are simply:

.hide { display: none; }

.show { display: block; }

I've had the best luck using this with <div> tags. You can add whatever else you need to the classes to handle highlighting & such, or use other classes & other calls to the script.

good luck!

tigerjade

"Always code as if the person who ends up maintaining your code will be a violent psychopath who knows where you live." -- Martin Golding

 

[Punchinello]

Well, I found my solution and thought I'd post it to close out this thread. Help came from medic's faq215-4585 and the highlight example from LookingForInfo's excellent reply on thread215-753155.

The code below is designed to work with span id's that are named just like the anchors with a "v" prefix. So the anchor "Billing" corresponds to the span "vBilling". The InitAddress function is called when the page first loads.

Here's my script:

<script>
function AddHighlight(obj, highlight)
{
if(highlight)
{
	obj.style.color = 'white';
}
else
{
	obj.style.color = 'blue';
}
}
function ViewAddress(obj)
{
AddHighlight(document.getElementById("Billing"), false);
AddHighlight(document.getElementById("Customer"), false);
AddHighlight(document.getElementById("Owner"), false);
AddHighlight(document.getElementById("Shipping"), false);
AddHighlight(obj, true);
document.getElementById("vBilling").style.display = "none";
document.getElementById("vCustomer").style.display = "none";
document.getElementById("vShipping").style.display = "none";
document.getElementById("vOwner").style.display = "none";
document.getElementById("v" + obj.id).style.display = "block";
}
function InitAddress()
{
ViewAddress(document.getElementById("Shipping"));
}
</script>

And here's the html that calls the script functions:

<a href="#" id="Shipping" onclick="ViewAddress(this)">Shipping</a>
<a href="#" id="Billing" onclick="ViewAddress(this)">Billing</a>
<a href="#" id="Customer" onclick="ViewAddress(this)">Customer</a>
<a href="#" id="Owner" onclick="ViewAddress(this)">Owner</a>

 

[Punchinello]

tigerjade,
looks like we were adding to this thread at the same time. Thanks for your help!