title: how to show content in div once a div is clicked on in Javascript?
body: <p>I wanted to make a content of a div to get displayed once another div is clicked. But I have tried this :</p>
  
  <pre><code>function loadFishContent() {
  if (div is clicked) {
      document.getElementById('fish').style.display = "block";
      document.getElementById('dogs').style.display = "none";
      document.getElementById('cats').style.display = "none";
  } 
  };
  </code></pre>
  
  <p>I have tried:</p>
  
  <pre><code>if (document.getElementByID('menu-fish') == true) {
  //do action
  }
  </code></pre>
  
  <p>But the action is applied in all the div I clicked.</p>
  
  <p>My html is :</p>
  
  <pre><code>&lt;div id="menu-fish" onclick="loadFishContent()"&gt; Fish &lt;/div&gt;
  &lt;div id="menu-dogs" onclick="loadDogsContent()"&gt; Dogs &lt;/div&gt;
  &lt;div id="menu-cats" onclick="loadCatsContent()"&gt; Cats &lt;/div&gt;
  
   &lt;div id="content"&gt;
              &lt;div id="fish"&gt;
              &lt;h2&gt; Fish &lt;/h2&gt;
              &lt;img src="fish.jpg"/&gt;
              &lt;p&gt; Information about fish in the store goes here.&lt;/p&gt;
          &lt;/div&gt;
  
          &lt;div id="dogs"&gt;
              &lt;h2&gt; Dogs &lt;/h2&gt;
              &lt;img src="dog.jpg" /&gt;
              &lt;p&gt; Information about dogs in the store go here.&lt;/p&gt;
          &lt;/div&gt;
  
          &lt;div id="cats"&gt;
              &lt;h2&gt; Cats &lt;/h2&gt;
              &lt;img src="cat.jpg" /&gt;
              &lt;p&gt; Information about cats in the store go here.&lt;/p&gt;
          &lt;/div&gt;
   &lt;/div&gt;
  </code></pre>
  
  <p>Thing is, how do I target the div which is clicked in the if condition?</p>