SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Member
    Join Date
    Jul 2010
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    jquery: show hide toggle

    jQuery Code:
    PHP Code:
    $('#toggleButton').click(function(){
       $(
    '#disclaimer').toggle('slow');

    if ($(
    '#disclaimer').is(':visible')) {
          $(
    this).text('Show Disclaimer'); 
            return 
    false;
    } else {
          $(
    this).text('Hide Disclaimer');
            return 
    false;
        

    html
    PHP Code:
    <a href="" id="toggleButton">Show Disclaimer</a>
          <
    p id="disclaimer">
            
    Lorem ipsum dolor sit ametconsectetur adipisicing elitsed do eiusmod tempor incididunt ut labore et dolore magna aliquaUt enim ad minim veniamquis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
          </
    p
    Clicking the link toggles the visibility of the Disclaimer, but it does not toggle the text of the a#toggleButton. How can I make this work?

  2. #2
    SitePoint Zealot
    Join Date
    May 2009
    Location
    Netherlands
    Posts
    189
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Like this:
    Code:
    $('#toggleButton').click(function(){
            if ($('#disclaimer').is(':visible')) {
                $(this).text('Show Disclaimer'); 
            } else {
                $(this).text('Hide Disclaimer');
            }
        $('#disclaimer').toggle('slow');
        return false;
    });

  3. #3
    SitePoint Member
    Join Date
    Jul 2010
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you for the fix.
    It works now.

    But just curious why it does not work the other way.

    Click
    toggles disclaimer visibility
    so now the test for psuedo selector :visible becomes false
    set text to "Show Disclaimer"

  4. #4
    SitePoint Zealot
    Join Date
    May 2009
    Location
    Netherlands
    Posts
    189
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The other way, toggle is still processing when the if...else is called, so the text is always visible.


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
  •