SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Addict
    Join Date
    Sep 2008
    Posts
    341
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Is this possible (change HTML code around a bit)

    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).

    Code:
    	<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).

    Code:
    	<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. #2
    Hosting Team Leader silver trophybronze trophy
    cpradio's Avatar
    Join Date
    Jun 2002
    Location
    Ohio
    Posts
    5,057
    Mentioned
    152 Post(s)
    Tagged
    0 Thread(s)
    Personally, I would do something like the following:
    Code HTML:
    	<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
    Code CSS:
    .tabNavigation { display: none; }

    In your JavaScript, show the tabNavigation, and hide the second and third tabs (assuming you are using jQuery, or something similar)
    Code JavaScript:
    $(function() {
      $('#tabNavigation').show();
      $('#tab2,#tab3').hide();
    });


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •