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:

 
Linksys Wireless Notebook Kit - Router and PC Card

Linksys

Linksys Wireless Notebook Kit - Router and PC Card
P/N: LINK105A

List Price:

$212.44

Our Price:

$115.04 On Sale Now

You Save:

$97.40 (45.8%)

Great Value !


 

XLEcom Demonstration (code: 60510)

Read More »


Description:
Let Linksys jump-start your wireless network! This Wireless-B Network Kit for Notebooks provides you with a Wireless Access Point Router (the heart of your network), and a Wireless Notebook Adapter to get your PC connected, quick and easy.

The Wireless Router lets you securely share your DSL or Cable Modem Internet connection with all the computers in the house, both wireless and wired. You can connect four computers directly to the Router by Ethernet cables, and daisy-chain out to more hubs and switches to create as big a network as you need.

Or, use the Router's built-in Wireless Access Point to connect your PC to the network without stringing any wires. That's where the Wireless Notebook Adapter comes in. Just plug it into your notebook through a PC Card slot, and you're ready to go. Wireless networking doesn't get any easier."

"Of course, you can connect more computers to the Router and your high-speed Internet link -- just provide a wired or wireless network adapter for each one. And once your computers are connected to the Router, they can communicate with each other too, sharing resources like printers and all kinds of files -- music, digital pictures, and documents.

To protect your data and privacy, all wireless communications can be protected by 128-bit encryption, while the Router helps keep Internet intruders out of your computers. It's all easier than you think -- the included Setup Wizards walk you through configuring the Router and Adapter, step by step.

With the Wireless-B Network Kit for Notebooks, you're ready to start sharing printers, files, and your Internet connection -- with Linksys.


• Features Complete solution includes an Internet-sharing Wireless Router and a Wireless Adapter for your notebook
• Router shares a high-speed cable or DSL Internet connection and other resources with both wired and wireless PCs
• Wireless communications at up to 11Mbps data rate -- protected by 128-bit encryption
• Included Setup Wizards take you through configuration, step by step

 

View a Demonstration Website

Download the Code

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.