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
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
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>
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.
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>
Copy link to clipboard
Copied
As a by the way, this forum is not monitored very well. May I suggest that you fire your questions in the Dreamweaver forum?