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>
1 year 42 weeks ago
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.
Post Comment