SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Zealot
    Join Date
    May 2012
    Location
    N.Ireland
    Posts
    103
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Toggle text after click...

    Hi,

    i've implemented a simple div toggle and I'd like to change the text to display Hide after its clicked... Is there a var text line I could add?

    Code:
    $(document).ready(function () {
        $('.show').click(function () {
            $(this).siblings('.hide:first').slideToggle('fast')
        });
    });
    Code:
    <div class="show"><span style="cursor:pointer">Read more...</span></div>
                            <!--1st toggle div-->
                            <div class="hide" style="display:none;">
                            CONTENT
                            </div><!--/hide-->

    I was thinking somthing lean like;

    Code:
    $(document).ready(function () {
        $('.show').click(function () {
            $(this).siblings('.hide:first').slideToggle('fast')
        });
    
        var text = $('.hide').text();
        $('.hide').text(
            text == "Hide" ? "Read more" : "Hide");
    });

  2. #2
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,938
    Mentioned
    214 Post(s)
    Tagged
    12 Thread(s)
    Hi there,

    This should work for you:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
      <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>jQuery toggle example</title>
        <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
      </head>
    
      <body>
        <span style="cursor:pointer" class="readMore">Read more...</span>
        <div class="content" style="display:none;">CONTENT</div>
      
        <script>
          $('.readMore').click(function () {
            $('.content').slideToggle('fast', function(){
    	  $('.readMore').text($(this).is(':visible')? 'Read more...' : 'Hide');
    	})
          });
        </script>
      </body>
    </html>
    You can wait until the animation is complete, then set the span's text using the :visible selector.
    It might also be a good idea not to use jQuery method names (such as 'hide' and 'show') as names for your CSS classes, as this could lead to confusion.

    Also, if you don'`t like the delay until the text changes, you could do somethinglike this:

    Code JavaScript:
    $('.readMore').click(function () {
      $('.content').slideToggle('fast')
      t = ($(this).text() == "Read more...")? "Hide" : "Read more...";
      $(this).text(t);
    });

    Hope that helps.

  3. #3
    SitePoint Zealot
    Join Date
    May 2012
    Location
    N.Ireland
    Posts
    103
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Pullo thanks so much for your time and help. I soooo need to learn javascript. I added some CSS transition on hover as well incase anyone sees this as a reference.

    Code:
    .readMore {
        margin: 0;
        color: #00457c;
        font-weight: bold;
       opacity: 1;
       transition: opacity .25s ease-in-out;
       -moz-transition: opacity .25s ease-in-out;
       -webkit-transition: opacity .25s ease-in-out;
       }
    
       .readMore:hover {
          opacity: 0.5;
          }

  4. #4
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,938
    Mentioned
    214 Post(s)
    Tagged
    12 Thread(s)
    Hey,

    That looks good!
    Thanks for taking the time to follow up.

    If you want to learn jQuery, I can recommend: http://www.sitepoint.com/books/jquery2/

  5. #5
    SitePoint Zealot
    Join Date
    May 2012
    Location
    N.Ireland
    Posts
    103
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Pullo

    I added the sibilings selector to allow a toggle inside another toggle (more-content div), yet does'nt seem to work as before?

    Code:
    $('.readMore').click(function () {
      $(this).siblings('.more-content').slideToggle('fast')
      t = ($(this).text() == "Read more...")? "Hide" : "Read more...";
      $(this).text(t);
    });


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
  •