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?

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?

• javascript
• jquery
• html
• css
• jquery-ui

• IDs must be unique in the whole HTML. Use classes instead. – Ricky Stam Commented Oct 31, 2013 at 13:42

5 Answers 5

Just add this CSS

.ui-state-active { display:none }

This will hide the Accordian text and show it when you click close.

You mean the heading "Accordion"? You should give it an ID:

<h3 id="accordionHeader">Accordion</h3>

and then in some button or whatever, add an onclick method

<button onclick='hideHeader()'></button>

Finally, write the hideHeader method:

function hideHeader() {
    $("#accordionHeader").innerHTML = "";
}

This method will make the h3 block empty, essentially hiding it.

If you have multiple accordions that need to be hidden by different buttons, assign them different IDs, i.e. "accordionHeader1", "accordionHeader2" etc.

If you want to hide multiple accordion headers with one query, use classes instead of IDs:

<h3 class="accordionHeader">Accordion</h3>
function hideHeaders() {
    $(".accordionHeader").innerHTML = "";
}

This code will apply the same change to ALL elements whose "class" is accordionHeader.

1) You can detect whether the accordion is open using the code in this answer.

2) You should use a class instead of an id if it repeats throughout the code as documented here.

give you h3 the id title and change your script to this:

<script>
$(function() {
    $( "#accordion" ).accordion({
     collapsible: true,
     active: false
    });
    $("#title").on( "click", function() {
        $("#title").hide();
        return false;
    });
    $("#accordion").on("click", function(){
        $("#title").show(); 
        return false;        
    });
  });
</script>

As per the jQuery documentation,

"If the accordion is currently collapsed, ui.oldHeader and ui.oldPanel will be empty jQuery objects. If the accordion is collapsing, ui.newHeader and ui.newPanel will be empty jQuery objects."

 $("selector").accordion(
        {
          beforeActivate: function( event, ui ) {
          if(ui.newHeader.length == 0 && ui.newPanel.length==0){
          //content is closing

           }
           else{
           //content is opening

           }
         }