How to create clickable tabs table

HTML & CSS
1

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/index.php/netbooks/by-brand/acer-netbooks/acer-aspire-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 :slight_smile:

2

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

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

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/index.php/netbooks/by-brand/acer-netbooks/acer-aspire-d250-blue.html

I would be really grateful if anyone can help.

Thanks

Tom:)

5

Hi,

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


<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:


<ul id="countrytabs" class="shadetabs" [B]><!-- closing bracket was missing -->[/B]
 <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.


<li><a href="test.htm" [B]rel="#countrycontainer"[/B]>Connectivity</a></li>
6

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 :slight_smile:

7

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