SitePoint Sponsor |
|
User Tag List
Results 1 to 2 of 2
-
Aug 31, 2007, 15:55 #1
- 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?
-
Aug 31, 2007, 18:14 #2
- 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