How to implement a dynamic bootstrap 4 accordion using Jquery

0 votes

I'm looking for a way to add a new bootstrap 4 accordion when I click on button. Anybody could you please help me on that? And moreover, code should be implemented in Jquery. That too, I don't know whether it is possible or not to add new accordion dynamically in jquery.

 <script>
  $(document).ready(function(){
    $('#addAccordion').click( function() {
        var newDiv = "<div class='card'> <div class='card-header'> <a class='card-link' data-toggle='collapse' href='#collapseOne'>
        Collapsible Group Item #1</a>
        </div>
      <div id='collapseOne' class='collapse show' data-parent='#accordion'>
        <div class='card-body'>Lorem ipsum dolor sit amet,</div> </div> </div>";
        $('.display').append(newDiv);
           
    });
    });
</script>
<div id="accordion">
    <div class="card">
      <div class="card-header">
        <a class="card-link" data-toggle="collapse" href="#collapseOne">
          Collapsible Group Item #1
        </a>
      </div>
      <div id="collapseOne" class="collapse show" data-parent="#accordion">
        <div class="card-body">
          Lorem ipsum dolor sit amet, 
        </div>
      </div>
    </div>
    
    
  </div>
  
    <div class="display"> </div>
    
     <button id="addAccordion">Add new accordion</button>

Jun 7, 2022 in JQuery by Edureka
• 13,690 points
3,937 views

1 answer to this question.

0 votes

With this you can add dynamic accordion also open and close accordion dynamically

let id = 0
$('#addAccordion').click(() => {
id++
       var test = "<div class='card'> <div class='card-header'> <a class='card-link' data-toggle='collapse' href='#collapse"+id+"'>" +
         "Collapsible Group Item "+id+"</a> </div> <div id='collapse"+id+"' class = 'collapse' data-parent = '#accordion' ><div class='card-body'> Lorem ipsum dolor sit amet, </div> </div> </div>";
       $('.display').append(test);
     });
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<div id="accordion">
    <div class="card">
      <div class="card-header">
        <a class="card-link" data-toggle="collapse" href="#collapseOne">
          Collapsible Group Item #1
        </a>
      </div>
      <div id="collapseOne" class="collapse show" data-parent="#accordion">
        <div class="card-body">
          Lorem ipsum dolor sit amet, 
        </div>
      </div>
    </div>
    <div class="card">
      <div class="card-header">
        <a class="collapsed card-link" data-toggle="collapse" href="#collapseTwo">
        Collapsible Group Item #2
      </a>
      </div>
      <div id="collapseTwo" class="collapse" data-parent="#accordion">
        <div class="card-body">
          consectetur adipisicing 
        </div>
      </div>
    </div>
    
  </div>
  
    <div class="display"> </div>
answered Jun 7, 2022 by Edureka
• 13,690 points

Related Questions In JQuery

0 votes
1 answer

How to open a Bootstrap 4 modal dialog using jQuery

Use the modal('show') Method You can simply use ...READ MORE

answered Jun 28, 2022 in JQuery by rajatha
• 7,680 points
7,194 views
0 votes
1 answer

How to scroll to element from bottom to top with a nice animation using Jquery?

Hello @kartik, Assuming you have a button with ...READ MORE

answered Sep 10, 2020 in JQuery by Niroj
• 82,840 points
4,254 views
0 votes
0 answers

How to replace innerHTML of a div using jQuery?

How could I achieve the following: document.all.regTitle.innerHTML = ...READ MORE

May 31, 2022 in JQuery by Edureka
• 13,690 points
1,780 views
0 votes
1 answer

How to trigger a click on a link using jQuery

$( "#foo" ). trigger( "click" ); As of jQuery ...READ MORE

answered Jun 10, 2022 in JQuery by rajatha
• 7,680 points
728 views
0 votes
0 answers

How to show message in model body if bootstrap model have no data in jquery

I'm trying to display a text message ...READ MORE

Jul 29, 2022 in Web Development by gaurav
• 23,260 points
754 views
0 votes
1 answer

What is jQuery?

Hey, jQuery is a fast and concise JavaScript ...READ MORE

answered Feb 14, 2020 in JQuery by kartik
• 37,520 points
1,321 views
0 votes
1 answer

Uncaught TypeError: Cannot read property 'msie' of undefined - jQuery tools

Hello, Use the following script tag in your ...READ MORE

answered Apr 28, 2020 in JQuery by Niroj
• 82,840 points
15,715 views
0 votes
1 answer

Uncaught Error: Bootstrap's JavaScript requires jQuery

Hello @kartik, You have provided wrong order for ...READ MORE

answered Apr 28, 2020 in JQuery by Niroj
• 82,840 points
23,301 views
0 votes
1 answer

How to make a simple modal pop up form using jquery and html?

Create A Modal <button onclick="document.getElementById('id01').style.display='block'" class="w3-button">Open Modal</button> ... <div ...READ MORE

answered Jun 2, 2022 in JQuery by Edureka
• 13,690 points
7,577 views
0 votes
1 answer

How to trigger a click on a link using jQuery

If you are trying to trigger an ...READ MORE

answered Jun 3, 2022 in JQuery by Edureka
• 13,690 points
16,426 views
webinar REGISTER FOR FREE WEBINAR X
REGISTER NOW
webinar_success Thank you for registering Join Edureka Meetup community for 100+ Free Webinars each month JOIN MEETUP GROUP