Cannot read property 'querySelectorAll' of null bootstrap collapse

user_4862390 0
Viewed 24950

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>
twitter-bootstrap php jquery javascript
7 Answers

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.

user_11145300

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.

user_7676250

This problem happened to me with the usage of bootstrap 4.1.3, I was not noticing it before.

For me, the problem is that the data-parent attribute of the collapse element held a reference to a non-existing element.

Once I changed it to a valid element, the problem disappeared.

user_20283040

Make sure that if you are doing custom inclusion of the bootstrap javascript plugins separately, that you include util.js before collapse.js.

That's what did the trick for me.

user_20772810
user_48274970

Besides collapse.js, you need to load bootsrap util.js too

user_19573290

The problem is because your ul id="accordionSidebar" is the same as your a data-parent="#accordionExample".

Try:

<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>
user_63852750
Related