Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 9 of 9
  1. #1
    Regular Coder
    Join Date
    Sep 2011
    Posts
    184
    Thanks
    140
    Thanked 0 Times in 0 Posts

    Change Text in a clickable link

    Hello,

    I am trying to create a link whereby it will allow me to change the text, and if I click it again, it will revert back to the old text. I can't seem to be able to figure this out:

    ie).

    >>Expand
    (if the 'expand' link is clicked on, text will be changed to say 'Minimize'):

    <<Minimize
    (if the 'minimize' link is click on, text will be changed to say 'Expand'

    How can this be done?

    Many and much thanks and appreciation for everyones help.

    Cheers,

    Jay

  • #2
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,079
    Thanks
    203
    Thanked 2,542 Times in 2,520 Posts
    I am not sure that I understand. Is this what you are looking for?

    Code:
    <html>
    <head>
    </haed>
    <body
    
    
    <body onload = "showstart()"> 
    <div id = "mydiv"></div>
    
    <script type = "text/javascript">
    
    var txt = "";
    var shorttxt = "";
    function showstart() {
    
    txt = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ipsum leo, scelerisque at dapibus ac, consectetur vel ipsum. Morbi et metus ut diam molestie ullamcorper. Suspendisse rutrum semper semper. Donec volutpat neque in lorem tempus scelerisque. Curabitur dignissim rhoncus quam ac suscipit. Donec viverra quam lobortis neque porta a sagittis urna tristique. Suspendisse nec lacus nisi. Pellentesque fermentum massa sit amet magna hendrerit vestibulum. Sed elit libero, scelerisque eu eleifend ut, interdum gravida nunc. Etiam ut nisi sapien, et tempus sem. Nam vel mi est. Mauris congue felis ut ante bibendum vehicula. Nullam nec sapien arcu, eget cursus lorem. Donec blandit, dolor tristique ornare dictum, arcu sapien vulputate dolor, et placerat risus odio ut magna. Ut magna mauris, pellentesque at ultricies vitae, fermentum vitae dolor. <br><br>"
    
    txt += "Cras suscipit ullamcorper elit vitae sodales. Sed euismod felis molestie lorem gravida a venenatis risus sollicitudin. Proin accumsan lorem in est adipiscing faucibus. Suspendisse at augue urna, nec tristique libero. Nulla libero elit, tempor vel aliquet id, tincidunt id ante. Etiam egestas orci in velit tristique ut ullamcorper urna egestas. Duis eget risus sem, eu aliquet arcu. Sed ac mauris et arcu interdum malesuada sed eu augue. Suspendisse quis nisi massa. Donec in egestas enim. Ut tristique luctus eros, non pretium ligula feugiat ac. Etiam non luctus sem. Integer nibh leo, interdum a condimentum quis, consectetur in leo. In aliquet facilisis tellus, quis dapibus erat posuere sed. Cras egestas massa ut quam placerat pellentesque. Sed in magna quis lorem congue ultricies. Fusce feugiat felis neque. Proin eros tortor, feugiat sit amet laoreet iaculis, gravida non quam. Curabitur lacus libero, convallis a placerat id, feugiat vitae leo. "
    
    shorttxt = txt.substring(0,100);
    
    document.getElementById("mydiv").innerHTML = shorttxt + "<font color = '#0000FF' size = '1'><a = '#' onclick='showmore();return false'>.....read more</a>";
    }
    
    function showmore() {
    document.getElementById("mydiv").innerHTML = document.getElementById("mydiv").innerHTML = txt + "<font color = '#0000FF' size = '1'><a = '#' onclick='showless();return false'>.....read less</a>";txt;
    }
    
    function showless() {
    document.getElementById("mydiv").innerHTML = shorttxt + "<font color = '#0000FF' size = '1'><a = '#' onclick='showmore();return false'>.....read more</a>";
    }
    
    </script>
    
    </body>
    </html>
    Or is it as simple as this?

    Code:
    <a href= "#" onclick = "changeIt(); return false"; ><span id = "linktitle">Expand</span></a>
    
    <script type = "text/javascript">
    
    function changeIt() {
    var lnk = document.getElementById("linktitle").innerHTML;
    if (lnk == "Expand") {lnk = "Minimize"}
    else {lnk = "Expand"}
    document.getElementById("linktitle").innerHTML = lnk;
    }
    
    </script>
    A teacher informed my son that "There are two words which you should never use in school homework - one is cool and the other is gross". "No problem", replied the boy, "What are the two words?"
    Last edited by Philip M; 07-24-2012 at 08:36 PM.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • Users who have thanked Philip M for this post:

    jason_kelly (07-24-2012)

  • #3
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,919
    Thanks
    79
    Thanked 4,423 Times in 4,388 Posts
    Or maybe do something generic?

    Why use <a> in the first place? That's so 1999.

    Code:
    <html>
    <head>
    <style type="text/css">
    div#toggles span { color: red; }
    div#toggles div  { display: none; }
    </style>
    </head>
    <body>
    <div id="toggles">
    
    <span id="toggle1">&gt;&gt;Expand</span>
    <div id="show1">
    This stuff will show up when toggled on.<br/>
    This stuff will show up when toggled on.<br/>
    This stuff will show up when toggled on.<br/>
    This stuff will show up when toggled on.
    </div>
    <br/><br/>
    <span id="toggle2">&gt;&gt;Expand</span>
    <div id="show2">
    This second stuff will show up when toggled on.<br/>
    This second stuff will show up when toggled on.<br/>
    This second stuff will show up when toggled on.<br/>
    This second stuff will show up when toggled on.
    </div>
    
    </div>
    
    <script type="text/javascript">
    function toggle() {
        var div = document.getElementById(this.id.replace("toggle","show"));
        if ( this.innerHTML.indexOf("Exp") >= 0 )
        {
           div.style.display = "block";
           this.innerHTML = "&lt;&lt;Minimize";
        } else {
           div.style.display = "none";
           this.innerHTML = "&gt;&gt;Expand";
        }
    }
    var spans = document.getElementById("toggles").getElementsByTagName("span");
    for ( var s = 0; s < spans.length; ++s )
    {
        spans[s].onclick = toggle;
    }
    </script>
    </body>
    </html>
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • Users who have thanked Old Pedant for this post:

    jason_kelly (07-24-2012)

  • #4
    Regular Coder
    Join Date
    Sep 2011
    Posts
    184
    Thanks
    140
    Thanked 0 Times in 0 Posts
    A great big thanks to Phil and Old pendant.

    I guess there are more than 1 ways to skin a cat lol

    Its something as simple as this works great!

    Thanks again for everyones quick help.

    Cheers and have an awesome evening.

    Jay

    Code:
    <a href= "#" onclick = "changeIt(); return false"; ><span id = "linktitle">Expand</span></a>
    
    <script type = "text/javascript">
    
    function changeIt() {
    var lnk = document.getElementById("linktitle").innerHTML;
    if (lnk == "Expand") {lnk = "Minimize"}
    else {lnk = "Expand"}
    document.getElementById("linktitle").innerHTML = lnk;
    }
    
    </script>

  • #5
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,919
    Thanks
    79
    Thanked 4,423 Times in 4,388 Posts
    Even if you use that code, at least you can write it much more compact
    Code:
    <a href="#" onclick="this.innerHTML=(this.innerHTML=='Expand')?'Minimize':'Expand'; return false;" 
         >Expand</a>
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • Users who have thanked Old Pedant for this post:

    jason_kelly (07-25-2012)

  • #6
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,079
    Thanks
    203
    Thanked 2,542 Times in 2,520 Posts
    Quote Originally Posted by Old Pedant View Post
    Even if you use that code, at least you can write it much more compact
    Code:
    <a href="#" onclick="this.innerHTML=(this.innerHTML=='Expand')?'Minimize':'Expand'; return false;" 
         >Expand</a>
    compactly please, Old Pedant! I know that, but in fact I rarely use ternary operators which have no real advantage except making the code more compact (why is this important??) and making the code harder to understand - especially for a beginner.

    If you think on there must be additional code according to whether Expand or Minimize is shown.

    Code:
    function changeIt() {
    var lnk = document.getElementById("linktitle").innerHTML;
    if (lnk = "Expand") // show the expanded text
    if (lnk = "Minimize) // show the minimized text
    if (lnk == "Expand") {lnk = "Minimize"}  // toggle
    else {lnk = "Expand"}
    document.getElementById("linktitle").innerHTML = lnk;  
    
    }
    Last edited by Philip M; 07-25-2012 at 08:27 AM.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • Users who have thanked Philip M for this post:

    jason_kelly (07-25-2012)

  • #7
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,919
    Thanks
    79
    Thanked 4,423 Times in 4,388 Posts
    LOL! Score one for you, Philip! Or maybe more than one.

    I do avoid the ternary operator for anything less straightforward than this example, but I don't think it's bad for simple cases like this.

    After all, if people can understand the use of IIF in VB or the IF function in MySQL...

    But now my turn:
    Code:
    function changeIt() {
    var lnk = document.getElementById("linktitle").innerHTML;
    if (lnk == "Expand") // show the expanded text
    if (lnk == "Minimize) // show the minimized text
    if (lnk == "Expand") {lnk = "Minimize"}  // toggle
    else {lnk = "Expand"}
    document.getElementById("linktitle").innerHTML = lnk;  
    }
    How'd you get it right in the last if but wrong in the other two? <grin/>
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #8
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,079
    Thanks
    203
    Thanked 2,542 Times in 2,520 Posts
    Quote Originally Posted by Old Pedant View Post
    How'd you get it right in the last if but wrong in the other two? <grin/>
    Typos. Senior moment. Onset of Alzheimer's. Too much alcohol. Too little alcohol. Prescription medication. Whatever.
    Last edited by Philip M; 07-25-2012 at 09:01 PM.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • #9
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,919
    Thanks
    79
    Thanked 4,423 Times in 4,388 Posts
    Quote Originally Posted by Philip M View Post
    Typos. Senior moment. Onset of Alzheimer's. Too much alcohol. Too little alcohol. Prescription medication. Whatever.
    Heh. I can relate to all of those except one. I can no longer drink alcohol. (Well, I can. But I'd like to keep on living a little longer.) *sigh*
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •