Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    New Coder
    Join Date
    Apr 2011
    Posts
    95
    Thanks
    13
    Thanked 1 Time in 1 Post

    expand text "read more"

    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?

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,667
    Thanks
    22
    Thanked 1,826 Times in 1,810 Posts
    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.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #3
    Regular Coder
    Join Date
    Sep 2011
    Posts
    327
    Thanks
    3
    Thanked 35 Times in 35 Posts
    Quote Originally Posted by Excavator View Post
    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>
    Last edited by Frankie; 02-03-2013 at 09:43 PM.
    Frank

    How to: Target IE in, Position in, Center in, Create a Fixed ('Sticky') Footer with, and Create a Drop-Down/Fly-Out Menu with CSS: Website Laten Maken Amsterdam.

  • #4
    Regular Coder hdewantara's Avatar
    Join Date
    Aug 2009
    Location
    Jakarta, Indonesia.
    Posts
    328
    Thanks
    9
    Thanked 49 Times in 48 Posts
    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>

  • #5
    New Coder
    Join Date
    Jan 2013
    Posts
    16
    Thanks
    0
    Thanked 1 Time in 1 Post
    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.

  • #6
    Regular Coder
    Join Date
    Sep 2011
    Posts
    327
    Thanks
    3
    Thanked 35 Times in 35 Posts
    Quote Originally Posted by alliv105 View Post
    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...
    Frank

    How to: Target IE in, Position in, Center in, Create a Fixed ('Sticky') Footer with, and Create a Drop-Down/Fly-Out Menu with CSS: Website Laten Maken Amsterdam.

  • #7
    New Coder
    Join Date
    Jan 2013
    Posts
    16
    Thanks
    0
    Thanked 1 Time in 1 Post
    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.


  •  

    Posting Permissions

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