Results 1 to 2 of 2

Thread: Tab in left side

  1. #1
    Join Date
    May 2009
    Posts
    13
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Default Tab in left side

    1) Script Title: tabcontent_suppliment.htm

    2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...suppliment.htm

    3) Describe problem:
    I want to use this script for my web page, but i need to show the tabs in the left side of the content box.

    Please help me

  2. #2
    Join Date
    Aug 2004
    Posts
    10,143
    Thanks
    3
    Thanked 1,008 Times in 993 Posts
    Blog Entries
    16

    Default

    Simply create a two column layout, and place the tabs in the left column, and the tab contents on the right. Something like:

    Code:
    <!--Left column-->
    <ul id="countrytabs" class="shadetabs">
    <li><a href="#" rel="country1" class="selected">Tab 1</a></li>
    <li><a href="#" rel="country2">Tab 2</a></li>
    <li><a href="#" rel="country3">Tab 3</a></li>
    <li><a href="#" rel="country4">Tab 4</a></li>
    <li><a href="http://www.dynamicdrive.com">Dynamic Drive</a></li>
    </ul>
    
    
    <!--Right column-->
    
    <div style="border:1px solid gray; width:450px; margin-bottom: 1em; padding: 10px">
    
    <div id="country1" class="tabcontent">
    Tab content 1 here<br />Tab content 1 here<br />
    </div>
    
    <div id="country2" class="tabcontent">
    Tab content 2 here<br />Tab content 2 here<br />
    </div>
    
    <div id="country3" class="tabcontent">
    Tab content 3 here<br />Tab content 3 here<br />
    </div>
    
    <div id="country4" class="tabcontent">
    Tab content 4 here<br />Tab content 4 here<br />
    </div>
    
    </div>
    
    <script type="text/javascript">
    
    var countries=new ddtabcontent("countrytabs")
    countries.setpersist(true)
    countries.setselectedClassTarget("link") //"link" or "linkparent"
    countries.init()
    
    </script>
    DD Admin

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
  •