TechQA.

Linked Questions

Popular Questions

Self opened Aссordion in Jquery

Asked by At

I have bootstrap Accordion. And I need somehow to run it automatically. To open tab by tab. Currently, I wrote this function But it isn't so smooth as I want. Maybe there is a worked library for that or something.

var index = 5;
function foo (condition) {
// do stuff
if(index !== 5){
  index--;
}

$('#accordion').accordion()

let active = $('#accordion').accordion('option', 'active')
$('#accordion').accordion('option', 'active', active)

$('#accordion').accordion('option', 'active', active)

if (index < 10) {
  $('#accordion').accordion('option', 'active', active + 1)
  index++
} else {
    $('#accordion').accordion('option', 'active', active - 1)

}

setTimeout(foo, 2000)
console.log(index)

}

foo()

html css accordion
Original Q&A

1 Answers

0
Amarat On Best Solutions

Try this:

$(document).ready(function() {
  function foo(condition) {
    $('a[href="#collapse' + condition + '"]').trigger("click");
  }

  var length = $('.panel-heading').length;

  var j = 1;
  window.setInterval(function() {
    if (j > length) j = 1;

    foo(j++)
  }, 2000);
});
<html lang="en">

<head>
  <script type="text/javascript" src="https://cdn.jsdelivr.net/jquery/latest/jquery.min.js"></script>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>

<body>
  <div class="container">
    <h2>Accordion Example</h2>
    <p><strong>Note:</strong> The <strong>data-parent</strong> attribute makes sure that all collapsible elements under the specified parent will be closed when one of the collapsible item is shown.</p>
    <div class="panel-group" id="accordion">
      <div class="panel panel-default">
        <div class="panel-heading">
          <h4 class="panel-title">
            <a data-toggle="collapse" data-parent="#accordion" href="#collapse1">Collapsible Group 1</a>
          </h4>
        </div>
        <div id="collapse1" class="panel-collapse collapse in">
          <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
        </div>
      </div>
      <div class="panel panel-default">
        <div class="panel-heading">
          <h4 class="panel-title">
            <a data-toggle="collapse" data-parent="#accordion" href="#collapse2">Collapsible Group 2</a>
          </h4>
        </div>
        <div id="collapse2" class="panel-collapse collapse">
          <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
        </div>
      </div>
      <div class="panel panel-default">
        <div class="panel-heading">
          <h4 class="panel-title">
            <a data-toggle="collapse" data-parent="#accordion" href="#collapse3">Collapsible Group 3</a>
          </h4>
        </div>
        <div id="collapse3" class="panel-collapse collapse">
          <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
        </div>
      </div>
    </div>
  </div>


</body>

</html>

Related Questions