title: jQuery accordion onclick( ) : hide/show header
body: <p>I'm using jQuery accordion plugin.</p>
  
  <p>When clicked on the text "Accordion", it expands and show the content, as it should. Now, I also have a "Close" button at the bottom of accordion to close it and that also works as it should.</p>
  
  <p>Now the requirement is, when I click on "Accordion", it should expand and hide that text "Accordion" and it should show again when closed using "Close".</p>
  
  <p>How to achieve that? So far I have:</p>
  
  <pre><code>&lt;script&gt;
  $(function() {
      $( "#accordion" ).accordion({
        collapsible: true,
        active: false
      });
    });
  &lt;/script&gt;
  </code></pre>
  
  <p>and</p>
  
  <pre><code>&lt;div id="accordion"&gt;
      &lt;h3&gt;Accordion&lt;/h3&gt;
      &lt;div class="accordionBg"&gt;
          &lt;p&gt;...text here...&lt;/p&gt;
          &lt;p&gt;...text here...&lt;/p&gt;
  
          &lt;div id="accordion"&gt;
              &lt;h4&gt;Close&lt;/h4&gt;
          &lt;/div&gt;
  
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <ol>
  <li><p>How can I use <code>onclick()</code> function to hide and show the header of this accordion?</p>
  
  <p>Also, I'm sure using duplicate id gives html validation error,</p></li>
  <li><p>How should I stay safe from duplicating id?</p></li>
  </ol>