title: 3 Different Main-Div and will show inside main-div and close main div when click another main div
body: <p>Hi Im just new in jquery and javascript. What im trying to do is i have 3 separate Main-Divs ex main-div1, main-div2, main-div-3 all of them is one big box and when you click main-div1 it will show the contents of it but when you click main-div2 while different main div is open it will automatic close and open the main div.</p>
  
  <p>HTML</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-html lang-html prettyprint-override"><code>&lt;a href="link"&gt;
      &lt;div class="main-div1" style="background-color:#000; color:#fff;"&gt;
          &lt;div class="content"&gt; Any contents &lt;/div&gt;
      &lt;/div&gt;
  &lt;/a&gt;
  &lt;a href="link"&gt;
      &lt;div class="main-div2" style="background-color:#000; color:#fff;"&gt;
          &lt;div class="content"&gt; Any contents &lt;/div&gt;
      &lt;/div&gt;
  &lt;/a&gt;
  &lt;a href="link"&gt;
      &lt;div class="main-div3" style="background-color:#000; color:#fff;"&gt;
          &lt;div class="content"&gt; Any contents &lt;/div&gt;
      &lt;/div&gt;
  &lt;/a&gt;</code></pre>
  </div>
  </div>
  </p>