SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Member
    Join Date
    Jun 2004
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Collapsing and expanding a div to a set size

    I've looked through and found quite a few bits of code for showing and hiding a div and this is along those lines but a bit different.

    I'd like for a div to show the first two lines of text, lets say thats at a height of 50px, and then when a button is pressed the div expands to show the rest of the text which will be variably long. Basically I want to show a text preview before showing the entire passage. Whats the best way to go about that?

  2. #2
    SitePoint Evangelist hexburner's Avatar
    Join Date
    Jan 2007
    Location
    Belgium
    Posts
    591
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Here's something to get you started.
    IMO, it's long for what it does, so if I were you, I'd narrow it down a bit.

    HTML Code:
    <style type="text/css">
        <!--
        div {
            overflow: hidden;
        }
        -->
    </style>
    <script language="javascript" type="text/javascript">
        <!--
        function collapse (id) {
            div = document.getElementById(id);
            div.style.height = '50px';
            btn = div.getElementsByTagName('a')[0];
            btn.href = "javascript:expand('"+id+"');";
            btn.innerHTML = 'Expand';
        }
    
        function expand (id) {
            div = document.getElementById(id);
            div.style.height = 'auto';
            btn = div.getElementsByTagName('a')[0];
            btn.href = "javascript:collapse('"+id+"');";
            btn.innerHTML = 'Collapse';
        }
        -->
    </script>
    <div id="testdiv" name="testdiv">
        <a href="javascript:collapse('testdiv');">Collapse</a>
        Lorem<br/>
        Ipsum<br/>
        blablabla...
    </div>
    FOR SALE: 1 set of morals, never used, will sell cheap


Bookmarks

Posting Permissions

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