www.webdeveloper.com
Results 1 to 6 of 6

Thread: [RESOLVED] Only show first few lines of <div>

  1. #1
    Join Date
    Feb 2010
    Location
    England
    Posts
    122

    resolved [RESOLVED] Only show first few lines of <div>

    I'm having a problem creating a script that hides all but the first few lines of a <div>.

    I would like only the first 3 lines to be shown, and then a 'Read more...' link, with the rest of the <div> hidden.
    When the user clicks on the 'Read More...' link, the <div> expands to show its full content, with a 'Read Less...' link at the end.
    When the user clicks 'Read Less...', the <div> goes back to just showing the first 3 lines.

    I am assuming this is a CSS & Javascript requirement, but cannot figure out where to start.

    Thanks in advance.

    Edit: If this can be done using a .class CSS tag, that would be great, as I will probably need it on more than one DIV. Thanks.
    Last edited by Haze1434; 08-06-2010 at 06:13 AM.

  2. #2
    Join Date
    Mar 2010
    Posts
    2,803
    maybe use this as a guide:

    PHP Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"
    >
    <
    html xmlns="http://www.w3.org/1999/xhtml">
    <
    head>
    <
    title></title>
    <
    style type="text/css">
    <!--

    ul {
    list-
    style-typenone}
     
    .
    more_content {
    margin10px 0px 0px 50px;
    padding5px 5px 5px 5px;
    width200px;
    height100px;
    border1px solid black;
    overflowauto;
    displaynone}
     
    -->
    </
    style>
    <
    script type="text/javascript">

    function 
    showMore(link_id,elemId) {
        
    linkObj document.getElementById(link_id);
        
    //display the more content for this elemId
        
    document.getElementById(elemId).style.display='block';
        
    //change the links attributes to hide the more content
        
    linkObj.href 'javascript:hideMore("'+link_id+'","'+elemId+'")';
        
    linkObj.innerHTML "Show less";
    }
     
    function 
    hideMore(link_id,elemId) {
        
    linkObj document.getElementById(link_id);
        
    //hide the more content for this elemId
        
    document.getElementById(elemId).style.display='none';
        
    //change the links attributes to show the more content
        
    linkObj.href 'javascript:showMore("'+link_id+'","'+elemId+'")';
        
    linkObj.innerHTML "Show more";
    }
     
    </script>
     
    </head>
    <body>
    <div>
        <ul>
            <li>
               <div>
               <div>Teaser 1 text</div>
                   <a id="m1_link" href="javascript:showMore('m1_link','m1_cont')">Show more</a>
                   <div id="m1_cont" class="more_content">More 1 content</div>
               </div>
            </li>
            <li>
               <div>
               <div>Teaser 2 text</div>
                   <a id="m2_link" href="javascript:showMore('m2_link','m2_cont')">Show more</a>
                   <div id="m2_cont" class="more_content">More 2 content</div>
               </div>
            </li>
            <li>
               <div>
               <div>Teaser 3 text</div>
                   <a id="m3_link" href="javascript:showMore('m3_link','m3_cont')">Show more</a>
                   <div id="m3_cont" class="more_content">More 3 content</div>
               </div>
            </li>
            <li>
                <div>
                <div>Teaser 4 text</div>
                   <a id="m4_link" href="javascript:showMore('m4_link','m4_cont')">Show more</a>
                   <div id="m4_cont" class="more_content">More 4 content</div>
               </div>
            </li>
        </ul>
    </div>
     
    </body>
    </html> 

  3. #3
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    <head>
    <title>read more</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    
    <script type="text/javascript">
    window.onload=function() {
    var read = document.body.getElementsByTagName('p');
    for(var i=0; i<read.length; i++) {
        if(read[i].className=='read') {
            read[i].className+=' less';
            
            var more=document.createElement('span');
            more.appendChild(document.createTextNode('Read more ...'));
            more.className='readmore';
            more.onclick=function(){moreLess(this);};
            read[i].appendChild(more);
            }
        }
    };
    
    function moreLess(obj) {
    var cn=obj.parentNode.className;
    var txt='';
    if(cn.indexOf('less')!=-1) {
    cn=cn.replace(/less/g,'more');
    txt='Read less ...';
    }
    else {
    cn=cn.replace(/more/g,'less');
    txt='Read more ...';
    }
    obj.parentNode.className=cn;
    obj.firstChild.data=txt;
    }
    </script>
    
    <style type="text/css">
    body {
    font-size:80&#37;;
    font-family:'Lucida Grande', Verdana, Arial, Sans-Serif;
    }
    .read {
    position:relative;
    width:25em;
    border:1px solid #9cf;
    padding:0.5em;padding-bottom:1.2em;
    } 
    .more {
    height:auto;
    }
    .less {
    height:4em; /* lines of text shown + link */
    overflow:hidden;
    }
    .readmore {
    position:absolute;
    width:25em;
    bottom:0;left:0;
    cursor:pointer;
    color:blue;
    background:#fff;
    padding:0 0 0 0.5em;
    }
    </style>
    
    </head>
    <body>
    <p class="read">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima.</p>
    <p class="read">Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Nam liber tempor *** soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipitlobortis nisl ut aliquip ex ea commodo consequat. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipitlobortis nisl ut aliquip ex ea commodo consequat. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Nam liber tempor *** soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.</p>
    </body>
    </html>

  4. #4
    Join Date
    Feb 2010
    Location
    England
    Posts
    122
    Fantastic!

    Thanks both, this is exactly what I was looking for!

  5. #5
    Join Date
    Aug 2011
    Posts
    2
    Excellent! thank you all, this code saved my day!!!

    • I have copied the code provided by Fang, I would like to display 2 lines text(including readmore link). Everyhting is working fine but the "Read more..." is diplaying on top of actual text means overlapping, I could not figure out the problem because I'm poor at css. (but Read less is diplaying correctly in the last line...) please help me what I need to chane. But one difference is I have paragraph inside the "td", does it make any difference?

      HTML Code:
      <TR>
      						<TD><p class="read" style="word-wrap: break-word; font-family: 'Arial'">blah blah blah blahblah blahblah 
      						blahblah blahblah blahblah blahblah blahblah blahblah blahblah blahblah blahblah blahblah blahblah 
      						blahblah blahblah blahblah blahblah blahblah blahblah blahblah blahblah blahblah blahblah blahblah 
      						blahblah blahblah blahblah blahblah blahblah blahblah blahblah blahblah blahblah blahblah blahblah 
      						blahblah blahblah blahblah blahblah blahblah blahblah blahblah blahblah blahblah blahblah blahblah 
      						blahblah blahblah blahblah blahblah blahblah blah</p>
      						</TD>
      					</TR>
    • If possible I would like to display the "Read more..." and "Read less..." at the end of the text in the last/same line, insead of next new line.

    to achieve these, What are the changes I need to make? Please help me ASAP...

    Your help is greatly appreciated.

    thanks,
    Sri.

  6. #6
    Join Date
    Aug 2011
    Posts
    2

    Please help to "only show fisrt few lines of text"...

    please help me if possible ASAP

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles