Greetings,
I am making a ticket maker in php for a friends site. He wants the message to display 10 chars (which im doing in php) and then have a link that says Read More... which that parts done now left is javascript to exspand it and delete where it says read more. how can i do this in javascript
::example::
This is a read more...
then if they click read more... it would come out like..
This is a test
not sure on how to do this.. been searching on google for this but had no luck yet so i thought i would try the forums
Thank you
Smackie
Expand
Moderator: General Moderators
Re: Expand
I guess there's nothing in Google, because answer is easy.not sure on how to do this.. been searching on google for this but had no luck yet so i thought i would try the forums
CSS
Code: Select all
/* All elements with class .hidden will be invisible to user */
.hidden {
display: none !important;
}Code: Select all
<p>10 chars...</p>
<p class="hidden">This is full message, it has 'hidden' class, because we don't need to show this when page loads</p>
<a href="javascript://" onclick="readMore(this);">Read more, calls JS function readMore</a>Code: Select all
function readMore(node) {
//node refers to A element
var p_long = previousElement(node); //get P with class hidden (long message)
var p_short = previousElement(p_long); //get P with 10 characters
node.className = 'hidden'; //Hide "Read more" link
p_short.className = 'hidden'; //hide short message
p_long.className = ''; //show long message
}
//This is a helper function to get previous element, because
//ELEMENT.previousSibling will return any sibling (Comment, TextNode, HTMLNode), but we
//need only HTMLNode
function previousElement(node) {
node = node.previousSibling;
while (node && node.nodeType != 1) {
node = node.previousSibling;
}
return node;
}
-
debrah.h48
- Forum Newbie
- Posts: 3
- Joined: Tue May 11, 2010 7:43 am
Re: Expand
Thank you so much for this information.