CODEWITHSUNDEEP
jqueryhoveraccordionmouseoverjquery-tools
rd42
rd42

Reputation: 3594

jquery accordion on mouseover of image

I trying to get an accordion of text to pop up on the mouseover of an image without clicking.

A working demo of text mouseover accordion link

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

and the html with the image

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

but nothing happens and the accordion text is displayed

Getting this error:

$("#accordion").accordion is not a function

Upvotes: 0

Views: 1411

Answers (2)

Eric Goncalves
Eric Goncalves

Reputation: 5353

Could it be because of the </div> after <a href="#"></a><img src="images/icon_satellite.png"></img></a>

Upvotes: 1

Jasper
Jasper

Reputation: 76003

In your document you are linking to the jQuery Tools framework, not the jQuery UI framework. I say this because your demo link goes to the jQuery UI site.

Are you getting an error like [object] does not have method accordion?

You can download a customized version of jQuery UI here: http://jqueryui.com/download. To get the smallest file-size possible, first click Deselect All Components at the top of the page, then select just the accordion widget from the widget list. The necessary parts of jQuery UI will be included in the download.

Update

Giving your code another look-through I noticed you are improperly closing the image tag:

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

should be:

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

Upvotes: 4

Related Questions