how to hide and show text with jquery

jquery Developing online stores while attempting to optimize for conversion is a breeding ground for invention and progression. One issue several store owners are guilty of is over loading their shopping cart with walls of text regarding policies, shipping rules, and (hopefully) clear contact information. While this is all relevant information, visual appeal is the key to converting visitors into customers. One solution I have developed is a simple ‘show/hide’ script written in jQuery that provides a header sentence that is hidden until clicked upon expanding your policy information. Use this to clean up your latest shopping cart enhancements and enjoy the benefit of reduced cart abandonment.

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.js"></script>

<script type="text/javascript">
$(document).ready(function()
{
 //hide the all of the element with class msg_body
 $(".msg_body").hide();
 //toggle the componenet with class msg_body
 $(".msg_head").click(function()
 {
 $(this).next(".msg_body").slideToggle(600);
 });
});
</script> 

<p class="msg_head"> (click to read more) </p>
<div class="msg_body">
I'm text that is hidden until the header is is clicked.
</div>

 

I myself use this implementation frequently if information is needed in the cart but space is limited. A word of caution; do not to let this idea enable over saturation of content and information. Customers want the basic information and quick shout-outs on topics like returns, warranties, and contact information. Links to these pages such as Policy and Shipping can give your customers the choice of reading your agreements or ignoring them to keep checking out. You do not want to freak a customer out by providing a ridiculous amount of information and policy that may in turn cause them to shop elsewhere like Amazon or Overstock. Just my two cents here, but this has been a proven tactic to help drive sales for store owners.

This entry was posted in web development and tagged , , . Bookmark the permalink.

One Response to how to hide and show text with jquery

  1. TMag says:

    very simple trick but great. I will try this. thanks.

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Spam protection by WP Captcha-Free