?
Solved

Using Javascript / JQuery for an Expanding and Collapsing Text Description (Preview & Read More link)

Posted on 2007-11-23
2
Medium Priority
?
370 Views
Last Modified: 2013-11-19
I am using a basic javascript solution for the purpose of displaying a 'short truncated description text' by default, with a '[Read More]' link appended to the end of it.  If a user clicks the read more link, the short preview description is replaced with the full description text (no page reloads etc).  However, the transition is quite dull, simply toggling between the two.  I would like to make it a more smoother and slicker looking transition effect.. perhaps a slightly slower expanding/collapsing effect via the JQuery library rather than the instant 'replace' effect currently employed.

The code I am currently using is attached.

Please note that there will always be two instances of the description in the html if the 'read more' link is ever shown.  This is because the server application controls the character/word count for preview purposes.

So basically, the question is, can you please provide an example using JQuery to toggle between the short and full description div elements, but rather than making an instant switch, to add a smooth transition/slide effect.

Thank you.
<script type="text/javascript">
function ToggleAttrib(name, subtype) {
 if (subtype == "a") {
 document.getElementById(name + "_a").style.display = "none";
 document.getElementById(name + "_b").style.display = "block";
 } else if (subtype == "b") {
 document.getElementById(name + "_a").style.display = "block";
 document.getElementById(name + "_b").style.display = "none";
 }
}
</script>
#################################
 
<div id="divReadMore_a">
<p class="description">
### Truncated description appears here ###
<a><span ID="spanReadMore" runat="server" class="linkreadmore" onclick="ToggleAttrib('divReadMore', 'a')"> [Read More] </span></a>
</p></div>
 
<div id="divReadMore_b" style="display: none;">
<p class="description">### Full description appears here ###
<a><span ID="spanMinimize" runat="server" class="linkshowless" onclick="ToggleAttrib('divReadMore', 'b')"> [Minimize] </span></a></p></div>
 
#################################

Open in new window

0
Comment
Question by:thyros
2 Comments
 
LVL 30

Accepted Solution

by:
VirusMinus earned 2000 total points
ID: 20339890
here you go.

latest packed jquery library from here:

http://code.google.com/p/jqueryjs/downloads/detail?name=jquery-1.2.1.pack.js
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 
<html>
<head>
<title>Untitled</title>
<style>
body{font:normal 76% Tahoma}
p{margin:10px}
</style>
<script src="src/jquery-1.2.1.pack.js" type="text/javascript"></script>
<script type="text/javascript">
function ToggleAttrib(name, subtype) {
 if (subtype == "a") {
	 $('#' + name + "_a").hide();
	 $('#' + name + "_b").show("slow");
 } else if (subtype == "b") {
	 $('#' + name + "_a").show("slow");
	 $('#' + name + "_b").hide();
 }
}
</script>
 
</head>
 
<body>
 
#################################
<div id="divReadMore_a">
<p class="description">
### Truncated description appears here ###
<a><span ID="spanReadMore" runat="server" class="linkreadmore" onclick="ToggleAttrib('divReadMore', 'a')"> [Read More] </span></a>
</p></div>
 
<div id="divReadMore_b" style="display: none;">
<p class="description">### Full description appears here ###
<a><span ID="spanMinimize" runat="server" class="linkshowless" onclick="ToggleAttrib('divReadMore', 'b')"> [Minimize] </span></a></p></div>
#################################
 
</body>
</html>

Open in new window

0
 

Author Comment

by:thyros
ID: 20343947
Thanks for this,  this is excellent.  Here are some notes on my experience implementing it;

If anyone is wondering, I didn't have to change the html div containers holding the description itself, I only had to update the javascript file with the new function.  (I spent a few minutes to see if there were any code changes! :)

Examining the javascript, there is a section like .show("fast") which has the 'expanding' effect, and valid values for the speed are "slow" "medium" "fast".  This was great, but the animation effect was not as slick as I would have hoped, because the text itself was moving about and a little bit jittery, so 'expanding' is probably a good word to describe it.  (a bit like typing lots of text mega quick so the text is being written from the left to right then down to next line and repeat across to the right).

However, I looked at a few jquery example sites, and I started experimenting.  I found something which was perfect for the purpose.  Rather than '.show()' another option is to use '.slideToggle()'.  This keeps the text fixed in it's place, thus treating the container like a block, and then sliding the view straight down.

One final niggle I had was the minimize link.  When clicking that to revert back to the original truncated description, it had the effect of causing a disappearing/flicker effect and then sliding down a small version of the description.  I understand this was due to there being two separate div containers and sliding straight back up is not straightforward and more suited to an 'accordian' type effect.  However, I found that using the simple '.toggle()' for the minimize got rid of the flicker, and 'instantly' reverts back to the preview text (without sliding animation) which I found to be more neater.

The exact settings I used which I found to be optimal for this purpose are attached in the snippet below.  I merely changed the '.show()' to '.slideToggle("medium")' and '.toggle()' respectively for differing transition effects.

Once again, thanks for this solution..  I am a javascript newb so I never would have figured it out on my own, appreciate it.

Peace.
<script type="text/javascript">
function ToggleAttrib(name, subtype) {
 if (subtype == "a") {
         $('#' + name + "_a").hide();
         $('#' + name + "_b").slideToggle("medium");  // can be '.show' or '.slideToggle' or '.toggle' etc
 } else if (subtype == "b") {
         $('#' + name + "_a").toggle();
         $('#' + name + "_b").hide();
 }
}
</script>

Open in new window

0

Featured Post

How to Use the Help Bell

Need to boost the visibility of your question for solutions? Use the Experts Exchange Help Bell to confirm priority levels and contact subject-matter experts for question attention.  Check out this how-to article for more information.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Originally, this post was published on Monitis Blog, you can check it here . In business circles, we sometimes hear that today is the “age of the customer.” And so it is. Thanks to the enormous advances over the past few years in consumer techno…
In this blog, we’ll look at how improvements to Percona XtraDB Cluster improved IST performance.
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…
The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…
Suggested Courses

839 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question