Participating Frequently

Answered

Opening jQuery UI accordion with a link

Forum|Forum|12 years ago
December 23, 2013
1 reply
17030 views

I need to create a link that once clicked goes to a jQuery UI accordion. I want the link to open up the accordion when its clicked.

I have been following the instructions on: http://foundationphp.com/tutorials/jqui_specific.php

I have added jQuery in my test page but cant figure out how to get the thing to open from a link.

It doesnt look like it should be to difficult but I have been stuck for hours now...

The guide says:

" Locate the code that initializes the jQuery UI accordion. It should look similar to this:

"

I dont have anything with $ and when I try to add it I get error messages?

Thanks for any help!

This topic has been closed for replies.

Correct answer BenPleysier

Sorry, but as soon as I saw two separate calls in your document to the jQuery library and a link to SpryCollapsiblePanel.css, I did not bother wading through the code.

Instead I'll show you what the markup should look like for the jQuery Accordion, assuming that the jQuery resources reside in the Assets directory.

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<link href="Assets/jquery.ui.core.min.css" rel="stylesheet">
<link href="Assets/jquery.ui.theme.min.css" rel="stylesheet">
<link href="Assets/jquery.ui.accordion.min.css" rel="stylesheet">
</head>
<body>
<div id="Accordion1">
<h3><a href="#">Section 1</a></h3>
<div>
    <p>Content 1</p>
</div>
<h3><a href="#">Section 2</a></h3>
<div>
    <p>Content 2</p>
</div>
<h3><a href="#">Section 3</a></h3>
<div>
    <p>Content 3</p>
</div>
</div>
<script src="Assets/jquery-1.8.3.min.js"></script>
<script src="Assets/jquery-ui-1.9.2.accordion.custom.min.js"></script>
<script>
$(function() {
    var defaultPanel = parseInt(getParam('panel'));
    $( "#Accordion1" ).accordion(
        {active: defaultPanel}
    );
});
function getParam(name) {
    var query = location.search.substring(1);
    if (query.length) {
        var parts = query.split('&');
        for (var i = 0; i < parts.length; i++) {
            var pos = parts.indexOf('=');
            if (parts.substring(0,pos) == name) {
                return parts.substring(pos+1);
            }
        }
    } return 0;
}
</script>
</body>
</html>

If you copy and paste the above code into a new document called untitled.html and view it in your favourite browser, you will see the default jQuery Accordion with the first panel open as in

Now add ?panel=1 to the URL and you will see that it has open the second panel as in

BenPleysier

Correct answer

Community Expert

Sorry, but as soon as I saw two separate calls in your document to the jQuery library and a link to SpryCollapsiblePanel.css, I did not bother wading through the code.

Instead I'll show you what the markup should look like for the jQuery Accordion, assuming that the jQuery resources reside in the Assets directory.

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<link href="Assets/jquery.ui.core.min.css" rel="stylesheet">
<link href="Assets/jquery.ui.theme.min.css" rel="stylesheet">
<link href="Assets/jquery.ui.accordion.min.css" rel="stylesheet">
</head>
<body>
<div id="Accordion1">
<h3><a href="#">Section 1</a></h3>
<div>
    <p>Content 1</p>
</div>
<h3><a href="#">Section 2</a></h3>
<div>
    <p>Content 2</p>
</div>
<h3><a href="#">Section 3</a></h3>
<div>
    <p>Content 3</p>
</div>
</div>
<script src="Assets/jquery-1.8.3.min.js"></script>
<script src="Assets/jquery-ui-1.9.2.accordion.custom.min.js"></script>
<script>
$(function() {
    var defaultPanel = parseInt(getParam('panel'));
    $( "#Accordion1" ).accordion(
        {active: defaultPanel}
    );
});
function getParam(name) {
    var query = location.search.substring(1);
    if (query.length) {
        var parts = query.split('&');
        for (var i = 0; i < parts.length; i++) {
            var pos = parts.indexOf('=');
            if (parts.substring(0,pos) == name) {
                return parts.substring(pos+1);
            }
        }
    } return 0;
}
</script>
</body>
</html>

If you copy and paste the above code into a new document called untitled.html and view it in your favourite browser, you will see the default jQuery Accordion with the first panel open as in

Now add ?panel=1 to the URL and you will see that it has open the second panel as in

Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!

D

DWQuestAuthor

Participating Frequently

Awesome! Thanks Ben, you made that so simple and it's very much appreciated!

D

DWQuestAuthor

Participating Frequently

Im having a problem... I dont want the "panel" to be open unless the link is selected from menu. As of right now the panel is always open when you visit the page HERE , (I ONLY HAVE THE ''CIRCUS" AS DEMO)

I want the user to be able to select from the drop down menu.

Then drop to the bookmarked hotel and the panel opens in the selected accordian.

Thank You for your help!

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.

Scanning file for viruses.

This file cannot be downloaded