• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

spry accordion collapse on click only

New Here ,
Jun 30, 2017 Jun 30, 2017

Copy link to clipboard

Copied

Hi All,

At the moment I can have only one accordion tab open at a time, previous panel automatically closes when I click on another tab. I'd like to disable that feature and have panels closing only on click.

Thanks!

our website is here - you can click and see what I mean

http://simplecryoem.com/manuals.html

( I'm better at fortran than javascript

Views

1.7K

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

correct answers 1 Correct answer

Community Expert , Jun 30, 2017 Jun 30, 2017

That is the way that an accordion works. If you want a different behaviour, then have a look at Spry Sliding Panels API.

Having said that, Spry is a very outdated framework, one that was abandoned by Adobe in 2012. One of the reasons I do not use Spry anymore is because it cannot be adapted for touch screens. You are better off having a look at using Bootstrap.

Copy and paste the following code into a new document and view in browser.

<!DOCTYPE html>

<html>

<head>

  <title>Bootstrap from w3schools</ti

...

Votes

Translate

Translate
Community Expert ,
Jun 30, 2017 Jun 30, 2017

Copy link to clipboard

Copied

That is the way that an accordion works. If you want a different behaviour, then have a look at Spry Sliding Panels API.

Having said that, Spry is a very outdated framework, one that was abandoned by Adobe in 2012. One of the reasons I do not use Spry anymore is because it cannot be adapted for touch screens. You are better off having a look at using Bootstrap.

Copy and paste the following code into a new document and view in browser.

<!DOCTYPE html>

<html>

<head>

  <title>Bootstrap from w3schools</title>

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>

</head>

<body>

<div class="btn btn-primary btn-block" role="button" data-toggle="collapse" href="#slide1" aria-expanded="false" aria-controls="collapseExample">

  1st slider

</div>

<div class="collapse" id="slide1">

  <div class="well">

    Content 1

  </div>

</div>

<div class="btn btn-primary btn-block" role="button" data-toggle="collapse" href="#slide2" aria-expanded="false" aria-controls="collapseExample">

  2nd slider

</div>

<div class="collapse" id="slide2">

  <div class="well">

    Content 2

  </div>

</div>

</body>

</html>

Wappler, the only real Dreamweaver alternative.

Votes

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
community guidelines
New Here ,
Jun 30, 2017 Jun 30, 2017

Copy link to clipboard

Copied

Thank you Ben!

Is there an easy way to add a close button to each panel? My content is quite long.

Votes

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
community guidelines
Community Expert ,
Jun 30, 2017 Jun 30, 2017

Copy link to clipboard

Copied

Add the highlighted lines

<!DOCTYPE html>

<html>

<head>

<title>Bootstrap from w3schools</title>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>

</head>

<body>

<div class="btn btn-primary btn-block" role="button" data-toggle="collapse" href="#slide1" aria-expanded="false" aria-controls="collapseExample"> 1st slider </div>

<div class="collapse" id="slide1">

<div class="well">

<p>Content 1 </p>

<div class="btn btn-primary" role="button" data-toggle="collapse" href="#slide1" aria-expanded="false" aria-controls="collapseExample">Close</div>

</div>

</div>

<div class="btn btn-primary btn-block" role="button" data-toggle="collapse" href="#slide2" aria-expanded="false" aria-controls="collapseExample"> 2nd slider </div>

<div class="collapse" id="slide2">

<div class="well">

<p>Content 2 </p>

<div class="btn btn-primary" role="button" data-toggle="collapse" href="#slide2" aria-expanded="false" aria-controls="collapseExample">Close</div>

</div>

</div>

</body>

</html>

Wappler, the only real Dreamweaver alternative.

Votes

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
community guidelines
Community Expert ,
Jun 30, 2017 Jun 30, 2017

Copy link to clipboard

Copied

LATEST

As a by the way, this forum is not monitored very well. May I suggest that you fire your questions in the Dreamweaver forum?

See Dreamweaver support forum

Wappler, the only real Dreamweaver alternative.

Votes

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