Toggle text after click

JavaScript
1

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?


$(document).ready(function () {
    $('.show').click(function () {
        $(this).siblings('.hide:first').slideToggle('fast')
    });
});




<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;


$(document).ready(function () {
    $('.show').click(function () {
        $(this).siblings('.hide:first').slideToggle('fast')
    });

    var text = $('.hide').text();
    $('.hide').text(
        text == "Hide" ? "Read more" : "Hide");
});
2

Hi there,

This should work for you:

<!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:

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

Hope that helps.

3

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.


.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

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

Pullo

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


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