JQuery гармошка при наведении мыши на изображение

Question

Я пытаюсь заставить аккордеон текста выскакивать при наведении курсора мыши на изображение, не нажимая.

Рабочая демонстрация текстового аккордеона при наведении мыши ссылка

<!-- JQuery --> 
        <script type="text/javascript" src="js/jquery-1.7.1.js"></script>
        <script type="text/javascript" src="js/jquery.tools.min.js"></script>       
<script>
    $(function() {
        $( "#accordion" ).accordion({
            event: "mouseover"
        });
    });
    </script>

и HTML-код с изображением

<div id="accordion">
   <a href="#"><img  src="images/icon_satellite.png"></img></a>
</div>
                            <div>
                                <p>
                                Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer
                                ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit
                                amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut
                                odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.
                                </p>
                            </div>

, но ничего не происходит, и текст аккордеона отображается

Получение этой ошибки:

$ ("# аккордеон"). Аккордеон не является функцией

Answer 1

В вашем документе вы ссылаетесь на платформу jQuery Tools, а не на среду jQuery UI.Я говорю это потому, что ваша демонстрационная ссылка идет на сайт пользовательского интерфейса jQuery.

Вы получаете сообщение об ошибке типа [object] does not have method accordion?

Вы можете загрузить настроенную версию пользовательского интерфейса jQuery здесь: http://jqueryui.com/download. Чтобы получить наименьший возможный размер файла, сначала нажмите Deselect All Components вверху страницы, затем выберите только виджет аккордеона из списка виджетов.Необходимые части пользовательского интерфейса jQuery будут включены в загрузку.

Обновление

Еще раз просматривая ваш код, я заметил, что вы неправильно закрываете тег изображения:

<a href="#"><img  src="images/icon_satellite.png"></img></a>

должно быть:

<a href="#"><img  src="images/icon_satellite.png" /></a>

Answer 2

Может быть из-за </div> после <a href="#"></a><img src="images/icon_satellite.png"></img></a>