Whats Missing from my description tabs to make it load on click?

Hi,

I saw this nice style of loading description when a tab is clicked similar to this companies style:

http://www.brylanehome.com/decor/Florence-Oversized-Cotton-Bedspread.aspx?PfId=16994&DeptId=15167&ProductTypeId=2

id like to make a similar style tab loading description system but ive run into a problem. every time i click on one of the tabs ive set up it send me to my homepage instead of the desired interval of information, im not sure whats missing. I will attach what i have written please advise:

you can see a link to my item which i have installed my code here http://www.homelinencollections.com/Luxury-Bed-Sheets/300-Thread-Count-Sheets/Elite-Home-300-Thread-Count-Carleton-Dot-Printed-Bed-Sheet-Set

**this is the code ive written: **

<div class="tabs"> <ul class="tabNavigation"> <li><a href="#first" class="">Description</a></li> <li><a href="#second" class="">Size Chart</a></li> <li><a href="#third" class="">Washing Instructions</a></li> <li><a href="#fourth" class="">Facebook Comments</a></li>

 </ul>

 <div id="first" style="display: block;">

<p> </p><table cellspacing="0" cellpadding="0" border="0"> <tbody><tr> <td width="15"></td> <td></td> </tr> </tbody></table> <p></p> <p class="second"><span id="ctl00_GlobalBodyPlaceHolder_DetailsCtrl_lblDescription"></span></p><p><span style="font-family: Arial, Helvetica, sans-serif; font-size: 11px;"> </span></p> <p class="description">Elite Home 300 Thread Count Carleton Dot Printed Sheet Set - Enjoy the timeless and classic look of the Carleton Dot Pattern and bring an updated and warm feel into your bedroom. The Carleton Dot Sheet Set starts with amazingly soft single-ply 300 thread-count 100-Percent cotton sateen that has been calendared and mercerized. The benefit to you is sheets and pillowcases that have a beautiful sheen, higher luster, increased durability and are smoother to the touch. The flat sheet and pillowcases are accented with a double needle hem to add strength and give them a clean, crisp look. With a 15-Inch pocket and elastic all around to fit standard and thicker mattress sizes </p> <ul> <li>Made with 300 thread-count 100% cotton sateen that has been calendared and mercerized for amazing softness and durability</li> <li>Includes one fitted sheet, one flat sheet, and 1-2 standard size pillowcases. (Twin includes 1 pillow)(King contains King Size pillowcases)</li> <li>Timeless and classic Carleton Dot Pattern brings an updated and warm feel into your bedroom</li> <li>Accented with a double needle hem to add strength and give a clean, crisp look</li> <li>Made of Single-Ply Cotton Sateen</li> <li>Coordinating 3-piece <a href="http://www.homelinencollections.com/Quilts-Duvets/Prints/300-Thread-Count-Carleton-Dot-Printed-Cotton-Duvet-Set?cPath=3&">Carleton Duvet Set</a> also available</li> </ul>

This Elite Home 300 Thread Count Carleton Dot Printed Bed Sheet Set is also available in Twin Size, Full Size, Queen Size, & King Size.<br><br>

<strong>To see the entire Elite Home Carleton Dot Collection in all colors and sizes, see
<a href="http://www.homelinencollections.com/index.php?main_page=advanced_search_result&search_in_description=1&keyword=Carleton+Dot">Elite Home 300 Thread Count Carleton Dot Collection</a></strong><br>

<center><strong><font color="red"><font size="4">Sorry, the Twin Size is all Sold Out</strong></font></font></center>

 </div>

<div id="second" style="display: none;"> <span class="tabReviews" id="ctl00_GlobalBodyPlaceHolder_tabReviews"></span> <div id="ctl00_GlobalBodyPlaceHolder_InlinePowerReviews_plcReviewsHolder"></div> <table width="375px" cellpadding="1" border="1" align="center"> <tbody><tr> <td width="150" valign="middle" height="20" align="center"><h3>Set Size</h3></td> <td width="150" valign="middle" height="20" align="center"><h3>Flat Sheet</h3></td> <td width="150" valign="middle" height="20" align="center"><h3>Fitted Sheet</h3></td> <td width="150" valign="middle" height="20" align="center"><h3>Pillow Case</h3></td> </tr> <tr> <td valign="middle" height="20" align="center"><h3>Twin</h3></td> <td valign="middle" height="20" align="center">66" x 96"</td> <td valign="middle" height="20" align="center">39" x 75" x 15"</td> <td valign="middle" height="20" align="center">20" x 30" (1)</td> </tr> <tr> <td valign="middle" height="20" align="center"><h3>Full</h3></td> <td valign="middle" height="20" align="center">81" x 96"</td> <td valign="middle" height="20" align="center">54" x 75" x 15"</td> <td valign="middle" height="20" align="center">20" x 30" (2)</td> </tr> <tr> <td valign="middle" height="20" align="center"><h3>Queen</h3></td> <td valign="middle" height="20" align="center">90" x 102"</td> <td valign="middle" height="20" align="center">60" x 80" x 15"</td> <td valign="middle" height="20" align="center">20" x 30" (2)</td> </tr> <tr> <td valign="middle" height="20" align="center"><h3>King</h3></td> <td valign="middle" height="20" align="center">108" x 102"</td> <td valign="middle" height="20" align="center">78" x 80" x 15"</td> <td valign="middle" height="20" align="center">20" x 40" (2)</td> </tr>

      </tbody></table>
 </div>

<div id="third" style="display: none;"> <span class="tabReviews" id="ctl00_GlobalBodyPlaceHolder_tabReviews"></span> <div id="ctl00_GlobalBodyPlaceHolder_InlinePowerReviews_plcReviewsHolder"></div> <p>Care Instructions:<br> Machine Wash Cold, Gentle Cycle.<br> Do not bleach.<br> Tumble Dry Low. Remove Promptly<br> Iron on Low Heat as Needed.</p> </div> <div id="fourth" style="display: none;"> <span class="tabReviews" id="ctl00_GlobalBodyPlaceHolder_tabReviews"></span> <div id="ctl00_GlobalBodyPlaceHolder_InlinePowerReviews_plcReviewsHolder"></div> <meta property="fb:admins" content="twistedmilas89##################"/> <meta property="fb:app_id" content="371301272933536"/> <div class="fb-comments" data-href="http://www.homelinencollections.com/Luxury-Bed-Sheets/300-Thread-Count-Sheets/Elite-Home-300-Thread-Count-Carleton-Dot-Printed-Bed-Sheet-Set" data-num-posts="20" data-width="470"></div> </div> </div>

any information would be helpful.

Thank You
Home Linen Collections

twistedmilas89:

Hi,

I saw this nice style of loading description when a tab is clicked similar to this companies style:

http://www.brylanehome.com/decor/Florence-Oversized-Cotton-Bedspread.aspx?PfId=16994&DeptId=15167&ProductTypeId=2

With PHP, you need to put in absolute URL's for page anchors and bookmarks.

What you are looking for can very easily be achieved with the following module.
http://www.zen-cart.com/downloads.php?do=file&id=646

SEE IT IN OPERATION

schoolboy:

With PHP, you need to put in absolute URL's for page anchors and bookmarks.

What you are looking for can very easily be achieved with the following module.
http://www.zen-cart.com/downloads.php?do=file&id=646

SEE IT IN OPERATION

Im actually just writing it to install it into the description, each item individually. so i would require it to be in html i wont be hard coding it into the php, any other suggestions?

When working in PHP, for ANCHORS and BOOKMARKS in a page, you need the FULL URL (absolute) PATH.

In **THIS SITE**, we have a size chart, created in an EZPAGE. At the top of the page we have #links:-

Men's Sizes
Women's Sizes
Unisex Sizes
Boot Sizes

Look at the PAGE SOURCE to see how we handle these anchors and bookmarks.

If the description you want tabbed is unique for each product, you don't need PHP to determine the correct URL; you can write it into the link code for each description, tailoring it for the specific product. Schoolboy's example will show you the way it should be handled.

I think it is not PHP that requires the full URL, but the fact that Zen Cart uses a <base href=""> in its page's HTML head. This causes all relative URLs (like #a) to be filled out with the index URL.

php builds a new page on each re-load (or click on a hyperlink), - and yes... Glenn is correct when he mentions the <base href> in the header - which is why you need the absolute paths. in php, a click rebuilds the page, and if the "url" is just a #anchor, then it will refer to the <base href> and append the #anchor to it - nence you returning each time to the home page. In a flat HTML site, the page loads once and is retained in the browser, so you don't need to use the absolute URL for anchors.

By the way, the mod Schoolboy referred to does handle exactly what you are coding; all you need to do for that is insert section tags into your description and it handles the tabbed styling automatically, instead of you putting all of the code in for each product.

gjh42:

By the way, the mod Schoolboy referred to does handle exactly what you are coding; all you need to do for that is insert section tags into your description and it handles the tabbed styling automatically, instead of you putting all of the code in for each product.

Yeah.... I can't understand the logic in doing this manually for each product... even if you have only 5 products, TPP is really neat.