Solved

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

Posted on 2007-11-23
2
355 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
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

Salesforce Has Never Been Easier

Improve and reinforce salesforce training & adoption using WalkMe's digital adoption platform. Start saving on costly employee training by creating fast intuitive Walk-Thrus for Salesforce. Claim your Free Account Now

Question has a verified solution.

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

Browsers only know CSS so your awesome SASS code needs to be translated into normal CSS. Here I'll try to explain what you should aim for in order to take full advantage of SASS.
International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
The viewer will learn how to count occurrences of each item in an array.
This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.

688 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