Accordion using jquery

Question

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

Find your DOM element and call hide function.

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

Answer 2

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 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.