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 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Nov 2010
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Change text on click toggle

    Hi im using this to hide and show some text, how do i do to change the text "Show" to hide when i click it and back to "Show" when click it again.

    Code:
       <script type="text/javascript"> 
          $(document).ready(function(){ 
       $('.accordion-content').hide(); 
       //toggle the componenet with class accordion 
       $('.accordion-toggle').click(function(){ 
          //$(this).toggleClass('toggle-accordion-active'); 
          $(this).next('.accordion-content').slideToggle(300); 
       }); 
       $('#accordion-expand-all').click(function(){ 
          $('.accordion-content').slideToggle(300); 
       }); 
          }); 
        </script>


    Code:
    <p><a id="accordion-expand-all" href="#">Show</a></p>

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,157
    Thanks
    75
    Thanked 4,338 Times in 4,304 Posts
    Code:
       $('#accordion-expand-all').click(
          function(){ 
              $('.accordion-content').slideToggle(300); 
              this.innerHTML = ( this.innerHTML == "Show" ) ? "Hide" : "Show";
          }
       );
    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.

  • #3
    New to the CF scene
    Join Date
    Jan 2011
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts
    This is just what I want to do as well, but am having trouble making it work.

    HTML:
    Code:
    <div style="float:left;"><span id="plussign"><img src='plussign.gif'></span></div>
    <h4 style="margin-left:50px;">Big Heading</h4>
    <p>
      <span id="hider">
        Stuff under it.<br>This is a bunch of stuff to be toggled in and out.<br>
        Stuff under it.<br>This is a bunch of stuff to be toggled in and out.<br>	
      </span>
    </p>
    Jquery:
    Code:
    <script>
        $("#plussign").click(function () {
          $("#hider").slideToggle("fast");
          this.innerHTML = ( this.innerHTML == "<img src='plussign.gif'>" ) ? "<img src='minussign.gif'>" : "<img src='plussign.gif'>";
        });
    </script>
    Everything works fine if I use text:

    Code:
    <div style="float:left;"><span id="plussign">p</span></div>
    ...
    ...
    <script>
        $("#plussign").click(function () {
          $("#hider").slideToggle("fast");
    		this.innerHTML = ( this.innerHTML == "p" ) ? "m" : "p";
        });
    </script>
    But I would like to use the little images. What am I doing wrong?

    TIA.

    Mike


  •  

    Posting Permissions

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