Link to home
Start Free TrialLog in
Avatar of thyros
thyros

asked on

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

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

ASKER CERTIFIED SOLUTION
Avatar of VirusMinus
VirusMinus
Flag of Australia image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of thyros
thyros

ASKER

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