Accordion using jquery

Question

Hi, how to hide the panel inside the accordion created using JQuery?

js files:

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="ui.core.js"></script>
<script type="text/javascript" src="ui.accordion.js"></script>

code:

jQuery(document).ready(function() {

 $(document).ready(function() {

     $("#accordion").accordion();

 });

Needs:

According to the user login type the panel should hide(including the heading).

Example:

In my example there are three panels inside the accordion. Only i want to show two of them to the user. How to achieve this?

Answer 1

Not sure if this is what you mean, but to allow an accordion panel to be collapsed, you need to set the accordion collapsible property to true. If you want all the panels to be collapsed initially then you need to set the active property to false initially as well. The jQuery Accordion documentation has a full example on how to do this.

eg

$(document).ready(function(){
  $("#accordion").accordion( { active: false, collapsible: true });
});

Answer 2

Find your DOM element and call hide function.

$("#myElementInsideAccordian").hide();

Answer 3

Your error is caused because your files are in the wrong order. core has to come before the accordion file:

<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="ui.core.js"></script>
<script type="text/javascript" src="ui.accordion.js"></script>

As far as hiding a Panel goes, first see if the aforementioned fix gets rid of your error, then edit your question to provide more detail into what you want.