Page 1 of 1

Expand

Posted: Sun May 09, 2010 10:37 pm
by Smackie
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

Re: Expand

Posted: Mon May 10, 2010 1:00 pm
by kaszu
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
I guess there's nothing in Google, because answer is easy.

CSS

Code: Select all

/* All elements with class .hidden will be invisible to user */
.hidden {
    display: none !important;
}
HTML

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>
JS

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;
}

Re: Expand

Posted: Tue May 11, 2010 7:46 am
by debrah.h48
Thank you so much for this information.