纯Javascript生成的Bootstrap4可折叠不会扩展或折叠

Question

So, I'm very new at Javascript. I'm trying to generate a Bootstrap 4 collapsible component using pure javascript. I can build a statically generated Bootstrap 4 collapsible all day long that works just fine. The problem comes in when I try to generate one with pure javascript in a dynamic fashion (createElement, setAttribute, appendChild, and so forth).

When I try and create one this way, it simply doesn't work. I can click on it and it won't expand or collapse but I can issue commands like the following in the developer's console and watch it work just fine (yes, I realize the command below is jQuery, just trying to figure out what's going on):

$('.collapse').collapse('toggle')

Furthermore, when I look at the elements of the page I created dynamically in the developer's console, they match the working example that I created statically.

I've looked across the web for a few hours and tried several different iterations of code (using .class.add() instead of setAttribute() for example) and not run across any solution.

No, no I don't completely know what I'm doing but I'm trying to learn. I have some example code that illustrates the problem I'm having out on jsfiddle.net:

Bootstrap 4 Collapsible Experiment

If anyone can give me some pointers, I'd be very appreciative. Thanks.

Answer 1

There is a typo in your code. Your target and the id of your collapsed element are not the same.

What I did to track the error (maybe will this help you for the next time): I put the example of Bootstrap's site besides your code, and it did work. So I knew Bootstrap was not the origin of the issue.

Then I inspected (within the browser's inspector) both elements to see where they differ.

When I saw a dash ( - ) in your id, I found it weird, because you will avoid using dashes in Javascript: Javascript and CSS, using dashes . So, I discovered the differences between your trigger and your target.