Solved

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

Posted on 2007-11-23
2
336 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 500 total points
Comment Utility
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
Comment Utility
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

What Security Threats Are You Missing?

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

Join & Write a Comment

SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
This article discusses four methods for overlaying images in a container on a web page
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.

763 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

Need Help in Real-Time?

Connect with top rated Experts

12 Experts available now in Live!

Get 1:1 Help Now