Skip to main content
dominikae92095962
dominikae92095962
Participant
June 30, 2017
Answered

spry accordion collapse on click only

  • June 30, 2017
  • 1 reply
  • 1861 views

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

    This topic has been closed for replies.
    Correct answer BenPleysier

    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>

    1 reply

    BenPleysier
    Community Expert
    BenPleysierCommunity ExpertCorrect answer
    Community Expert
    June 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</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 is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!
    dominikae92095962
    dominikae92095962Author
    Participant
    July 1, 2017

    Thank you Ben!

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

    BenPleysier
    Community Expert
    BenPleysierCommunity Expert
    Community Expert
    July 1, 2017

    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 is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!
    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices