Is this possible (change HTML code around a bit)

JavaScript
1

I have this, which will currently render three boxes across the screen, each with its own title. Ignore the ‘tabs’ part as that does nothing (yet).


	<div class="tabs">
		<div id="tab1" class="box">
		<h5>Section 1</h5>
		AAA
		</div>
		<div id="tab2" class="box">
		<h5>Section 2</h5>		
		BBB
		</div>
		<div id="tab3" class="box">
		<h5>Section 3</h5>
		CCC
		</div>
	</div>

I want to add a script where if JavaScipt is on then the above will use a ‘tabs’ script so the user can select one box/tab at a time, rather than see three boxes across the screen.

I have everything in place, other than I need the above to be converted to the code below by some JavaScript. I have everything else in place. I want it to be this simple, so I can simply wrap a <div class=“tabs”> around some boxes (a grid layout) and it automatically render as tabs (if JS on).


	<div class="tabs box">
		  <ul>
		    <li><a href="#tab1" class="selected">Section 1</a></li>
		    <li><a href="#tab2">Section 2</a></li>
		    <li><a href="#tab3">Section 3</a></li>
		  </ul>
		<div id="tab1" style="display:block">
		AAA
		</div>
		<div id="tab2" style="display:none">
		BBB
		</div>
		<div id="tab3" style="display:none">
		CCC
		</div>
	</div>

So the script should:

(1) get the class of the first div (of the three) inside the <div class=“tabs”> div, in this case it is ‘box’ and use that on the <div class=“tabs”> div. Then, remove all classes from the inside divs.

(2) Add the entire <ul> part and use the id’s of the one inside to make the <a href links (#tab1, #tab2, #tab3 etc.) (first tab always selected by default).

(3) Append style=“display:block” to the first one (selected) and style=“display:none” to the others

(4) Use what is in <h5></h5> for the anchor text of the links inside the <ul> and remove the <h5> stuff from the inside divs.

Any help or at least an idea how to start would be appreciated.

2

Personally, I would do something like the following:

	<div class="tabs box">
		  <ul class="tabNavigation" id="tabNavigation">
		    <li><a href="#tab1" class="selected">Section 1</a></li>
		    <li><a href="#tab2">Section 2</a></li>
		    <li><a href="#tab3">Section 3</a></li>
		  </ul>
		<div id="tab1">
		AAA
		</div>
		<div id="tab2">
		BBB
		</div>
		<div id="tab3">
		CCC
		</div>
	</div>

In your CSS, hide the tabNavigation


.tabNavigation { display: none; }

In your JavaScript, show the tabNavigation, and hide the second and third tabs (assuming you are using jQuery, or something similar)

$(function() {
  $('#tabNavigation').show();
  $('#tab2,#tab3').hide();
});