need script to expose more text

Discussion in 'Javascript' started by Randy Starkey, Jul 13, 2005.

  1. Hi,

    Does anyone know where I can get a script that show a little plus sign after
    a line of text, that when you click the plus sign, more text is revealed on
    that same page, like a continuing paragraph. This will be on a web page.

    Thanks!

    --Randy Starkey
     
    Randy Starkey, Jul 13, 2005
    #1
    1. Advertising

  2. Randy Starkey

    andrew Guest

    Very rough, but you can modify it as you see fit...

    <script type="text/javascript">
    function expand(elem) {
    elem.innerHTML = '-'
    document.getElementById('more').style.display = 'block'
    }
    </script>

    Start of text <a href="#" onclick="expand(this)">+</a>
    <div id="more" style="display:none">More text</div>

    "Randy Starkey" <> wrote in
    message news:...
    > Hi,
    >
    > Does anyone know where I can get a script that show a little plus sign
    > after a line of text, that when you click the plus sign, more text is
    > revealed on that same page, like a continuing paragraph. This will be on a
    > web page.
    >
    > Thanks!
    >
    > --Randy Starkey
    >
     
    andrew, Jul 13, 2005
    #2
    1. Advertising

  3. Thanks! I'll play with it.

    --Randy


    "andrew" <> wrote in message
    news:cKgBe.107730$HI.46216@edtnps84...
    > Very rough, but you can modify it as you see fit...
    >
    > <script type="text/javascript">
    > function expand(elem) {
    > elem.innerHTML = '-'
    > document.getElementById('more').style.display = 'block'
    > }
    > </script>
    >
    > Start of text <a href="#" onclick="expand(this)">+</a>
    > <div id="more" style="display:none">More text</div>
    >
    > "Randy Starkey" <> wrote in
    > message news:...
    >> Hi,
    >>
    >> Does anyone know where I can get a script that show a little plus sign
    >> after a line of text, that when you click the plus sign, more text is
    >> revealed on that same page, like a continuing paragraph. This will be on
    >> a web page.
    >>
    >> Thanks!
    >>
    >> --Randy Starkey
    >>

    >
    >
     
    Randy Starkey, Jul 13, 2005
    #3
  4. Randy Starkey

    ASM Guest

    Randy Starkey wrote:
    >
    > Does anyone know where I can get a script that show a little plus sign after
    > a line of text, that when you click the plus sign, more text is revealed on
    > that same page, like a continuing paragraph. This will be on a web page.


    <p onmouseover="t=this.childNodes[1].style; t.visibility='visible';"
    onmouseout="t.visibility='hidden';">
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
    <span style="visibility:hidden">Morbi a wisi. Mauris vulputate rutrum
    arcu.</span>

    --
    Stephane Moriaux et son [moins] vieux Mac
     
    ASM, Jul 13, 2005
    #4
  5. Randy Starkey

    ASM Guest

    Randy Starkey wrote:
    > Thanks! I'll play with it.


    it was so beurk :-(

    use of innerHTML
    use of DIVs

    <script type="text/javascript">
    function expand(elem) {
    var v = elem.firstChild.nodeValue;
    elem.firstChild.nodeValue = v=='[+]'? '[-]':'[+]';
    elem.parentNode.lastChild.style.visibility=v=='[+]'?'visible':'hidden';
    }
    </script>

    <p>Start of text
    <a href="#" onclick="expand(this); return false;">[+]</a><br>
    <span style="visibility:hidden">More text</span>
    </p>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
    <a href="#" onclick="expand(this); return false;">[+]</a>
    <span style="visibility:hidden">Morbi a wisi. Mauris vulputate rutrum
    arcu.</span>
    </p>

    --
    Stephane Moriaux et son [moins] vieux Mac
     
    ASM, Jul 14, 2005
    #5
  6. I'm lost on the french - I don't know JS at all - are they comments?

    --Randy


    "ASM" <> wrote in message
    news:42d5996b$0$1237$...
    > Randy Starkey wrote:
    >>
    >> Does anyone know where I can get a script that show a little plus sign
    >> after a line of text, that when you click the plus sign, more text is
    >> revealed on that same page, like a continuing paragraph. This will be on
    >> a web page.

    >
    > <p onmouseover="t=this.childNodes[1].style; t.visibility='visible';"
    > onmouseout="t.visibility='hidden';">
    > Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
    > <span style="visibility:hidden">Morbi a wisi. Mauris vulputate rutrum
    > arcu.</span>
    >
    > --
    > Stephane Moriaux et son [moins] vieux Mac
     
    Randy Starkey, Jul 14, 2005
    #6
  7. ASM <> writes:

    > it was so beurk :-(


    "beurk"?

    > use of innerHTML


    Actually, innerHTML is supported in more browsers than DOM methods.
    It's not the way to go for purity, and maybe not for future
    compatability (although I doubt we'll ever see another HTML browser
    that supports DOM and not innerHTML), but currently, it works.

    It's overkill for this case, though, since there is no markup in the
    "HTML" that is assigned.

    > use of DIVs


    What's wrong with div's?

    > <script type="text/javascript">
    > function expand(elem) {
    > var v = elem.firstChild.nodeValue;
    > elem.firstChild.nodeValue = v=='[+]'? '[-]':'[+]';
    > elem.parentNode.lastChild.style.visibility=v=='[+]'?'visible':'hidden';


    Have you tested this in, e.g., Mozilla? You are expecting the last
    child node of the "p" element to be the "span" element. More likely,
    it will be a text node containing the newline between "</span>" and
    "</p>".

    > }
    > </script>
    >
    > <p>Start of text
    > <a href="#" onclick="expand(this); return false;">[+]</a><br>


    Why use a link, especially one with a non-sensical href like "#"
    (something to be avioded generally). The link will make no sense
    if javascript is disabled. For affordability to clicking, I would
    prefer a button, not a link, since it doesn't link to anything.
    (A good hint that one is misusing links is that they have no
    meaningful; href :)

    Using a link with an onclick also fails quite visibly if the script
    errors, as the href is followed then (because you never reach the
    "return false"). That is why it's better to use an object with no
    inherent behavior, instead of trying to override it.

    Using a link *does* make sense, if it links to a page with the
    entire text visible. Then it would be a fall-back for javascript
    disabled browsers.

    > <span style="visibility:hidden">More text</span>


    You use "visibility" to hide the content. While it works in more
    browsers than using "display" (e.g., Netscape 4 and Opera 6 and
    other static DOM browsers), it also means that the hidden content
    still takes up space in the flow of the page, which makes hiding
    it pretty irrelevant.

    So, my suggestion would be something like:
    ---
    <script type="text/javascript">
    function getElement(id) {
    return document.getElementById ?
    document.getElementById(id) :
    document.all ?
    document.all[id] :
    null; // no need to fall back on Netscape here
    }

    function writeMoreButton(id) {
    document.write("<input class='moreButton' type='button' value='+'",
    " onclick='toggleMore(this,\"", id, "\");'>");
    }

    function toggleContent(id, visible) {
    var elem = getElement(id);
    (elem.style||elem).display = visible?"":"none";
    }

    function toggleMore(button,id) {
    var expand = (button.value=="+");
    toggleContent(id, expand);
    button.value = expand ? "-" : "+";
    }
    </script>

    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
    eiusmod tempor incididunt ut labore et dolore magna aliqua.
    <span id="loremMore">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>
    <script type="text/javascript">
    writeMoreButton("loremMore");
    toggleContent("loremMore", false);
    </script>
    </p>
    ---
    You have to hide the element after it occurs in the file, but the
    button can be placed anywhere you want.

    /L
    --
    Lasse Reichstein Nielsen -
    DHTML Death Colors: <URL:http://www.infimum.dk/HTML/rasterTriangleDOM.html>
    'Faith without judgement merely degrades the spirit divine.'
     
    Lasse Reichstein Nielsen, Jul 14, 2005
    #7
  8. Lasse,

    So this creates a small button? Also, I don't understand the language at the
    end.

    --Randy

    "Lasse Reichstein Nielsen" <> wrote in message
    news:...
    > ASM <> writes:
    >
    >> it was so beurk :-(

    >
    > "beurk"?
    >
    >> use of innerHTML

    >
    > Actually, innerHTML is supported in more browsers than DOM methods.
    > It's not the way to go for purity, and maybe not for future
    > compatability (although I doubt we'll ever see another HTML browser
    > that supports DOM and not innerHTML), but currently, it works.
    >
    > It's overkill for this case, though, since there is no markup in the
    > "HTML" that is assigned.
    >
    >> use of DIVs

    >
    > What's wrong with div's?
    >
    >> <script type="text/javascript">
    >> function expand(elem) {
    >> var v = elem.firstChild.nodeValue;
    >> elem.firstChild.nodeValue = v=='[+]'? '[-]':'[+]';
    >> elem.parentNode.lastChild.style.visibility=v=='[+]'?'visible':'hidden';

    >
    > Have you tested this in, e.g., Mozilla? You are expecting the last
    > child node of the "p" element to be the "span" element. More likely,
    > it will be a text node containing the newline between "</span>" and
    > "</p>".
    >
    >> }
    >> </script>
    >>
    >> <p>Start of text
    >> <a href="#" onclick="expand(this); return false;">[+]</a><br>

    >
    > Why use a link, especially one with a non-sensical href like "#"
    > (something to be avioded generally). The link will make no sense
    > if javascript is disabled. For affordability to clicking, I would
    > prefer a button, not a link, since it doesn't link to anything.
    > (A good hint that one is misusing links is that they have no
    > meaningful; href :)
    >
    > Using a link with an onclick also fails quite visibly if the script
    > errors, as the href is followed then (because you never reach the
    > "return false"). That is why it's better to use an object with no
    > inherent behavior, instead of trying to override it.
    >
    > Using a link *does* make sense, if it links to a page with the
    > entire text visible. Then it would be a fall-back for javascript
    > disabled browsers.
    >
    >> <span style="visibility:hidden">More text</span>

    >
    > You use "visibility" to hide the content. While it works in more
    > browsers than using "display" (e.g., Netscape 4 and Opera 6 and
    > other static DOM browsers), it also means that the hidden content
    > still takes up space in the flow of the page, which makes hiding
    > it pretty irrelevant.
    >
    > So, my suggestion would be something like:
    > ---
    > <script type="text/javascript">
    > function getElement(id) {
    > return document.getElementById ?
    > document.getElementById(id) :
    > document.all ?
    > document.all[id] :
    > null; // no need to fall back on Netscape here
    > }
    >
    > function writeMoreButton(id) {
    > document.write("<input class='moreButton' type='button' value='+'",
    > " onclick='toggleMore(this,\"", id, "\");'>");
    > }
    >
    > function toggleContent(id, visible) {
    > var elem = getElement(id);
    > (elem.style||elem).display = visible?"":"none";
    > }
    >
    > function toggleMore(button,id) {
    > var expand = (button.value=="+");
    > toggleContent(id, expand);
    > button.value = expand ? "-" : "+";
    > }
    > </script>
    >
    > <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
    > eiusmod tempor incididunt ut labore et dolore magna aliqua.
    > <span id="loremMore">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>
    > <script type="text/javascript">
    > writeMoreButton("loremMore");
    > toggleContent("loremMore", false);
    > </script>
    > </p>
    > ---
    > You have to hide the element after it occurs in the file, but the
    > button can be placed anywhere you want.
    >
    > /L
    > --
    > Lasse Reichstein Nielsen -
    > DHTML Death Colors:
    > <URL:http://www.infimum.dk/HTML/rasterTriangleDOM.html>
    > 'Faith without judgement merely degrades the spirit divine.'
     
    Randy Starkey, Jul 14, 2005
    #8
  9. "Randy Starkey" <> writes:

    Please don't top post.

    > So this creates a small button?


    Yes, just a button with a "+" or "-" in it. If you want it styled,
    just use CSS and style the class "moreButton".

    > Also, I don't understand the language at the end.


    Lorem ipsum? Just the generic garble text. Read about it here:
    <URL:http://www.lipsum.com/>

    /L
    --
    Lasse Reichstein Nielsen -
    DHTML Death Colors: <URL:http://www.infimum.dk/HTML/rasterTriangleDOM.html>
    'Faith without judgement merely degrades the spirit divine.'
     
    Lasse Reichstein Nielsen, Jul 14, 2005
    #9
  10. Randy Starkey

    ASM Guest

    Lasse Reichstein Nielsen wrote:
    > ASM <> writes:
    >
    >>it was so beurk :-(

    >
    > "beurk"?


    BeuArk, Pfffft, Pzll, Prout, Sprrllt,
    as you like to say :p or [not too good] or [not elegant]

    >>use of innerHTML

    >
    > Actually, innerHTML is supported in more browsers than DOM methods.
    > It's not the way to go for purity, and maybe not for future
    > compatability (although I doubt we'll ever see another HTML browser
    > that supports DOM and not innerHTML), but currently, it works.


    All as text-align in css
    (this M$ malfunction pushing other navigators to support it)

    > What's wrong with div's?


    I'd read you must try to use other tags most of time,
    and, if really not possible to do other way,
    well ... at least ... by the end ... ok a div.

    >><script type="text/javascript">
    >>function expand(elem) {
    >> var v = elem.firstChild.nodeValue;
    >> elem.firstChild.nodeValue = v=='[+]'? '[-]':'[+]';
    >> elem.parentNode.lastChild.style.visibility=v=='[+]'?'visible':'hidden';

    >
    >
    > Have you tested this in, e.g., Mozilla?


    I did in FF, IE, Opera, Safari and Camino (on Mac 10.3.9)
    When I give some code on a ng, usually I tested it.
    If not, I say it. (not tested)
    in JS a coma or quote is so easily forgotten ...

    > You are expecting


    I expect nothing
    You have to do :
    put the hidden-to-visible part of text in a span in end of p
    if you expect to use this function :)

    > the last
    > child node of the "p" element to be the "span" element. More likely,
    > it will be a text node containing the newline between "</span>" and
    > "</p>".


    of course, if way of doing is not respected ... where do we go?
    (tell me how you hide by css an element which is not one </span>foo</p>)

    >>}
    >></script>
    >>
    >><p>Start of text
    >><a href="#" onclick="expand(this); return false;">[+]</a><br>

    >
    >
    > Why use a link, especially one with a non-sensical href like "#"


    I did adapt a proposed code without giving an other one too much far
    from original.
    original script had this link to receive the onclick
    ... didn't go further.

    Overall I did give an other approach to reveal the hidden text.

    > (something to be avioded generally). The link will make no sense
    > if javascript is disabled. For affordability to clicking, I would
    > prefer a button, not a link, since it doesn't link to anything.
    > (A good hint that one is misusing links is that they have no
    > meaningful; href :)


    I do not understand in what a button would work better if JS is disabled
    And as I used to code for NC4.5, in this case the button has to be in a
    form.

    Anyway, there are so much ways to propose a click :
    A, img, button ... and even P, td, div, and so on

    > Using a link with an onclick also fails quite visibly if the script
    > errors, as the href is followed then (because you never reach the
    > "return false"). That is why it's better to use an object with no
    > inherent behavior, instead of trying to override it.


    OK, you're right

    >><span style="visibility:hidden">More text</span>

    >
    >
    > You use "visibility" to hide the content. While it works in more
    > browsers than using "display" (e.g., Netscape 4 and Opera 6 and
    > other static DOM browsers), it also means that the hidden content
    > still takes up space in the flow of the page,


    Where is my dictionary? Ha ! irrelevant : out of purpose, out of words

    > which makes hiding it pretty irrelevant.


    Sure ! but I don't know what the guy wants exactly to do
    (few words? complete page of 258 lines ? it's his problem).
    I just give a soluce.
    And, remenber, here was only an exercice to avoid innerHTML
    (in an existing script)

    Never I use display on/off (with a relative)
    because that gives a very bad yoyo effect to the draw of page

    > So, my suggestion would be something like:
    > ---
    > <script type="text/javascript">
    > function getElement(id) {
    > return document.getElementById ?
    > document.getElementById(id) :
    > document.all ?
    > document.all[id] :
    > null; // no need to fall back on Netscape here
    > }


    Yeap, good introduction :)

    > function writeMoreButton(id) {
    > document.write("<input class='moreButton' type='button' value='+'",
    > " onclick='toggleMore(this,\"", id, "\");'>");
    > }


    Ho! it's what you mean by JS disabled ?
    so you can do it with no matter what (whom a A)

    > function toggleContent(id, visible) {
    > var elem = getElement(id);
    > (elem.style||elem).display = visible?"":"none";
    > }
    > function toggleMore(button,id) {
    > var expand = (button.value=="+");
    > toggleContent(id, expand);
    > button.value = expand ? "-" : "+";
    > }
    > </script>
    >
    > <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
    > eiusmod tempor incididunt ut labore et dolore magna aliqua.
    > <span id="loremMore">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>


    I love your french(*) ;-)

    > <script type="text/javascript">
    > writeMoreButton("loremMore");
    > toggleContent("loremMore", false);
    > </script>
    > </p>
    > ---
    > You have to hide the element after it occurs in the file, but the
    > button can be placed anywhere you want.


    The A in code given in my post had the advantage to show [+] or [-]
    depend last action launched by the click

    If IE would be more clever a css rule would be enough ... :-(


    (*) personal jock relative to a certain post back
    not matter if not understood (it's not for you)


    --
    Stephane Moriaux et son [moins] vieux Mac
     
    ASM, Jul 14, 2005
    #10
  11. "Lasse Reichstein Nielsen" <> wrote in message
    news:...

    > Please don't top post.


    OK. I'm not sure I know what this means, but I assume it means posting
    before quoting? If so, OK.

    > Lorem ipsum? Just the generic garble text. Read about it here:
    > <URL:http://www.lipsum.com/>


    OK - follow that.

    Question - will this script simply put the button at the end of a line of
    text, and then continue text when the plus is clicked? I need the default to
    be collapsed with the plus showing, and the plus sign (or button) to go
    simply at the end of a line of text. Also, do I need anything on the page at
    the top after the body tag, or just copy in the script where I need it?
    Thanks!

    --Randy
     
    Randy Starkey, Jul 14, 2005
    #11
  12. Randy Starkey

    ASM Guest

    Randy Starkey wrote:
    > I'm lost on the french -


    Which french ?

    I don't know JS at all - are they comments?

    Put this complete example in an html page and try it
    That works pulling mouse over visible part of text.
    A kind of roll-over

    The hidden to visible part of text must be set between span tags
    at the last of P element

    I leave the example for your use

    <p onmouseover="t=this.childNodes[1].style; t.visibility='visible';"
    onmouseout="t.visibility='hidden';"
    style="color:blue">
    Here is a sentence whom unique goal is to reveal an other text. Pass
    your mouse over me.
    <span style="visibility:hidden;color:red"> I am the complementary part
    of text.</span>


    --
    Stephane Moriaux et son [moins] vieux Mac
     
    ASM, Jul 14, 2005
    #12
  13. Randy Starkey

    ASM Guest

    Randy Starkey wrote:
    >
    > Question - will this script simply put the button at the end of a line of
    > text, and then continue text when the plus is clicked? I need the default to
    > be collapsed with the plus showing, and the plus sign (or button) to go
    > simply at the end of a line of text. Also, do I need anything on the page at
    > the top after the body tag, or just copy in the script where I need it?
    > Thanks!


    copy/past all what proposed marked by '---' (from <script to </p>)
    between tags <html> and </html>
    in your notepad or other text editor
    save as foo.htm

    open this foo.htm in your browser and see and try the button

    explain :
    put the 1st script in header (between head tags)

    where you want a button you past this code :

    <script type="text/javascript">
    writeMoreButton("loremMore");
    toggleContent("loremMore", false);
    </script>

    then just after (or before if prefered) this script
    you put your hidden text inside a span *idded* :

    <span id="here_01">
    My hidden text here
    </span>

    Do not forget to change the name in the script according to this of span
    -> change "lorenMore" with "here_01"

    that could give us :

    <p>then just after this script you put your hidden text
    inside a span or a P or a div *idded* : <script type="text/javascript">
    writeMoreButton("here_01"); toggleContent("here_01", false);</script>
    <br><span id="here_01"> My hidden text here</span>
    </p>
    <p>Other test : <script type="text/javascript">
    writeMoreButton("here_02"); toggleContent("here_02", false);</script>
    <span id="here_02"> second secret text</span>
    </p>

    --
    Stephane Moriaux et son [moins] vieux Mac
     
    ASM, Jul 14, 2005
    #13
  14. "ASM" <> wrote in message
    news:42d6dd1b$0$907$...
    > Randy Starkey wrote:
    >> I'm lost on the french -

    >
    > Which french ?
    >
    > I don't know JS at all - are they comments?
    >
    > Put this complete example in an html page and try it
    > That works pulling mouse over visible part of text.
    > A kind of roll-over


    OK - Thanks!


    >
    > The hidden to visible part of text must be set between span tags
    > at the last of P element
    >
    > I leave the example for your use
    >
    > <p onmouseover="t=this.childNodes[1].style; t.visibility='visible';"
    > onmouseout="t.visibility='hidden';"
    > style="color:blue">
    > Here is a sentence whom unique goal is to reveal an other text. Pass your
    > mouse over me.
    > <span style="visibility:hidden;color:red"> I am the complementary part of
    > text.</span>
    >
    >
    > --
    > Stephane Moriaux et son [moins] vieux Mac
     
    Randy Starkey, Jul 15, 2005
    #14
  15. "ASM" <> wrote in message
    news:42d6e86a$0$1219$...

    > copy/past all what proposed marked by '---' (from <script to </p>)
    > between tags <html> and </html>
    > in your notepad or other text editor
    > save as foo.htm


    OK. I think I got it. Thanks!


    >
    > open this foo.htm in your browser and see and try the button
    >
    > explain :
    > put the 1st script in header (between head tags)
    >
    > where you want a button you past this code :
    >
    > <script type="text/javascript">
    > writeMoreButton("loremMore");
    > toggleContent("loremMore", false);
    > </script>
    >
    > then just after (or before if prefered) this script
    > you put your hidden text inside a span *idded* :
    >
    > <span id="here_01">
    > My hidden text here
    > </span>
    >
    > Do not forget to change the name in the script according to this of span
    > -> change "lorenMore" with "here_01"
    >
    > that could give us :
    >
    > <p>then just after this script you put your hidden text
    > inside a span or a P or a div *idded* : <script type="text/javascript">
    > writeMoreButton("here_01"); toggleContent("here_01", false);</script>
    > <br><span id="here_01"> My hidden text here</span>
    > </p>
    > <p>Other test : <script type="text/javascript">
    > writeMoreButton("here_02"); toggleContent("here_02", false);</script>
    > <span id="here_02"> second secret text</span>
    > </p>
    >
    > --
    > Stephane Moriaux et son [moins] vieux Mac
     
    Randy Starkey, Jul 15, 2005
    #15
  16. "Lasse Reichstein Nielsen" <> wrote in message
    news:...
    > "Randy Starkey" <> writes:


    >> So this creates a small button?

    >
    > Yes, just a button with a "+" or "-" in it. If you want it styled,
    > just use CSS and style the class "moreButton".


    I'm getting double buttons for some reason?
    See http://www.victorychurch.com/?page=52
    slight adjustment needed?
    Thanks! - Randy
     
    Randy Starkey, Jul 15, 2005
    #16
  17. "andrew" <> wrote in message
    news:cKgBe.107730$HI.46216@edtnps84...
    > Very rough, but you can modify it as you see fit...
    >
    > <script type="text/javascript">
    > function expand(elem) {
    > elem.innerHTML = '-'
    > document.getElementById('more').style.display = 'block'
    > }
    > </script>
    >
    > Start of text <a href="#" onclick="expand(this)">+</a>
    > <div id="more" style="display:none">More text</div>


    simple and works to expand, but won't collapse?
    --Randy
     
    Randy Starkey, Jul 15, 2005
    #17
  18. Randy Starkey

    ASM Guest

    Randy Starkey wrote:

    > I'm getting double buttons for some reason?
    > See http://www.victorychurch.com/?page=52


    you did write it twice
    ist with javascript
    2d with html

    delete the 2nd

    <SCRIPT type=text/javascript>
    writeMoreButton("loremMore");
    toggleContent("loremMore", false);
    </SCRIPT>

    here : line to delete
    <INPUT class=moreButton onclick='toggleMore(this,"loremMore");'
    type=button value=+>

    --
    Stephane Moriaux et son [moins] vieux Mac
     
    ASM, Jul 15, 2005
    #18
  19. Randy Starkey

    ASM Guest

    Randy Starkey wrote:
    > "andrew" <> wrote in message
    > news:cKgBe.107730$HI.46216@edtnps84...
    >
    >
    > simple and works to expand, but won't collapse?


    these I did give do


    <script type="text/javascript">
    function showHide(elem) {
    var v = elem.firstChild.nodeValue;
    elem.firstChild.nodeValue = v=='[+]'? '[-]':'[+]';
    elem.parentNode.lastChild.style.visibility=v=='[+]'?'visible':'hidden';
    }
    </script>

    <p>Start of text
    <a href="#" onclick="showHide(this); return false;">[+]</a><br>
    <span style="visibility:hidden">More text</span>
    </p>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
    <a href="#" onclick="showHide(this); return false;">[+]</a>
    <span style="visibility:hidden">Morbi a wisi. Mauris vulputate rutrum
    arcu.</span>
    </p>

    --
    Stephane Moriaux et son [moins] vieux Mac
     
    ASM, Jul 15, 2005
    #19
  20. ASM <> writes:

    > where you want a button you past this code :
    >
    > <script type="text/javascript">
    > writeMoreButton("loremMore");
    > toggleContent("loremMore", false);
    > </script>
    >
    > then just after (or before if prefered) this script
    > you put your hidden text inside a span *idded* :


    Actually, you should put the call to "writeMoreButton" where you want
    the button, but the call to "toggleContent" *after* the content that
    must be hidden.


    > that could give us :
    >
    > <p>then just after this script you put your hidden text
    > inside a span or a P or a div *idded* : <script type="text/javascript">
    > writeMoreButton("here_01"); toggleContent("here_01", false);</script>

    just:
    writeMoreButton("here_01");</script>

    > <br><span id="here_01"> My hidden text here</span>

    and
    <script type="text/javascript">toggleContent("here_01",false);</script>
    here.

    /L
    --
    Lasse Reichstein Nielsen -
    DHTML Death Colors: <URL:http://www.infimum.dk/HTML/rasterTriangleDOM.html>
    'Faith without judgement merely degrades the spirit divine.'
     
    Lasse Reichstein Nielsen, Jul 15, 2005
    #20
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. C
    Replies:
    1
    Views:
    365
    Steve C. Orr, MCSD
    Jul 30, 2003
  2. Paul Russell

    HtmlControls doesn't expose GridLayoudPanel?

    Paul Russell, Nov 3, 2003, in forum: ASP .Net
    Replies:
    0
    Views:
    349
    Paul Russell
    Nov 3, 2003
  3. Max
    Replies:
    0
    Views:
    340
  4. Michael
    Replies:
    4
    Views:
    426
    Matt Hammond
    Jun 26, 2006
  5. Robert Klemme

    With a Ruby Yell: more, more more!

    Robert Klemme, Sep 28, 2005, in forum: Ruby
    Replies:
    5
    Views:
    221
    Jeff Wood
    Sep 29, 2005
Loading...

Share This Page