I'm using a javascript function to toggle and display only 1 div at a time.
In this case, I have 3 divs as toggle buttons and 3 divs to show content (which belong to those 3 buttons).

My problem is these 3 divs (divs with class .linkBox) that act as buttons are using the same background-image and I would like to have it move up (y-position: -48px to be exact) when its content is displayed.

Here's the javascript function

function showonlyonev2(thechosenone) {
    	 		var newboxes = document.getElementsByTagName("div");
    	  		for(var x=0; x<newboxes.length; x++) {
           			name = newboxes[x].getAttribute("name");
            			if (name == 'newboxes-2') {
                  			if (newboxes[x].id == thechosenone) {
                        		if (newboxes[x].style.display == 'block') {
                              		newboxes[x].style.display = 'none';
                        		else {
                              		newboxes[x].style.display = 'block';
                 			 }else {
                        newboxes[x].style.display = 'none';

and here's my HTML

<div class="linkBox" id="menu" onclick="javascript:showonlyonev2('newboxes1-2');" style="cursor:pointer;"><span>Introduction</span></div>
            <div class="linkBox" id="menu" onclick="javascript:showonlyonev2('newboxes2-2');" style="cursor:pointer;"><span>Location</span></div>
            <div class="linkBox" id="menu" onclick="javascript:showonlyonev2('newboxes3-2');" style="cursor:pointer;"><span>Activities</span></div>
        <div name="newboxes-2" id="newboxes1-2" style="display:none;">
        	<span id="title">box 1</span>
        	<span>content 1</span>
        <div name="newboxes-2" id="newboxes2-2" style="display:none;margin-top:48px;">
        	<span id="title">box 2</span>
        	<span>content 2</span>
        <div name="newboxes-2" id="newboxes3-2" style="display:none;margin-top:96px;">
        	<span id="title">box 3</span>
        	<span>content 3</span>

Any help would be much appreciated. Thank you.

I cannot read your code. I doubt anyone else can.

The best JavaScript conventions published are by Crockford. Try googling "crockford javascript conventions" and following his advice.

The name "thechosenone" is a superb example of why you should always use camelCase (theChoseNone or is it theChosenOne?) or lower_and_upper (the_chose_none or the_chosen_one).

Indents should be four spaces. Iin Python, indents are exactly four spaces and there are not "{" and "}"s. You don't need them if you indent correctly. You get a syntax error otherwise.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.