Javascript - Jquery link not working

Question

I am trying to work on an example that I found : http://jsfiddle.net/VZ3T5/1/

But as the code works really fine, I can assume that my link for Jqueryui 1.9.2 doesn't...

Here the code that I try :

<html>
<head>

<link rel="stylesheet" href="https://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.9.1.js"></script>
 <script src="https://code.jquery.com/ui/1.9.2/jquery-ui.js"></script> 
<link href="css/ui-lightness/jquery-ui-1.9.2.custom.css" rel="stylesheet">
<script>
var $accordion = $("#accordion");

$accordion.accordion();

$(".opener").on("click", function () {
var $this = $(this),
    toOpen = $this.data("panel");

$accordion.accordion("option", "active", toOpen);

return false;
});

</script>
</head>

<body>

 <a class="opener" data-panel="0" href="#">Open Section 1</a>

 <a class="opener" data-panel="1" href="#">Open Section 2</a>

 <a class="opener" data-panel="2" href="#">Open Section 3</a>

 <a class="opener" data-panel="3" href="#">Open Section 4</a>

 <div id="accordion">

 <h3>Section 1</h3>

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

<h3>Section 2</h3>

<div>
    <p>Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet
        purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor
        velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In suscipit
        faucibus urna.</p>
</div>

<h3>Section 3</h3>

<div>
    <p>Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis.
        Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac libero
        ac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quis lacinia
        ornare, quam ante aliquam nisi, eu iaculis leo purus venenatis dui.</p>
    <ul>
        <li>List item one</li>
        <li>List item two</li>
        <li>List item three</li>
    </ul>
</div>

<h3>Section 4</h3>

<div>
    <p>Cras dictum. Pellentesque habitant morbi tristique senectus et netus et
        malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in faucibus
        orci luctus et ultrices posuere cubilia Curae; Aenean lacinia mauris vel
        est.</p>
    <p>Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus.
        Class aptent taciti sociosqu ad litora torquent per conubia nostra, per
        inceptos himenaeos.</p>
</div>
</div>
</body>
</html>

Thanks in advance

What is the problem? What part is not working as expected?

leo
– leo

2014-04-08 06:59:53 +00:00
Commented Apr 8, 2014 at 6:59 — leo
– leo, Commented Apr 8, 2014 at 6:59

Vadim · Accepted Answer · 2014-04-08 06:47:32Z

2

Your code must be inside the document.ready

Try this

$(function () {

    var $accordion = $("#accordion");

    $accordion.accordion();

    $(".opener").on("click", function () {
        var $this = $(this),
            toOpen = $this.data("panel");

        $accordion.accordion("option", "active", toOpen);

        return false;
    });

});

edited Apr 8, 2014 at 6:47

Vadim

8,7744 gold badges47 silver badges52 bronze badges

answered Apr 8, 2014 at 6:44

Sridhar R

20.4k7 gold badges41 silver badges35 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

amir.shariflou · Accepted Answer · 2014-04-08 07:25:34Z

1

$(document).ready(function () {
    var $accordion = $("#accordion");
    $accordion.accordion();
    $(".opener").on("click", function () {
        var $this = $(this),
            toOpen = $this.data("panel");
        $accordion.accordion("option", "active", toOpen);
        return false;
    });
});

answered Apr 8, 2014 at 7:25

amir.shariflou

263 bronze badges

1 Comment

Jason Aller Over a year ago

Perhaps you can explain to the person who posed the question why this works. Talk them through $(document).ready(function () { and the other changes you made.

bensonsearch · Accepted Answer · 2014-04-08 06:47:15Z

0

What doesn't seem right?

Try using googles links

//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js

and the css

//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css

answered Apr 8, 2014 at 6:47

bensonsearch

3121 silver badge8 bronze badges

Comments

Amit Joki · Accepted Answer · 2014-04-08 06:47:52Z

0

DOM must be ready before you access its elements.

Do this:

$(function () {
    var $accordion = $("#accordion");
    $accordion.accordion();
    $(".opener").on("click", function () {
        var $this = $(this),
        toOpen = $this.data("panel");
        $accordion.accordion("option", "active", toOpen);
        return false;
    });
});

Also note that:

$(function(){

});

is the short notation of $(document).ready(function(){});

answered Apr 8, 2014 at 6:47

Amit Joki

59.4k7 gold badges80 silver badges96 bronze badges

Comments

Milind Anantwar · Accepted Answer · 2014-04-08 06:48:25Z

0

You have wrapped the script in head which would result into this

write the script in $(document).ready()

$(document).ready(function () {
    var $accordion = $("#accordion");
    $accordion.accordion();
    $(".opener").on("click", function () {
        var $this = $(this),
            toOpen = $this.data("panel");
        $accordion.accordion("option", "active", toOpen);
        return false;
    });
});

edited Apr 8, 2014 at 6:48

answered Apr 8, 2014 at 6:44

Milind Anantwar

82.3k26 gold badges97 silver badges128 bronze badges

Collectives™ on Stack Overflow

Javascript - Jquery link not working

5 Answers 5

Comments

1 Comment

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related