Twitter Bootstrap Question posted in

Open url/file when clicking bootstrap accordion – Twitter bootstrap

I need help with twitter’s bootstrap accordion. I need it to where when i click the accordion title, the title opens up something i href it to.

<div class="container">
<p class="max-width-700 lead">testing</p>
<div class="col-md-6 col-sm-6 mb-sm-30"> 
 <div class="accordion">
 <div class="accordion-title">
<a href="">2014 (Opening)</a>
 </div>

 <div class="accordion-title">
  <a href="">2015 </a>
 </div>
 <div class="accordion-content">
</div>

Something like this, so when i click 2014, it opens up a document or file i have linked it to

Tags:

2

Answers


  1. 0

    You need to open file inside the accordion tab or need open file only like open pdf file an other window ?

    In bootstrap you can’t open link until you remove its according function

    Login or Signup to reply.
  2. 0

    (1)
    Use a boostrap-collapse.js event. See http://getbootstrap.com/2.3.2/javascript.html#collapse

    Give each title a unique id and then add the following js to the end of your HTML.

    $('#myItem1').on('show', function () {
  window.location.href = '1.0.pdf';
})

    (2)
    The accordion is specifically designed to open an underlying hidden content. Using it to open external files is not expected behaviour – I would strongly recommend not using this type of UX – some users will see this as clickbait.

    (3)
    The .accordion class comes from Boostrap 2(?) 2 is no longer supported.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search