title: jQuery: How to restore the initial state of click events in this specific case?
body: <p>This is the code:</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>let selected_animal = "Animals"
  
  // Hover Function
  
  $("#cats_image").mouseover(function() {
    $("h1").text("Cats");
  });
  
  $("#dogs_image").mouseover(function() {
    $("h1").text("Dogs");
  });
  
  $("#ducks_image").mouseover(function() {
    $("h1").text("Ducks");
  });
  
  $("img").mouseout(function() {
    $("h1").text(selected_animal);
  });
  
  
  // Click Function
  
  $("#cats_image").click(function() {
    selected_animal = "Cats"
    $("h1").text("Cats");
    $("footer div").removeClass("show");
    $("#cats_text").addClass("show");
  });
  
  $("#dogs_image").click(function() {
    selected_animal = "Dogs"
    $("h1").text("Dogs");
    $("footer div").removeClass("show");
    $("#dogs_text").addClass("show");
  });
  
  $("#ducks_image").click(function() {
    selected_animal = "Ducks"
    $("h1").text("Ducks");
    $("footer div").removeClass("show");
    $("#ducks_text").addClass("show");
  });
  
  
  // White Area Click Function
  
  $("body").click(function() {
    event.stopPropagation();
    // ???
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>* {
    margin: 0;
    padding: 0;
    font-family: sans-serif;
    font-weight: normal;
  }
  
  header {
    width: 100%;
  }
  
  img {
    max-width: 200px;
    cursor: pointer;
  }
  
  footer div {
    display: none;
  }
  
  .show {
    display: block;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
  
  &lt;header&gt;
    &lt;h1&gt;Animals&lt;/h1&gt;
  &lt;/header&gt;
  
  &lt;main&gt;
    &lt;img id="cats_image" src="https://upload.wikimedia.org/wikipedia/commons/c/c4/Mackerel_tabby_cat_pair-Hisashi-01.jpg"&gt;
    &lt;img id="dogs_image" src="https://upload.wikimedia.org/wikipedia/commons/7/76/Two_puppies_dogs.jpg"&gt;
    &lt;img id="ducks_image" src="https://upload.wikimedia.org/wikipedia/commons/c/c8/The_pair_of_ducks.jpg"&gt;
  &lt;/main&gt;
  
  &lt;footer&gt;
    &lt;div id="cats_text"&gt;Domestic cats are valued by humans for companionship and their ability to hunt rodents.&lt;/div&gt;
    &lt;div id="dogs_text"&gt;The coats of domestic dogs are of two varieties: "double" being familiar with dogs (as well as wolves) originating from colder climates, made up of a coarse guard.&lt;/div&gt;
    &lt;div id="ducks_text"&gt;Duck is the common name for numerous species in the waterfowl family Anatidae which also includes swans and geese.&lt;/div&gt;
  &lt;/footer&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>Everything works how it should work. But if you click now at some point in a white area (where is no text, and no images), the initial status should be restored. Means that then there shouldn't be a footer text, and the h1 should be &quot;Animals&quot;. How is it possible to do that?</p>
  <p>Would be very thankful for help! :)</p>