Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations SkipVought on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Getting "More..." functionality working 1

Status
Not open for further replies.
M3Fan

M3Fan

Programmer
Dec 28, 2001
73
0
0
US
Does anyone know how to hide part of an article or section of text and have it appear when someone clicks "more...". For example, I have an explanation like this on the page:

This is an article about how the human spirit More..


When they click on "More" the rest of the paragraph appears below, Like this:

This is an article about how the human spirit
lives on in native american culture


There has to be an easy function for this somewhere!!!

HELP!
 
Sort by date Sort by votes
yes:

Part of article text...blah...
<br />
<a href=&quot;#&quot; onclick = &quot;(more.style.display == 'none')?more.style.display = '':more.style.display = 'none';&quot;>More...</a>
<div id=&quot;more&quot; style=&quot;display:none;&quot;>...the rest of the text.</div>





======================================

if (!succeed) try();
-jeff
 
Upvote 0 Downvote
You could use CSS along with a JavaScript function. For example, here's the CSS:

p:first-line {
display: block ! important;
}
p {
display: none;
}

Then, use this JavaScript code:

function chgShow(evt) {
var e=new Object();
e.hit=(evt)?e.target:event.srcElement;
if(e.hit.style.display==&quot;none&quot;) e.hit.style.display=&quot;block&quot;;
} HTMLParagraphElement.addEventListener(&quot;click&quot;,chgShow,false);

That way, when the user clicks on the first line the rest of the paragraph should be shown.

Note: IE6 (I think), NN6+, and Mozilla 1.0+.

Hope that helps!

Happy coding! :)
 
Upvote 0 Downvote
I have an error in my previous post. Change this line:

e.hit=(evt)?e.target:event.srcElement;

...to this:

e.hit=(evt)?evt.target:event.srcElement;

Hope that helps!

Happy coding! :)
 
Upvote 0 Downvote
You can do it like this:
add a link that calls showIt() function:

function showIt(element) {
document.getElementById(element).style.visibility = &quot;visible&quot;;
}

function hideIt(element) {
document.getElementById(element).style.visibility = &quot;hidden&quot;;
}


<a href=&quot;#&quot; onclick=&quot;showIt('one')&quot;>more...</a>
<p id=&quot;one&quot;>
t e x t
<a href=&quot;#&quot; onclick=&quot;hideIt('one')&quot;>close</a>
</p>

This works everywhere except NN4.x
good luck
 
Upvote 0 Downvote
Thank you SO MUCH. I will try out these methods. My mind has been off of javascript lately so I couldn't think of a way :p

Thanks again, this is great input.
 
Upvote 0 Downvote
here is a nice example of a switchDisplay function :)

<html>
<head>
<title>switch Display</title>
<script>
function switchDisplay(id)
{
var elm = document.getElementById(id);
elm.style.display = (elm.style.display == 'none') ? 'block' : 'none' ;
}
</script>
</head>
<body>

<a href=&quot;#&quot; onclick=&quot;switchDisplay('myDiv')&quot;>more</a>
<div id=&quot;myDiv&quot; style=&quot;display:none;&quot;>
Here a pile of text or html
Here a pile of text or html
Here a pile of text or html
Here a pile of text or html
Here a pile of text or html
Here a pile of text or html
Here a pile of text or html
Here a pile of text or html
Here a pile of text or html
Here a pile of text or html
Here a pile of text or html
Here a pile of text or html
Here a pile of text or html
Here a pile of text or html
Here a pile of text or html
</div>

</body>
</html> Gary Haran
 
Upvote 0 Downvote
It looks like the only way to do this is to hide a block element. Any ideas on how to make this work without the block element reserving blank space when it's hidden? For example, the hidden text would push down everything below it when you click more... .

So instead of

This is a great article on fishing. more...
(Blank space where hidden block is)
(Blank space where hidden block is)
(Blank space where hidden block is)
This is another really good article. more...


You would instead have this:

This is a great article on fishing. more...
This is another really good article. more...


 
Upvote 0 Downvote
Then you'll need to add z-index property with (probably) absolute positioning of a hiding block.

However I personally don't see all this much useful. I prefer (as an ordinary user) to see everything from the beginning, without being required to click somewhere and looking at something that suddenly appear on the screen.

&quot;Read more&quot; thing is usually used to save space on a page and make it smaller in size so it loads faster. What you do is loosing all advantages of this technique and only bring disadvantages.
You load all the text at once anyway, so why not to show it from the very start? Unfortunately, lots of developers forget about usability and don't look at their works from another side - how user see their works.

xutopia, thanks for reminding about xxx?xxx:xxx thing, I forgot about it. The scripts that have it are very elegant by my opinion. M3Fan, you can adjust my function using this, so there'll be only one function instead of two.

good luck
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

AbidingDude
  • Locked
  • Question
Where Does The &quot;name&quot; Attribute Stand?
Replies
1
Views
68
gmmastros
gmmastros
tonynsx
  • Locked
  • Question
document.getElementById(&quot;main&quot;).innerHTML not working
Replies
1
Views
62
ggriffit
ggriffit
HansMaulwurf
  • Locked
  • Question
AJAX not working after database migration from MySQL to SQL Server ( Undefined index)
Replies
0
Views
47
HansMaulwurf
HansMaulwurf
rogerte
  • Locked
  • Question
Javascript updating form control not working
Replies
3
Views
79
rogerte
rogerte
JRB-Bldr
  • Locked
  • Question
innerHTML onclick() functionality
Replies
2
Views
50
JRB-Bldr
JRB-Bldr

Part and Inventory Search

Sponsor

Back
Top