Switching innerHTML on return click event

Question

I have this show more/less click event and It changes on the first click but I am not sure how to get it to return to the previous state on the return click.

<Html>
  <head>
  </head>
  <body>
    <div id="showit">Show More</div>
    <div class="shown" style="display: none;"> 
      Here is some content that I want to display
    </div>

    <script>

        $(document).ready(function() {
          var element = document.getElementById("showit");
        
          $('#showit').click(function(){
            $('.shown').slideToggle("fast");
            element.innerHTML = "Show Less";
          });
        });

    </script>
  </body>
</html>

Fiddle

I am new to JS, can anyone help?

Thanks.

Bhojendra Rauniyar · Accepted Answer · 2015-02-02 20:16:26Z

1

Do like this:

$(document).ready(function() {
    $('#showit').click(function(){
         $('.shown').slideToggle("fast");
         $(this).text($(this).text() == 'Show Less' ? 'Show More': 'Show Less');
    });
});

answered Feb 2, 2015 at 20:16

Bhojendra Rauniyar

86k36 gold badges179 silver badges241 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Springheeled Jack Over a year ago

Thats great, is there anyway I can add to this by swapping another element from say + to - at the same time in a seperate element?

Springheeled Jack Over a year ago

So can i change multiple innerHTML elements in the onClick Handler?

Bhojendra Rauniyar Over a year ago

yes, do the same thing in next line eg. $(this).text(...);$(elem).text(...)

Shomz · Accepted Answer · 2015-02-02 20:20:30Z

The simplest way would be to use a flag variable (on/off or true/false in JS):

var element = document.getElementById("showit");
var isShown = false;
    $('#showit').click(function(){
        $('.shown').slideToggle("fast");
        isShown = !isShown;                   // flip the flag
        element.innerHTML = isShown ? "Show Less" : "Show More";
    });

Working fiddle and snippet below:

http://jsfiddle.net/jdwfkwc0/

$(document).ready(function() {
  var element = document.getElementById("showit");
  var isShown = false;
  $('#showit').click(function() {
    $('.shown').slideToggle("fast");
    isShown = !isShown; // flip the flag
    element.innerHTML = isShown ? "Show Less" : "Show More";
  });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="showit">Show More</div>
<div class="shown" style="display: none;">Here is some content that I want to display</div>

skay- · Accepted Answer · 2015-02-02 20:23:15Z

0

You could do it like this:

$(document).ready(function() {
    var element = document.getElementById("showit");

    $('#showit').click(function(){
        var $el = $('.shown'),
            text = $el.is(":visible") ? 'More' : 'Less';
        alert();
        $el.slideToggle("fast");
        element.innerHTML = "Show " + text;
    });

});

This is based on whether the div is visible, you is more flexible as you can change the text easily.

answered Feb 2, 2015 at 20:23

skay-

1,5863 gold badges17 silver badges26 bronze badges

Comments

Bob · Accepted Answer · 2015-02-02 20:32:23Z

0

Solution could be simple, just add toogleFlag and deal with it:

    $(document).ready(function() {
    var element = document.getElementById("showit");
    var elementIsVisible = true;

    $('#showit').click(function(){

        $('.shown').slideToggle("fast");
        toggleText(element);
    });

    function toggleText(element){
        if(elementIsVisible){
            element.innerHTML =  "Show Less";
            elementIsVisible = false;
        }else{
            element.innerHTML =  "Show More";
            elementIsVisible = true;
        }        
    }

});

example: http://jsfiddle.net/DariuszMusielak/yxb8681b/2/

answered Feb 2, 2015 at 20:32

Bob

1061 silver badge7 bronze badges

Collectives™ on Stack Overflow

Switching innerHTML on return click event

4 Answers 4

3 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related