Hi, this question is addressed to Paul:
Like Rich, who started this thread, I need a CSS tabbed interface for my site at http://athenscollectibles.info and have been searching for over a week. I found many, but none worked with my site platform (Zen Cart) or with all browsers...
...until I tried Paul's example posted on 16 June. I have inserted it into a test product here http://athenscollectibles.info/index.php?main_page=product_info&cPath=1&products_id=1 and it does exactly what I want: it has the first tab contents displayed on load, changes smoothly and quickly the contents when other tabs are clicked and, most important, it is simple and I feel confident that I can customise it with my (non-expert) knowledge of CSS and HTML.
My only issue is that the tabs are one below the other rather than in a row. Ideally, I would prefer them to be in one row with the tab contents displaying below them like in this example from my other site http://www.athenscollectibles.com/supportedstores.html, which however does not work with Zen Cart.
I am very persistent and patient and tried hard to modify Paul's example before applying for help here but I failed. As I said, I have some self-taught knowledge of CSS and HTML but this has proved to be beyond my abilities
All I need is three tabs for "product description", "additional information" and "more pictures" with their contents displayed on clicking the tab.
In an extra effort to probably find another solution, I visited your site and found a lot of valuable information which will help me in improving my site. Being there, I tried to use the pure CSS tab menus [http://www.pmob.co.uk/temp/tabmenu_mine2.htm and [URL="http://www.pmob.co.uk/temp/tabexample4.htm"]http://www.pmob.co.uk/temp/tabexample4.htm](http://www.pmob.co.uk/temp/tabmenu_mine2.htm) as they are both simple and neat. After playing around with the first of them, I changed the HTML to read:
<h1>Example Simple Tab Menu</h1>
<div id="tab"><a class="current" href="#">Product description</a> <a href="#">Other information</a>
<a href="#">More pictures</a></div>
<p>Contents of "Product Description" tab </p>
What beats me is how do I define the contents for the second and third tab. The <div id="content"> does not have an identification to link it to the first tab and, when I click the second or third tab nothing changes and the first tab remains selected.
These questions might seem stupid and it could all be that I'm missing something very simple and obvious.
Any help to unblock my (63 year old) mind will be really appreciated. As this is an old thread, it may not get attention. I'm leaving on holidays for a few days tomorrow and will start a new thread on my return if no reply has been posted. I hope that I will get an answer for which I thank you in advance.
With kind regards
George from Athens, Greece