Accordion events not firing

Question

I have alerts that should fire on 'activate' and 'beforeActivate' events. Neither of these occur.

Javascript

$(function () {
  $(".accordion").accordion({
    collapsible: false,
    active: true,
    activate: function (event, ui) { alert("activate"); },
    beforeActivate: function (event, ui) { alert("before activate"); }
  });
});

Html

<div>
  <ul>
    <li>0</li>
    <div class="accordion">
        <li>
            <h3><a href="#">First</a></h3>
            <div>
                <ul>
                    <li>1</li>
                    <li>2</li>
                </ul>
            </div>
        </li>
        <li>
            <h3><a href="#">Second</a></h3>
            <div>
                <ul>
                    <li>3</li>
                    <li>4</li>
                </ul>
            </div>
        </li>
    </div>
  </ul>
</div>

I am aware of my incorrect html in nesting div in side of ul.

Answer 1

If you're using 1.8, then you want to use change and changestart as the events:

$( ".selector" ).accordion({
    change: function( event, ui ) {}
});

http://api.jqueryui.com/1.8/accordion

Answer 2

Did you make sure and include the proper reference to the jQueryUI library?

CDN

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.js'></script>

Normal File Reference

<script type='text/javascript' src='.../yourDirectory/jquery-ui.js'></script>

You can see a working example below, which functions properly after including the jQuery UI reference.

Example