Using JavaScript to move div img's y-position

[tozenter]

Hi,

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>
        <div name="newboxes-2" id="newboxes1-2" style="display:none;">
        	<span id="title">box 1</span>
        	<span>content 1</span>
        </div>
        <div name="newboxes-2" id="newboxes2-2" style="display:none;margin-top:48px;">
        	<span id="title">box 2</span>
        	<span>content 2</span>
        </div>
        <div name="newboxes-2" id="newboxes3-2" style="display:none;margin-top:96px;">
        	<span id="title">box 3</span>
        	<span>content 3</span>
         </div>

Any help would be much appreciated. Thank you.

[MartinRinehart]

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.