I'm using jQuery accordion plugin.

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.

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.

How to achieve that? So far I have:

<script>

$(function() {

    $( #accordion ).accordion({

      collapsible: true,

      active: false

    });

  });

</script>

and

<div id=accordion>

    <h3>Accordion</h3>

    <div class=accordionBg>

        <p>...text here...</p>

        <p>...text here...</p>



        <div id=accordion>

            <h4>Close</h4>

        </div>



    </div>

</div>

1. How can I use onclick() function to hide and show the header of this accordion?

   
   
   

   Also, I'm sure using duplicate id gives html validation error,




2. How should I stay safe from duplicating id?