How to make Dynamically Shortened Text With "Show More"

Question

Hi there! i want to know how to make dynamically shortened text with show more or read more in my website using HTML 5 pages  or ASP.NET ?
example like these paragraphs 
Lorem Ipsum är en utfyllnadstext från tryck- och förlagsindustrin. Lorem ipsum har varit standard ända sedan 1500-talet, när en okänd boksättare tog att antal bokstäver och blandade dem för att göra ett provexemplar av en bok. Lorem ipsum har inte bara överlevt fem århundraden, utan även övergången till elektronisk typografi utan större förändringar. Det blev allmänt känt på 1960-talet i samband med lanseringen av Letraset-ark med avsnitt av Lorem Ipsum, och senare med mjukvaror som Aldus PageMaker.
Det är ett välkänt faktum att läsare distraheras av läsbar text på en sida när man skall studera layouten. Poängen med Lorem Ipsum är att det ger ett normalt ordflöde, till skillnad från "Text här, Text här", och ger intryck av att vara läsbar text. Många publiseringprogram och webbutvecklare använder Lorem Ipsum som test-text, och en sökning efter "Lorem Ipsum" avslöjar många webbsidor under uteckling. Olika versioner har dykt upp under åren, ibland av olyckshändelse, ibland med flit (mer eller mindre humoristiska).
I motsättning till vad många tror, är inte Lorem Ipsum slumvisa ord. Det har sina rötter i ett stycke klassiskt litteratur på latin från 45 år före år 0, och är alltså över 2000 år gammalt. Richard McClintock, en professor i latin på Hampden-Sydney College i Virginia, översatte ett av de mer ovanliga orden, consectetur, från ett stycke Lorem Ipsum och fann dess ursprung genom att studera användningen av dessa ord i klassisk litteratur. Lorem Ipsum kommer från styckena 1.10.32 och 1.10.33 av "de Finibus Bonorum et Malorum" (Ytterligheterna av ont och gott) av Cicero, skriven 45 före år 0. Boken är en avhandling i teorier om etik, och var väldigt populär under renäsanssen. Den inledande meningen i Lorem Ipsum, "Lorem Ipsum dolor sit amet...", kommer från stycke 1.10.32.
Den ursprungliga Lorem Ipsum-texten från 1500-talet är återgiven nedan för de intresserade. Styckena 1.10.32 och 1.10.33 från "de Finibus Bonorum et Malorum" av Cicero hittar du också i deras originala form, åtföljda av de engelska översättningarna av H. Rackham från 1914.

Answer 1

Moved to the main Dreamweaver support forum.
There are several ways you could approach this. Here's one you might try:
Give the first paragraph an ID, such as "first", and wrap the paragraphs you want to hide in a <div> with another ID, such as "more". Then add the following block of JavaScript just before the closing </body> tag of the page:
<script>
var first = document.getElementById('first'),
     more = document.getElementById('more'),
     trigger = document.createElement('span');
trigger.id = 'trigger';
trigger.innerHTML = 'Show less';
first.appendChild(trigger);
function toggleDiv() {
  var state = more.className,
       text = trigger.innerHTML;
  more.className = (state == 'open') ? 'closed' : 'open';
  trigger.innerHTML = (text == 'Show more') ? 'Show less' : 'Show more';
toggleDiv();
if (trigger.addEventListener) {
    trigger.addEventListener('click', toggleDiv, false);
} else if (trigger.attachEvent) {
  trigger.attachEvent('onclick', toggleDiv);
} else {
  trigger.onclick = toggleDiv;
</script>
This gets references to the "first" paragraph and the "more" <div>. It also creates a <span> with the ID "trigger" that's appended to the "first" paragraph. The rest of the script defines a function called toggleDiv(), which toggles the "more" <div> open and closed, and changes the text in the "trigger" <span>.
You also need to create the following style rules for the various elements:
<style>
#trigger {
    text-decoration: underline;
    color: blue;
    cursor: pointer;
#more {
    transition: ease-out .7s;
    overflow: hidden;
#more p:first-child {
    margin-top: 0;
#more.closed {
    height: 0;
    -webkit-transform: translateY(-600px);
    transform: translateY(-600px);
#more.open {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    max-height: 600px;
#more + p {
    margin-top: 0;
</style>
This solution hides the text and creates the "trigger" <span> only if JavaScript is enabled in the browser. It should work in all browsers, including Internet Explorer 8 and earlier.