Solved

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

Posted on 2007-11-23
2
348 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
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

Free Tool: Postgres Monitoring System

A PHP and Perl based system to collect and display usage statistics from PostgreSQL databases.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
HTML question 2 25
Add somewhat of a wildcard to your javascript 12 30
web page freezes after ajax post 7 48
center navbar (navigation menu) on web page 3 19
Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
Have you tried to learn about Unicode, UTF-8, and multibyte text encoding and all the articles are just too "academic" or too technical? This article aims to make the whole topic easy for just about anyone to understand.
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

749 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