title: jQuery toggle hide/show all elements with multiple buttons
body: <p>I have a set of 4 buttons, which are used to show/hide all images within the page -- which they do just fine. When an individual button is clicked, it changes the inner button text from &quot;HIDE ALL&quot; to &quot;DISPLAY ALL&quot;.</p>
  <p>However, all other buttons remain the same.</p>
  <p>How can I have all other buttons change text as well?</p>
  <p>So far I tried this, which works a one button at a time -- I would like to have all of them changed at once:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$('.HideDisplay').click(function() {
    var $this = $(this);
    $this.toggleClass('HideDisplay');
    if ($this.hasClass('HideDisplay')) {
      $this.text('HIDE ALL');
      $(this).css('color', 'black');
      $(this).css("background-color", "#f1f1f1");
      $(this).hover(function() {
        $(this).css("background-color", "#dedede");
      }, function() {
        $(this).css("background-color", "#f1f1f1");
      });
    } else {
      $this.text('DISPLAY ALL');
      $(this).css('color', 'white');
      $(this).css("background-color", "#009E60");
      $(this).hover(function() {
        $(this).css("background-color", "#008000");
      }, function() {
        $(this).css("background-color", "#009E60");
      });
    }
  
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  
  &lt;head&gt;
    &lt;meta charset="utf-8" /&gt;
    &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  
    &lt;p&gt;&lt;button id="button" class="HideDisplay"&gt;HIDE ALL&lt;/button&gt;&lt;/p&gt;
    &lt;p&gt;&lt;button id="button2" class="HideDisplay"&gt;HIDE ALL&lt;/button&gt;&lt;/p&gt;
    &lt;p&gt;&lt;button id="button3" class="HideDisplay"&gt;HIDE ALL &lt;/button&gt;&lt;/p&gt;
    &lt;p&gt;&lt;button id="button4" class="HideDisplay"&gt;HIDE ALL&lt;/button&gt;&lt;/p&gt;
    &lt;/pre&gt;
  
  &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>