Change text in show / hide

Question

I have some content that I want to show / hide using jquery. So far using the code below:

$(document).on("click",".class", function(){ $(this).next().slideToggle("fast"); }); <div class="class" Title="Click to view/hide all" id="flip">View &#9660;</div> <div class="class" id="panel"><table> Hello!! </table> </div> 

I have many such div views that are created and work inside a loop. My show / hide content is working fine, but I want to change the text (on the button) to “show” and “hide” when the user clicks. Please, help.

Answer 1

You can use the ternary conditional operator to switch between texts.

  $(document).on("click",".class", function(){ $(this).next().slideToggle("fast"); $(this).text($(this).text() == 'view' ? 'hide all' : 'view'); });