expand text "read more"

garevn · 02-03-2013, 10:00 AM

I want somehow to expand and collapse a text to a spesific area.
For example lets say i have a text of 5 rows and i want to show only 2 like:

Code:

1row
2row...read more

if u press "read more" then:

1row
2row
3row
4row
5row...read less

Is there a way to do that?

Excavator · 02-03-2013, 05:58 PM

Hello garevn,
There's a cool little jQuery script that does that nicely here.

You can google for lots more if that one doesn't suit you.

Frankie · 02-03-2013, 09:16 PM

Quote:

Originally Posted by Excavator

Hello garevn,
There's a cool little jQuery script that does that nicely here.

One doesn't need jQuery plus a plugin script for that -- there is a much easier way. Have a look at this: http://jsfiddle.net/NXpHe/. And here is the full code in one file:

Code:

<!DOCTYPE HTML>
<html>
<head>
     <title>Toggle Display Demo</title>
<script>
function toggleDisplay(id,a)
{
      var elaboration = document.getElementById(id);
      if (elaboration.style.display == "block")
      {
        elaboration.style.display = "none";
        if(a) a.innerHTML="Read more..."; // won't work with target=_self
      }
      else
      {
        elaboration.style.display = "block";
        if(a) a.innerHTML = "Fold in...";
      }
}
</script>
<style type="text/css">
    .toggleLink {
        color: red;
        text-decoration: underline;
    }
    .toggleLink:hover {
        cursor: pointer;
    }
    .elaboration {
        display: none;
    }
</style>
</head>
<body>
    <p>Lorem ipsum ... <span class="toggleLink" onclick="toggleDisplay('elaboration_1',this)">Read more...</span> <span class="elaboration" id="elaboration_1">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</span></p>
</body>
</html>

hdewantara · 02-04-2013, 07:06 PM

If you don't mind a bit of complicated structure,
and base the expanding/ collapsing not on a "press",
but on "focus" event, then let's see the following:

Code:

<html>
<head>
<style type="text/css">
	div + div > div{
		display: none;
	}
	div > a.readMore:focus{
		display: none;
	}
	div > a.readMore:focus + div{
		display: block;
	}
</style>
</head>
<body>
	<div>row #1...</div>
	<div>
		<span>row #2...</span>
		<a class="readMore" href="#">read more</a>
		<div>
			<div>row #3...</div>
			<div>row #4...</div>
			<div>
				<span>row #5...</span>
				<a href="#">read less</a>
			</div>
		</div>
	</div>
</body>
</html>

alliv105 · 02-04-2013, 10:59 PM

You don't really need to do much - it's very simple. Create a hidden div inside your HTML somewhere with the "extra" text, and also create a hidden form field with value="false" (or something of that nature, ie. yes/no). Keep the form field outside of the div. When the link is clicked, send it to a javascript function which will toggle the style settings of that originally hidden div element. In the function, read the value of the hidden text field. If it's "false", set the value to "true" and set the style settings on the div to "display:block". Vice versa.

Frankie · 02-05-2013, 02:23 AM

Quote:

Originally Posted by alliv105

You don't really need to do much - (....) Vice versa.

What exactly is it that makes you think that the OP would understand one word of what you wrote? S/he doesn't even know whether what s/he wants is possible...

alliv105 · 02-05-2013, 02:52 AM

My fault. My intention wasn't to give them the answer but to help them solve it themselves. Knowledge is power, and learning about divs, classes, javascript functions, and form fields is something well worth learning.