Trying to create a collapsable product description

[PupStar]

Because of the design of my product_info page I need the ability to limit the amount of the product description that is shown.

 

I thought the way forward maybe a collapsable <div> so I did a bit of googling and came up with this:-

 

First I modified the query like so

 

$product_info_query = tep_db_query("select p.products_id, pd.products_name, substring(pd.products_description, 1, 450) as products_description, p.products_model, p.products_quantity, p.products_image, pd.products_url, p.products_price, p.products_tax_class_id, p.products_date_added, p.products_date_available, p.manufacturers_id from " . TABLE_PRODUCTS . " p, " . TABLE_PRODUCTS_DESCRIPTION . " pd where p.products_status = '1' and p.products_id = '" . (int)$HTTP_GET_VARS['products_id'] . "' and pd.products_id = p.products_id and pd.language_id = '" . (int)$languages_id . "'");

 

basically I just replace the pd.products_description with substring(pd.products_description, 1, 450) as products_description

 

I then replaced

<?php echo stripslashes($product_info['products_description']); ?>

with

<div><a href="javascript://" onclick="showHide('eventbody');">read more ....</a></div>
<div id="eventbody" style="display:none;"><?php echo stripslashes($product_info['products_description']); ?></div>

 

Then in includes/template_top.php I added

<script language="javascript" type="text/javascript">
function showHide(div){
if(document.getElementById(div).style.display == 'none'){
document.getElementById(div).style.display = 'block';
}else{
document.getElementById(div).style.display = 'none';
}
}
</script>

 

Now the collapsable <div> works a treat and only shows the required amount of characters from the product_description. What I am not sure about is how to get the code to show the first 450 characters and then display the 'read more.....' link at the bottom and when clicked to display from character 451 onwards.

 

Regards

 

Mark

[burt]

A way to do it;

 

You can get the short bit, and the usual description

 

 

LEFT(pd.products_description, 450) as products_precis, pd.products_description

 

 

now you put the them both in div's

 

<div class="precis">
<?php echo $product_info['products_precis']; ?>
<br>
<a href="#" class="read_more">read more</a>
</div>
<div class="description">
<?php echo $product_info['products_precis']; ?>
</div>

 

and then

 

<script>
$(".description").hide();
$("a.read_more").click(function ( event ) {
event.preventDefault();
$(".precis").hide();
$(".description").show();
});
</script>

 

 

That can be cleaned up a lot, and it is untested.

[PupStar]

A way to do it;

 

You can get the short bit, and the usual description

 

 

LEFT(pd.products_description, 450) as products_precis, pd.products_description

 

 

now you put the them both in div's

 

<div class="precis">
<?php echo $product_info['products_precis']; ?>
<br>
<a href="#" class="read_more">read more</a>
</div>
<div class="description">
<?php echo $product_info['products_precis']; ?>
</div>

 

and then

 

<script>
$(".description").hide();
$("a.read_more").click(function ( event ) {
event.preventDefault();
$(".precis").hide();
$(".description").show();
});
</script>

 

 

That can be cleaned up a lot, and it is untested.

 

Thanks Gary,

 

It did not work until I changed:

 

<div class="description">
<?php echo $product_info['products_precis']; ?>
</div>

 

to

 

<div class="description">
<?php echo $product_info['products_description']; ?>
</div>

 

and it works like a charm.

 

now can I be cheeky and ask how I would incorporate a link at the end of the full product description to collapse it back to the short description :blush:

 

Thanks

 

Mark

[♥mattjt83]

<div class="precis">
<?php echo $product_info['products_precis']; ?>
<br>
<a href="#" class="read_more">read more</a>
</div>
<div class="description">
<?php echo $product_info['products_description']; ?>
<br />
<a href="#" class="read_less">read less</a>
</div>

 

<script>
$(".description").hide();

$(function(){

$(".read_more").click(function () {
$(".precis").hide();
$(".description").show();
return false;
});

$(".read_less").click(function () {
$(".description").hide();
$(".precis").show();
return false;
});

});
</script>

 

@@PupStar

[multimixer]

Could be problematic in case product description has any html tags, they could be left open, e.g. a <div> or <strong> or whatever, causing issues to the general layout

[PupStar]

@@mattjt83 - Thank you

 

@@multimixer - I will test it out George see what happens.

 

Mark

[burt]

@@PupStar

 

Doh, my mistake. Yes to the precis to description change...well noticed.

 

Also, you can strip the description of tags as so (do same for precis);

 

<?php echo strip_tags($product_info['products_description']); ?>

 

You can read more about strip_tags...

[PupStar]

@@PupStar

 

Doh, my mistake. Yes to the precis to description change...well noticed.

 

Also, you can strip the description of tags as so (do same for precis);

 

<?php echo strip_tags($product_info['products_description']); ?>

 

You can read more about strip_tags...

 

@@burt,

 

If I run into trouble with any html tags.

 

Thanks

 

Mark

[burt]

The only issue here is the the precis and the description contain the same first 450 characters. I'll think about it.

[PupStar]

@@burt

 

I thought the same thing as I suppose it will be seen as duplicate content by the search engines.

[burt]

LEFT(pd.products_description, 450) as products_precis,
SUBSTRING(pd.products_description FROM 450) as products_more,

 

and

 

 

<div>
<?php echo $product_info['products_precis']; ?>
<span class="description">
 <?php echo $product_info['products_more']; ?>
</span>
<p class="readmore">More</p>
</div>

<script>
 $('span.description').hide();
 $('.readmore').click(function () {
   $(this).text(function (i, thetext) {
     return thetext == "Less" ? "More" : "Less";
   });
   $('span.description').toggle();
 });
</script>

 

could be better. Untested.

[PupStar]

@@burt

 

Tried and tested and after adding a bit of styling to the more/less link it works great with no duplicate content (w00t)

 

Truly an oscommerce great!

 

Thanks

[PupStar]

@@burt

 

Hi Gary, just one thing I have noticed with the code is that when you click 'read less' it does not revert back to 'read more' .

 

Would you have a quick hack to resolve this?

 

Thanks

 

Mark