Skip to content

mivaecommerce/product-description

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

7 Commits
 
 
 
 

Repository files navigation

Product Description - Read More/Read Less

Simple js function to hide/show the full or shortened description for a product.

How To Use:
Copy and paste in the readMoreLess function code to a script that will be run on the page.

Ex: Calling readMoreLess on the .product-information--description .small class selector

$(document).ready(function() {
	readMoreLess($('.product-information--description .small'), 50);
});

Notes About the Function
The functionality is fairly straight-forward. The comments in the function should be able to explain what is going on if customization/expansion is needed. Basically, the first parameter should be a jQuery object and the second parameter should be the number of words to allow before the product description cut-off. The function will then hide/show the shortened or full product description based on the user's interaction with the 'Read More' and 'Read Less' links.

The function is also made to play nicely with CSS transitions if desired when the shortened and full product descriptions are show/hidden. The CSS selector to target for transitions is '.mva-read-more-desc'.

Ex:

.mva-read-more-desc {
	-webkit-transition: opacity 0.3s linear;
	transition: opacity 0.3s linear;
}

Note that opacity or font-size can be used for the transition-property, however, I find that opacity flows much smoother.

About

Read more for product description.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published