Cannot read property 'querySelectorAll' of null bootstrap collapse

Question

I am writing php code for bootstrap collapse and taking error Cannot read property 'querySelectorAll' of null. I spend really a lot of time to this simple problem. If I put without php that is working really norm without error Error is:

Uncaught TypeError: Cannot read property 'querySelectorAll' of null at a.t._getParent (collapse.js:300) at new a (collapse.js:88) at HTMLDivElement.<anonymous> (collapse.js:345) at Function.each (jquery.js:368) at jQuery.fn.init.each (jquery.js:157) at jQuery.fn.init.a._jQueryInterface [as collapse] (collapse.js:331) at HTMLDivElement.<anonymous> (collapse.js:378) at Function.each (jquery.js:368) at jQuery.fn.init.each (jquery.js:157) at HTMLButtonElement.<anonymous> (collapse.js:374) 

That is my php code

<div id="info-content" class="accordion" id="accordionExample">                   <?                     $faqs = get_field('faqs');                     foreach ($faqs as $key => $value):                   ?>                   <div class="card">                     <div class="card-header" id="headingOne<?=$key;?>">                       <h5 class="mb-0">                         <button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapseOne<?=$key;?>" aria-expanded="true" aria-controls="collapseOne<?=$key;?>">                           <?=$value['question'];?>                         </button>                       </h5>                       <i class="fas fa-plus"></i>                     </div>                     <div id="collapseOne<?=$key;?>" class="collapse <?if($key==0):?>show<?endif;?>" aria-labelledby="headingOne<?=$key;?>" data-parent="#accordionExample">                       <div class="card-body">                         <?=$value['answer'];?>                       </div>                     </div>                   </div>                   <?endforeach;?>                 </div> 

Answer 1

This is due to a change in Bootstrap 4.1.1 or 2 to 4.1.3.

Same error happens when you use data-parent="selector" while it should be data-parent="#selectorId" or data-parent=".selectorClassName".

This error used to void silently but now it displays this console error.

Answer 2

I had the same problem too. For me it was due to missing id in the main navbar container. See the id the ul below,

<ul class="navbar-nav bg-gradient-primary sidebar sidebar-dark accordion" id="accordionSidebar">    <!-- Nav Item - Dashboard -->    <li class="nav-item">     <a class="nav-link collapsed" href="#" data-toggle="collapse" data-target="#collapseUtilities" aria-expanded="true" aria-controls="collapseUtilities">       <i class="fas fa-fw fa-wrench"></i>       <span>Utilities</span>     </a>     <div id="collapseUtilities" class="collapse" aria-labelledby="headingUtilities" data-parent="#accordionSidebar">       <div class="bg-white py-2 collapse-inner rounded">         <h6 class="collapse-header">Custom Utilities:</h6>         <a class="collapse-item" href="utilities-color.html">Colors</a>         <a class="collapse-item" href="utilities-border.html">Borders</a>         <a class="collapse-item" href="utilities-animation.html">Animations</a>         <a class="collapse-item" href="utilities-other.html">Other</a>       </div>     </div>  </li>      </ul> 

Hope this helps someone.

Cheers.