SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Enthusiast
    Join Date
    Jun 2009
    Posts
    84
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    How to create clickable tabs table

    Hey everyone,

    I am currently designing my new website and am looking to create a section on the product pages that allows customers to click on the appropriate tab at the top and for the relevent content to be shown below. I what the best method would be for me to create something like this.

    An example page for my website can be found at http://www.purple-technology.com/ind...d250-blue.html

    On the example page I would like the tabs and their relevant information to be placed under where it says product description.

    I would be really grateful for any suggestions about how I can achieve this.

    Many thanks

    Tom

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,282
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    You would probably be better off using one of the JS libraries as there are quite a few showing tab type effects:

    http://www.silverscripting.com/mootabs/
    http://stilbuero.de/jquery/tabs_3/
    http://www.sunsean.com/idTabs/#t1

  3. #3
    SitePoint Enthusiast
    Join Date
    Jun 2009
    Posts
    84
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hey Paul,

    Thanks for your help. I have actually managed to implement what I was looking for now using Ajax, just got to create the content to fill the tabs now .

    Thanks again for your suggestions I will definitely look into them.

    Tom

  4. #4
    SitePoint Enthusiast
    Join Date
    Jun 2009
    Posts
    84
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Okay having installed some content for my tabs to potentially open, I now can't get them to actually open in the container space below, instead they are operating as straight links to the htm pages.

    Does anyone know why this is?

    It can be seen at http://www.purple-technology.com/ind...d250-blue.html

    I would be really grateful if anyone can help.

    Thanks

    Tom

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,282
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    It seems you have corrupted the javascript. Copy it and insert it again as shown.

    Code:
    <script type="text/javascript"> 
    var countries=new ddajaxtabs("countrytabs", "countrydivcontainer") 
    countries.setpersist(true) 
    countries.setselectedClassTarget("link") //"link" or "linkparent"<br />
    countries.init()
    </script>

    The ul isn't closed here either:

    Code:
    <ul id="countrytabs" class="shadetabs" ><!-- closing bracket was missing -->
     <li><a href="#" class="selected" rel="#default">Mobility</a></li>
    Shouldn't the rel atttribute be countrycontainer and not default (except for the default)?

    I pointed it to a local file for testing and it seemed to work for me.

    Code:
    <li><a href="test.htm" rel="#countrycontainer">Connectivity</a></li>

  6. #6
    SitePoint Enthusiast
    Join Date
    Jun 2009
    Posts
    84
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hey Paul,

    Thanks again for your advice, I have tried correcting the things you suggested however and can't get it to work. I am thinking I might go and use your Jquery tabs instead as they seem easier to implement.

    Don't worry about fixing this at the moment I think I am going to come back to it later on in my design process once I have completed some other parts.

    Thanks again for your help

    Tom

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,282
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    I had it all working locally with the code I mentioned above but I have deleted it now so I can't give you the whole thing. If you want me to go through it again let me know


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
  •