Highlighted

Opening a tab in one spry accordian closes a second accordian

New Here ,
May 31, 2019

Copy link to clipboard

Copied

I am using two side-by-side spry accordians in Dreamweaver 5. They look great, however, I only want the viewer to see one accordian tab at any given time. Is it possible to put in an if statement at the end of the html document to instruct the browser to collapse one accordian if the second accordian is opened?

I have tried but javascript is not my area!

<script type="text/javascript">

var Accordion1 = new Spry.Widget.Accordion("Accordion1",{ defaultPanel: -1});

var Accordion2 = new Spry.Widget.Accordion("Accordion2",{ defaultPanel: -1});

        </script>

Adobe Community Professional
Correct answer by Nancy OShea | Adobe Community Professional

charlescdean  wrote


Also, if not using spry, what would be a more recent alternative?

Look at jQuery UI Accordions.. https://jqueryui.com/accordion/#collapsible

A  working example below with the pepper-grinder color theme.  You can choose other themes below or roll your own with Themeroller.

base black-tie blitzer cupertino dark-hive dot-luv eggplant excite-bike flick hot-sneaks humanity le-frog mint-choc overcast pepper-grinder redmond smoothness south-street start sunny swanky-purse trontastic ui-darkness ui-lightness vader

<!doctype html>

<html lang="en">

<head>

<meta charset="utf-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta name="viewport" content="width=device-width, initial-scale=1">

<title>jQuery UI Accordion</title>

<!--jQuery UI Theme, pepper-grinder-->

<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/pepper-grinder/jquery-ui.css">

</head>

<body>

<div id="accordion">

<h3><a href="#">Section 1</a></h3>

<div>

<p>Mauris mauris ante, blandit et, ultrices a, susceros. Nam mi. Proin viverra leo ut odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.</p>

</div>

<h3><a href="#">Section 2</a></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><a href="#">Section 3</a></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</li>

<li>List item</li>

<li>List item</li>

<li>List item</li>

<li>List item</li>

<li>List item</li>

<li>List item</li>

</ul>

</div>

<h3><a href="#">Section 4</a></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>

</div>

<!--/accordion--></div>

<!--latest jQuery core with integrity check-->

<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>

<!--latest jQuery UI with integrity check-->

<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js" integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU=" crossorigin="anonymous"></script>

<script>

//jQuery UI custom settings

$(function(){

    $("#accordion").accordion({

                        collapsible: true,

                        active: true,

                        heightStyle: 'content'

        });

  });

  </script>

</body>

</html>

TOPICS
Create menus in Dreamweaver

Views

394

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

Opening a tab in one spry accordian closes a second accordian

New Here ,
May 31, 2019

Copy link to clipboard

Copied

I am using two side-by-side spry accordians in Dreamweaver 5. They look great, however, I only want the viewer to see one accordian tab at any given time. Is it possible to put in an if statement at the end of the html document to instruct the browser to collapse one accordian if the second accordian is opened?

I have tried but javascript is not my area!

<script type="text/javascript">

var Accordion1 = new Spry.Widget.Accordion("Accordion1",{ defaultPanel: -1});

var Accordion2 = new Spry.Widget.Accordion("Accordion2",{ defaultPanel: -1});

        </script>

Adobe Community Professional
Correct answer by Nancy OShea | Adobe Community Professional

charlescdean  wrote


Also, if not using spry, what would be a more recent alternative?

Look at jQuery UI Accordions.. https://jqueryui.com/accordion/#collapsible

A  working example below with the pepper-grinder color theme.  You can choose other themes below or roll your own with Themeroller.

base black-tie blitzer cupertino dark-hive dot-luv eggplant excite-bike flick hot-sneaks humanity le-frog mint-choc overcast pepper-grinder redmond smoothness south-street start sunny swanky-purse trontastic ui-darkness ui-lightness vader

<!doctype html>

<html lang="en">

<head>

<meta charset="utf-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta name="viewport" content="width=device-width, initial-scale=1">

<title>jQuery UI Accordion</title>

<!--jQuery UI Theme, pepper-grinder-->

<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/pepper-grinder/jquery-ui.css">

</head>

<body>

<div id="accordion">

<h3><a href="#">Section 1</a></h3>

<div>

<p>Mauris mauris ante, blandit et, ultrices a, susceros. Nam mi. Proin viverra leo ut odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.</p>

</div>

<h3><a href="#">Section 2</a></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><a href="#">Section 3</a></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</li>

<li>List item</li>

<li>List item</li>

<li>List item</li>

<li>List item</li>

<li>List item</li>

<li>List item</li>

</ul>

</div>

<h3><a href="#">Section 4</a></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>

</div>

<!--/accordion--></div>

<!--latest jQuery core with integrity check-->

<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>

<!--latest jQuery UI with integrity check-->

<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js" integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU=" crossorigin="anonymous"></script>

<script>

//jQuery UI custom settings

$(function(){

    $("#accordion").accordion({

                        collapsible: true,

                        active: true,

                        heightStyle: 'content'

        });

  });

  </script>

</body>

</html>

TOPICS
Create menus in Dreamweaver

Views

395

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
May 31, 2019 0
Adobe Community Professional ,
May 31, 2019

Copy link to clipboard

Copied

You could use just the one accordion placing half of the tabs in the second row. That way there is no need for extra JS.

Failing that, please upload the site to a (temporary) remote location and supply the URL to the site.

Please note that Spry is a discontinued product which will not behave well in a responsive design.


Ben

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
May 31, 2019 1
New Here ,
May 31, 2019

Copy link to clipboard

Copied

Where would I find the second row of the first accordian?

Also, if not using spry, what would be a more recent alternative?

thanks,

Charles

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
May 31, 2019 0
Adobe Employee ,
May 31, 2019

Copy link to clipboard

Copied

Hi Charles,

Thank you for reaching out. Some more recent alternatives instead of spry are mentioned here: My dreamweaver spry menu bar blue tab does not display anything in properties and let us know if that helps.

Thanks,

Harshika

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
May 31, 2019 1
Adobe Community Professional ,
May 31, 2019

Copy link to clipboard

Copied

charlescdean  wrote


Also, if not using spry, what would be a more recent alternative?

Look at jQuery UI Accordions.. https://jqueryui.com/accordion/#collapsible

A  working example below with the pepper-grinder color theme.  You can choose other themes below or roll your own with Themeroller.

base black-tie blitzer cupertino dark-hive dot-luv eggplant excite-bike flick hot-sneaks humanity le-frog mint-choc overcast pepper-grinder redmond smoothness south-street start sunny swanky-purse trontastic ui-darkness ui-lightness vader

<!doctype html>

<html lang="en">

<head>

<meta charset="utf-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta name="viewport" content="width=device-width, initial-scale=1">

<title>jQuery UI Accordion</title>

<!--jQuery UI Theme, pepper-grinder-->

<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/pepper-grinder/jquery-ui.css">

</head>

<body>

<div id="accordion">

<h3><a href="#">Section 1</a></h3>

<div>

<p>Mauris mauris ante, blandit et, ultrices a, susceros. Nam mi. Proin viverra leo ut odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.</p>

</div>

<h3><a href="#">Section 2</a></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><a href="#">Section 3</a></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</li>

<li>List item</li>

<li>List item</li>

<li>List item</li>

<li>List item</li>

<li>List item</li>

<li>List item</li>

</ul>

</div>

<h3><a href="#">Section 4</a></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>

</div>

<!--/accordion--></div>

<!--latest jQuery core with integrity check-->

<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>

<!--latest jQuery UI with integrity check-->

<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js" integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU=" crossorigin="anonymous"></script>

<script>

//jQuery UI custom settings

$(function(){

    $("#accordion").accordion({

                        collapsible: true,

                        active: true,

                        heightStyle: 'content'

        });

  });

  </script>

</body>

</html>

Nancy O'Shea, ACP
Alt-Web.com

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
May 31, 2019 1