Opening a tab in one spry accordian closes a second accordian

Report · May 31, 2019

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!

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

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

</script>

Report · May 31, 2019

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.

Wappler, the only real Dreamweaver alternative.

Report · May 31, 2019

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

Report · May 31, 2019

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

Report · May 31, 2019

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— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Adobe Community

Opening a tab in one spry accordian closes a second accordian

1 Correct answer