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.
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.