SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Addict
    Join Date
    May 2006
    Posts
    250
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Changing text on click with jquery

    Hi all, could someone tell me how to change the text of a link when its clicked?

    I use this code as a show/hide

    Code:
    <script type="text/javascript">
    $(document).ready(function() {
     // hides the slickbox as soon as the DOM is ready
     // (a little sooner than page load)
      $('#slickbox').hide();
    
      // toggles the slickbox on clicking the noted link 
      $('a#slickbox-toggle').click(function() {
        $('#slickbox').slideToggle(400);
        return false;
      });
    });
    </script>
    And this is the markup...

    HTML Code:
    <a id="slickbox-toggle" href="#">Show box</a>			
    
    <div id="slickbox">Content goes here.</div>
    So what I want to happen is when you click "show box" and the box is revealed, the text then changes to "hide box" and back again if the box is hidden again. I've seen it done loads but can't find it in a tutorial!

    Hope someone can help

    Many thanks

  2. #2
    SitePoint Guru alecrust's Avatar
    Join Date
    Jun 2007
    Location
    London, UK
    Posts
    728
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    This jQuery plugin has all of your answers
    Honda Civic Forum - UK Civic Forum
    Web Host Reviews - Independent, honest host reviews
    My Portfolio - Simplicity is the ultimate sophistication

  3. #3
    Floridiot joebert's Avatar
    Join Date
    Mar 2004
    Location
    Kenneth City, FL
    Posts
    823
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Within your click handler
    Code javascript:
    $(this).text($(this).text() == 'Show box' ? 'Hide box' : 'Show box');

  4. #4
    SitePoint Addict
    Join Date
    May 2006
    Posts
    250
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the suggestion alecrust but I want to amend my current code if possible. Joebert could you show me exactly how to implement your suggestion I'm not sure where I'm supposed to put your code : /

    Thanks so far!

  5. #5
    Function Curry'er JimmyP's Avatar
    Join Date
    Aug 2007
    Location
    Brighton, UK
    Posts
    2,006
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Put it here:

    Code JavaScript:
    $('a#slickbox-toggle').click(function() {
        $('#slickbox').slideToggle(400);
        $(this).text($(this).text() == 'Show box' ? 'Hide box' : 'Show box'); // <- HERE
        return false;
    });
    James Padolsey
    末末末末末末末末末末末末末末末末末末末
    Awesome JavaScript Zoomer (demo here)
    'Ajaxy' - Ajax integration solution (demo here)

  6. #6
    SitePoint Addict
    Join Date
    May 2006
    Posts
    250
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thats cracked it, Thanks so much!

  7. #7
    SitePoint Addict
    Join Date
    May 2006
    Posts
    250
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    For some reason I can't use the text swapper twice??

    I have duplicated the code (for some reason classes aren't working on the box or the link) and now its stopped working (even the hiding of the boxes). If I remove the second text swapper then it all works but obviously the second lot of text isn't being swapped.

    Is there something wrong with my code?

    Code:
    <script type="text/javascript">
    $(document).ready(function() {
     // hides the slickbox as soon as the DOM is ready
     // (a little sooner than page load)
      $('#agabox').hide();
     $('#mailbox').hide();
    
      // toggles the slickbox on clicking the noted link 
      $('a#agabox-toggle').click(function() {
        $('#agabox').slideToggle(400);
        $(this).text($(this).text() == 'Why do we need to know?' ? 'Read Below' : 'Why do we need to know?');
        return false;
    });
      // toggles the slickbox on clicking the noted link 
      $('a#mailbox-toggle').click(function() {
        $('#mailbox').slideToggle(400);
       $(this).text($(this).text() == 'What's this?' ? 'Read Below' : 'What's this?');
        return false;
         
    });
    });
    </script>

  8. #8
    SitePoint Member
    Join Date
    Feb 2008
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanks for this guys, works a treat.
    Kind Regards,
    Glen Wheeler
    Engine | Glen Wheeler


Bookmarks

Posting Permissions

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