SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Enthusiast
    Join Date
    May 2012
    Location
    N.Ireland
    Posts
    98
    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,313
    Mentioned
    178 Post(s)
    Tagged
    9 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 Enthusiast
    Join Date
    May 2012
    Location
    N.Ireland
    Posts
    98
    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,313
    Mentioned
    178 Post(s)
    Tagged
    9 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 Enthusiast
    Join Date
    May 2012
    Location
    N.Ireland
    Posts
    98
    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
  •