1

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.

riverRook
  • 13
  • 2
  • You need `
    ` in your HTML. If it's true that you have no problem creating a collapsible from static HTML, then I advise that you do that first then work on each component from markup to script.ATM you look like you skip steps or missing chunks of logic. I also think you should seriously learn about events.     – zer00ne Jan 18 '18 at 23:49
  • @zer00ne, thanks for the feedback. You are right that the example isn't something I'd include in a formal coding environment. I simply wanted to get something out quickly to ensure I wasn't missing something I'd have no idea about due to my currently limited knowledge base. I do have one question though. Did you see something specific in the code that lead you towards the 'learn about events' comment? Just want to be sure I'm not misunderstanding something else. Thanks! – riverRook Jan 19 '18 at 00:32
  • A common pattern I've noticed in code written by n00bs is their lack of understanding of events. User interaction require that code must be event oriented. Using Bootstrap API does a lot of that code "under the hood" so it's a poor way to learn JavaScript/jQuery. – zer00ne Jan 19 '18 at 02:45
  • OK, that makes perfect sense. As time permits, I do plan on taking a deeper dive into the language and events are definitely a part of that plan. Thanks for taking the time to submit the feedback. – riverRook Jan 19 '18 at 14:13

1 Answers1

0

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.

f-spin
  • 162
  • 10
  • Thanks so much for taking the time to go through this. I was close to quitting. Sometimes it takes another pair of eyes I suppose. That code that I posted to jsfiddle.net was a quick mock-up of this specific problem I had in a much larger code segment. I'm hoping I made the same stupid mistake twice. Thanks sincerely. – riverRook Jan 19 '18 at 00:29