jQuery accordionchange Accordion



I want to generate an alert whenever an accordion changes state. I found jquery accordionchange function that I am trying to use as follows:

   <script type="text/javascript">
  $(document).ready(function () {
$('#accordion > ul').accordion({ 
  clearStyle: true,
  autoHeight: false
}).bind("accordionchange", function(event, something, ui) {
  alert("hello");
});
 });
    </script>

But, somehow above code does not work. Can anyone help?

I am loading HTML below:

            <div id="accordion">
 <ul id="files-accordion" class="ui-accordion-container" style="padding-top: 10px; width: 550px; clear: both;">
   <li><a href="javascript: void(0)" class="ui-accordion-link">Images</a>
     <div id="files-Image">Loading...</div>
   </li>
   <li><a href="javascript: void(0)" class="ui-accordion-link">Videos</a>
     <div id="files-Video">Loading...</div>
   </li>
   <li><a href="javascript: void(0)" class="ui-accordion-link">Files</a>
     <div id="files-File">Loading...</div>
   </li>
 </ul> 
</div>

The complete code is:

<!DOCTYPE html>
<html>
<head>
  <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
 
   <script type="text/javascript">
  $(document).ready(function () {
$('#accordion > ul').accordion({ 
  clearStyle: true,
  autoHeight: false
}).bind("accordionchange", function(event, something, ui) {
  alert("hello");
});
 });
    </script>
</head>
<body style="font-size:62.5%;">
 
            <div id="accordion">
 <ul id="files-accordion" class="ui-accordion-container" style="padding-top: 10px; width: 550px; clear: both;">
   <li><a href="javascript: void(0)" class="ui-accordion-link">Images</a>
     <div id="files-Image">Loading...</div>
   </li>
   <li><a href="javascript: void(0)" class="ui-accordion-link">Videos</a>
     <div id="files-Video">Loading...</div>
   </li>
   <li><a href="javascript: void(0)" class="ui-accordion-link">Files</a>
     <div id="files-File">Loading...</div>
   </li>
 </ul> 
</div>
 
</body>
</html>
 
 

2 years 4 days ago   Tags:


I tried the above code and it worked correctly. You seem to be loading correct: jquery and accordion libraries.

perfect! thanks for sharing this wonderful code.