Make Your Product Descriptions Expandable and Collapsible
Make Your Product Descriptions Expandable and Collapsible
If utilizing long Items Descriptions within your Product Ads make your Ad pages to look overwhelming with too much information, then try using the following Expandable / Collapsible feature on your site. It will initially hide all the long Item Descriptions on a page until a user mouse clicks on the the Read more » link as shown in the example below:
Expandable / Collapsible Ad:
|
View a Demonstration Website
Download the Code
Download: XLEcom-expand-collapse.zip (1.33 MB)
Please read the "How to Add the Expandable / Collapsible feature to your website" information below to understand How this all works !
The two files below are not necessary but will give you a head start if needed. Both are included in the download file:
XLEcom-expand-collapse.xls
This is a modified version of the XLEcom program file containing the Expandable and Collapsible Style and Javascript code.
This file only includes the added the Style and JavaScript code as mentioned in the Part 1 section below. For the Part 2 section, you must add the span / div tag code to your Item Descriptions as mentioned below. You can use the following Conversion.xls utility file to help you with the code addition.
Note: This is just the Excel program file alone, version 5.3, without all the support asset files. If you previously performed a full installation of the program which includes all the support asset files, then you only need this single file.
Conversion.xls
This utility will help you encapsulates your Item Descriptions within the span / div tag code as mentioned in Part 2 below.
How to Add the Expandable / Collapsible feature to your website
The are two parts you need to do. The first part is to add the Expandable and Collapsible Style and JavaScript code to the XLEcom program, and the second part is to encapsulate all your Item descriptions with the span / div tag code.
Part 1 - Adding the Expandable and Collapsible Style and JavaScript code to the XLEcom program
The first thing you need to do is add the following code to your XLEcom program's Add_Code sheet. You can access the Add_Code sheet by activating the Additional Code Feature. You want to add the code to the Product Ad Pages section labeled "Before the </head> end tag". The screen shot below shows the added code.
Style and JavaScript code to add to the Add_Code sheet:
<style type="text/css"><!--
.expand { cursor: pointer; display: block; font-family: Tahoma,Verdana,Arial,Helvetica,Sans-serif,sans-serif; font-size: 10pt; color: #0000CD; text-decoration: underline;}
//--></style>
<script type="text/javascript">if(document.getElementById&&!document.all){ns6=1;}else{ns6=0;}var wbrowser=navigator.userAgent.toLowerCase();var operabrowser=(wbrowser.indexOf('opera')!=-1);var folder='';function expand(contents){if(ns6==1||operabrowser==true){folder=contents.nextSibling.style;}else{folder=document.all[contents.sourceIndex+1].style;}if (folder.display=='none'){folder.display='';}else{folder.display='none';}}</script>
Part 2 - Encapsulate all your Item descriptions with the span / div tag code.
Next, you need to encapsulate your Item Descriptions within the following span / div tag code as follows:
<span class="expand" onclick="expand(this); return false;">Read More »</span><div style="display: none"><br>
Item Description
</div>
If you already have an XLEcom website, then you can simply encapsulate all your current Item Descriptions within the span / div tag code using the following method:
(1) Copy all your Item Descriptions to a new workbook. This would mean copying the entire Database column H to column A of a new workbook. If you do this properly, your first Item Description should be in cell A3 of the new workbook.
(2) Add the following formula to the right of the Item Descriptions in column C, cell C3:
="<span class=""expand"" onclick=""expand(this); return false;"">Read More »</span><div style=""display: none""><br>"&A3&"</div>"
(3) Copy the formula in cell C3 downwards to convert all your Item Descriptions in column A.
(4) Select Column C and copy it to memory. Next, switch back to the XLEcom program's Database sheet and select colum H. Paste the converted Item Descriptions into column H using the Paste Special >> Values command. Do not use the standard paste command.
That's it. All you have to do is republish your website.
Recent comments