Setting Bootstrap Accordion to be closed & expand tab on click

Question

I am having a similar problem to the question first posted here. bootstrap initially collapsed element I have tried using the notes from this question in troubleshooting my own code, but so far I haven't gotten it to work.

Basically, I have an accordion list nested within another accordion. So far, my first accordion menu is set to be collapsed when first viewing. However, the accordion menu nested within it always has one tab open, and it's not always even the same tab (for example, sometime the first tab is the one that is expanded/showing, and other times its the last or the second tab.)

Since my accordion is set to collapse, and never had a "collapse in" element, I'm really not sure why it is expanding? I've also tried changing my data-toggle to false, and to collapse, respectively, but I'm not sure if I am getting the formatting wrong, and that is why it won't work.

<div role="tablist" id="accordion-1">
                        <div class="card">
                            <div class="card-header" role="tab">
                                <h5 class="mb-0"><a data-toggle="collapse" aria-expanded="false" aria-controls="accordion-1 .item-1" href="div#accordion-1 .item-1">Computers</a></h5>
                            </div>
                            <div class="collapse item-1" role="tabpanel" data-parent="#accordion-1">
                                <div class="card-body">
                                    <div role="tablist" id="accordion-2">
                                        <div class="card">
                                            <div class="card-header" role="tab">
                                                <h5 class="mb-0"><a data-toggle="collapse" aria-controls="accordion-2 .item-1" href="div#accordion-2 .item-1">Windows 10</a></h5>
                                            </div>
                                            <div class="collapse item-1" role="tabpanel" data-parent="#accordion-2">
                                                <div class="card-body">
                                                    <p class="card-text">i. Connect to any Wi-Fi network.</p>
                                                    <p class="card-text">ii. Click on your Wi-Fi icon</p><img src="___.PNG">
                                                    <p class="card-text">iii. In the available Wi-Fi network list, underneath the Instaconnect Wi-Fi network, click on Properties.&nbsp;</p>
                                                    <p class="card-text"><img src="___.png"></p>
                                                    <p class="card-text">iv. In the new window, scroll all the way to the bottom. The WiFi MAC address is listed as the Physical (MAC) Address</p>
                                                    <p class="card-text"><img src="___.png"></p>
                                                    <p class="card-text">v. Register this to the resident's account as a Desktop or Laptop.</p>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="card">
                                            <div class="card-header" role="tab">
                                                <h5 class="mb-0"><a data-toggle="collapse" aria-expanded="false" aria-controls="accordion-2 .item-2" href="div#accordion-2 .item-2">Windows XP, Vista, 7, 8</a></h5>
                                            </div>
                                            <div class="collapse item-2" role="tabpanel" data-parent="#accordion-2">
                                                <div class="card-body">
                                                    <p class="card-text">i. Click on Windows icon on the Desktop, or click the Windows button on your keyboard.</p>
                                                    <p class="card-text">ii. In the search bar, type in "command prompt" or "cmd."&nbsp;</p>
                                                    <p class="card-text"><img src="___.png"></p>
                                                    <p class="card-text">iv. In Command Prompt, type in "ipconfig/all."&nbsp;</p>
                                                    <p class="card-text"><img src="___.png"></p>
                                                    <p class="card-text">v. Scroll down and locate the Wireless LAN Adapter section.&nbsp;</p>
                                                    <p class="card-text"><img src="___.png"></p>
                                                    <p class="card-text">vi. In that section, the Wi-Fi MAC Address is listed as the Physical Address.&nbsp;</p>
                                                    <p class="card-text">vii. Register this to the resident's account as a Desktop or Laptop</p>
                                                    <p class="card-text"></p>
                                                </div>
                                            </div>
                                        </div>
             </div>
                                    </div>
                                </div>
                            </div>
                        </div>

I used bootstrap studio to create the bones of the site, and since exporting it I have been editing it through text wrangler and dreamweaver — Emma Chisholm, Sep 16 '19 at 18:56

Otávio Barreto · Accepted Answer · 2019-09-17T00:05:16.500

If you read bootstrap documentation it tells you to initialize via jquery

$('.collapse').collapse()

This is what are you looking for:

   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>


  
  <div class="panel-group" id="accordion">
<div class="panel panel-default">
  <div class="panel-heading">
<h4 class="panel-title">
  <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" id="main" href="#collapseOne">
  <div class="card">
  <div class="card-header">
   Computers
</div>
  </a>
</h4>
  </div>
  <div class="card-body">
  <div id="collapseOne" class="panel-collapse collapse in">
<div class="panel-body">
   <div class="panel panel-default">
  <div class="panel-heading">
<h4 class="panel-title">
  <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" id="1" href="#collapseTwo">
  <div class="card">
  <div class="card-header">
   Windows 10
</div>
  </a>
</h4>
  </div>
  <div id="collapseTwo" class="panel-collapse collapse">
<div class="card">
 
  <div class="card-body">

   <p class="card-text">i. Connect to any Wi-Fi network.</p>
                                        <p class="card-text">ii. Click on your Wi-Fi icon</p><img src="___.PNG">
                                        <p class="card-text">iii. In the available Wi-Fi network list, underneath the Instaconnect Wi-Fi network, click on Properties.&nbsp;</p>
                                        <p class="card-text"><img src="___.png"></p>
                                        <p class="card-text">iv. In the new window, scroll all the way to the bottom. The WiFi MAC address is listed as the Physical (MAC) Address</p>
                                        <p class="card-text"><img src="___.png"></p>
                                        <p class="card-text">v. Register this to the resident's account as a Desktop or Laptop.</p>
  </div>
</div></br>
  </div></div>
</div>
<div class="panel panel-default">
  <div class="panel-heading">
<h4 class="panel-title">
  <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" id="2" href="#collapseThree">
  <div class="card">
  <div class="card-header">
Windows XP, Vista, 7, 8
</div> </div>
  </a>
</h4>
  </div>
  <div id="collapseThree" class="panel-collapse collapse">
  <div class="card">
 <div class="card-body"> <p class="card-text">i. Click on Windows icon on the Desktop, or click the Windows button on your keyboard.</p>
                                        <p class="card-text">ii. In the search bar, type in "command prompt" or "cmd."&nbsp;</p>
                                        <p class="card-text"><img src="___.png"></p>
                                        <p class="card-text">iv. In Command Prompt, type in "ipconfig/all."&nbsp;</p>
                                        <p class="card-text"><img src="___.png"></p>
                                        <p class="card-text">v. Scroll down and locate the Wireless LAN Adapter section.&nbsp;</p>
                                        <p class="card-text"><img src="___.png"></p>
                                        <p class="card-text">vi. In that section, the Wi-Fi MAC Address is listed as the Physical Address.&nbsp;</p>
                                        <p class="card-text">vii. Register this to the resident's account as a Desktop or Laptop</p>
                                        <p class="card-text"></p>
                                    </div>
</div>
  </div>
</div>


  </div>
</div>
  </div>
</div>

Another example outside bootstrap card

   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>


  
  <div class="panel-group" id="accordion">
<div class="panel panel-default">
  <div class="panel-heading">
<h4 class="panel-title">
  <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" id="main" href="#collapseOne">
  <div class="card">
  <div class="card-header">
   Computers
</div>
  </a>
</h4>
  </div>
  <div class="card-body">
  <div id="collapseOne" class="panel-collapse collapse in">
<div class="panel-body">
   <div class="panel panel-default">
  <div class="panel-heading">
<h4 class="panel-title">
  <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" id="1" href="#collapseTwo">
  <div class="card">
  <div class="card-header">
   Windows 10
    </div>
  </a>
</h4>
  </div>
  <div id="collapseTwo" class="panel-collapse collapse">
 <div class="card-body">
                                            <p class="card-text">i. Connect to any Wi-Fi network.</p>
                                            <p class="card-text">ii. Click on your Wi-Fi icon</p><img src="___.PNG">
                                            <p class="card-text">iii. In the available Wi-Fi network list, underneath the Instaconnect Wi-Fi network, click on Properties.&nbsp;</p>
                                            <p class="card-text"><img src="___.png"></p>
                                            <p class="card-text">iv. In the new window, scroll all the way to the bottom. The WiFi MAC address is listed as the Physical (MAC) Address</p>
                                            <p class="card-text"><img src="___.png"></p>
                                            <p class="card-text">v. Register this to the resident's account as a Desktop or Laptop.</p>
                                        </div>
  </div></div>
</div>
<div class="panel panel-default">
  <div class="panel-heading">
<h4 class="panel-title">
  <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" id="2" href="#collapseThree">
  <div class="card">
  <div class="card-header">
    Windows XP, Vista, 7, 8
    </div> </div>
  </a>
</h4>
  </div>
  <div id="collapseThree" class="panel-collapse collapse">
 <div class="card-body">
                                            <p class="card-text">i. Click on Windows icon on the Desktop, or click the Windows button on your keyboard.</p>
                                            <p class="card-text">ii. In the search bar, type in "command prompt" or "cmd."&nbsp;</p>
                                            <p class="card-text"><img src="___.png"></p>
                                            <p class="card-text">iv. In Command Prompt, type in "ipconfig/all."&nbsp;</p>
                                            <p class="card-text"><img src="___.png"></p>
                                            <p class="card-text">v. Scroll down and locate the Wireless LAN Adapter section.&nbsp;</p>
                                            <p class="card-text"><img src="___.png"></p>
                                            <p class="card-text">vi. In that section, the Wi-Fi MAC Address is listed as the Physical Address.&nbsp;</p>
                                            <p class="card-text">vii. Register this to the resident's account as a Desktop or Laptop</p>
                                            <p class="card-text"></p>
                                        </div>
</div>
  </div>
</div>


  </div>
</div>
  </div>
</div>

When I test this, the first tab is still expanded. Would setting the collapse height to 0 in the JS section change this? I am trying to make it appear closed. — Emma Chisholm, Sep 16 '19 at 18:54
So you also want to hide `computers` tab when clicked another tab? os just rezise the size of the `windows 10 tab` to fit the `computers tab` — Otávio Barreto, Sep 16 '19 at 18:57
No, I want the tabs nested inside the computers tab to both be collapsed. Right now the first one is expanded. — Emma Chisholm, Sep 16 '19 at 18:58
Like `windows 10` and `Windows XP, Vista, 7, 8` show and hide when click computers tab? expand both you mean? — Otávio Barreto, Sep 16 '19 at 19:01
Like their headers saying windows 10 & windows XP, Vista, 7, 8 would show, but the content/instructions inside wouldn't show unless it is clicked. — Emma Chisholm, Sep 16 '19 at 19:03
You are welcome @EmmaChisholm I improved the first example It's more stylized now inside the bootstrap card, If it solved your problem mark answer as right, it will help others to find a solution too. — Otávio Barreto, Sep 17 '19 at 00:07

Setting Bootstrap Accordion to be closed & expand tab on click

1 Answers1