title: Display DIV onclick and hide onclick with transition
body: <p>How can I show <code>#b1</code> when clicked on <code>#a1</code>, and show <code>#b2</code> when clicked on <code>#a2</code>? I need them to close as well (if you click, it will show and if you click again it will close). If you can add transition even better.</p>
  
  <pre><code>&lt;div class="wrap"&gt;
      &lt;ul class="head_dd"&gt;
          &lt;li id="a1"&gt;INTERIOR&lt;/li&gt;
          &lt;li id="a2"&gt;EXTERIOR&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  
  &lt;div class="bt1int" id="b1" style="display: none;"&gt;&lt;/div&gt;
  &lt;div class="bt1int" id="b2" style="display: none;"&gt;&lt;/div&gt;
  </code></pre>