CODEWITHSUNDEEP
javascriptbootstrap-4accordion
Wazowski Man
Wazowski Man

Reputation: 97

Creating an accordion through Javascript

I am using Javascript, with no jQuery.

To the accordion title panel I've done this so far:

var accordion = document.createElement('div');
            accordion.className = 'panel-group';
            accordion.id = 'accordion';
            document.getElementById('navgroupsframe').appendChild(accordion);

            var panel = document.createElement('div');
            panel.className = 'panel';
            panel.style.marginLeft = '-15px';
            accordion.appendChild(panel);

            var panelheading = document.createElement('div');
            panelheading.className = 'panel-heading';
            panel.appendChild(panelheading);

            var paneltitle = document.createElement('div');
            paneltitle.className = 'vgroupholder panel-title'

However, I want to get here:

<div class="panel-group" id="accordion">
                            <div class="panel" style="margin-left: -15px;">
                            <div class="panel-heading">
                                <div class="vgroupholder panel-title" data-parent="#accordion" data-toggle="collapse" href="#title1" onclick="removevBgs();">

How do I do this? (add data-parent, etc. with just Javascript, without jQuery).

Thanks.

Upvotes: 1

Views: 356

Answers (1)

Balastrong
Balastrong

Reputation: 4464

You might consider creating the parent element then injecting all the rest with a good old innerHTML since you're not using JQuery :)

var accordion = document.createElement('div');
accordion.className = 'panel-group';
accordion.id = 'accordion';

accordion.innerHTML = `<div class="panel" style="margin-left: -15px;">
                            <div class="panel-heading">
                                <div class="vgroupholder panel-title" data-parent="#accordion" data-toggle="collapse" href="#title1" onclick="removevBgs();"></div>
                             </div>
                       </div>`;

document.getElementById('navgroupsframe').appendChild(accordion);

Upvotes: 1

Related Questions