Making a dynamic accordion using JavaScript

I am currently coding in Javascript, without utilizing jQuery.

Progress so far on the accordion title panel:

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'

Goal is to achieve this structure:

<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 can I accomplish this task? (including data-parent, etc. using only pure Javascript, without relying on jQuery).

Appreciate any assistance.

javascriptbootstrap-4accordion

Answer №1

If you're not using JQuery, one way to approach this is by first creating the parent element and then inserting the remaining elements using good old-fashioned innerHTML.

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);

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

A simple way to retrieve the computed value from one ng-model and assign it to a different ng

I am facing an issue where I have 3 ng-models and I need to fetch calculated data from the first two into the third one using angularjs I attempted a solution but it doesn't seem to work as expected Below is the HTML code snippet: var urlt = ' ...

javascriptangularjs

Is there a way to collapse just one specific row in Angular?

I am struggling to toggle only the selected row, any suggestions? Take a look at my code and demonstration here: https://stackblitz.com/edit/test-trainin-2-gv9glh?file=src%2Fapp%2Fapp.component.scss Currently, all rows are being toggled when clicked, but ...

javascripthtmlangular

Starting with React.js in Rails 5

I'm currently diving into the world of integrating react.js into my Rails 5 application. After adding the react-rails gem to my project, I utilized the generator to create my initial component with the command: rails generate react:component AppRole ...

javascriptruby-on-railsrubyreactjs

What is the best way to receive a callback when a user cancels a dialog box to choose a mobile app after clicking on

I am currently exploring HTML coding for mobile devices and looking to integrate map routing functionality. When it comes to mobile devices, utilizing the local app is the more practical option, and I have had success implementing this by modifying the l ...

javascripthtmlmobile

Update web page content using JavaScript onClick

I'm trying to figure out how to refresh my page every time a door is clicked. Can anyone help me with where I should add window.location.reload(); in my code? Here's the link to my pen: https://codepen.io/tacodestroyer/pen/bROpeQ function open ...

javascriptjqueryhtmlcss

Guide on using ajax to redirect a php page with data transfer?

Although my question shares the same title as many others here, unfortunately I haven't been able to find a solution in the provided answers. The issue I'm facing is with redirecting the page to the OCR result after capturing a screenshot of a Go ...

javascriptphpajax

Trigger the Modal once the navigation step is completed

When navigating to a new page, I need to wait for the navigation process to complete in order for the modal template to be properly displayed on the destination page. public onOpenModal(item) { this.router.navigate([item.link]).then(() => { this. ...

javascriptangularmodal-dialog

Make sure to modify the URL and store the response from Axios

My current code allows users to input a device name, then when I click on "View", an axios request is sent to a service and a response is received. Using this response, I display a design relating to the device name entered, and this functionality works sm ...

javascriptreactjsurlhttp-redirectaxios

What is the best way to insert fresh input values into a different element?

click here to view image description I am working with an input element where I take input values and store them in an element. However, I would like to know how to input new values into the next element. Any assistance would be greatly appreciated. Thank ...

javascripthtmlvisual-web-developer

How to incorporate a hyperlink into an Ajax-generated HTML table

I've successfully used thymeleaf in the past, but I'm having trouble implementing it with JavaScript and Ajax get requests. Essentially, I have a table that is generated dynamically. In my HTML script, an Ajax get request fetches and displays a ...

javascriptajax

PHP script encountering difficulty inserting data into database when AJAX is utilized; functions flawlessly without AJAX

In my "user registration" file, there is a form with the following structure: <form action="" method="POST"> <label for="user" class="control-label">User </label> <input type="text" name="user" class="form-control" id="user" ...

javascriptphpmysqlajax

Collect all the attribute values of the checkboxes that have been checked and convert them

Is there a way to retrieve the attribute values of all checked checkboxes as an XML string? <input type="checkbox" id="chkDocId1" myattribute="myval1"/> <input type="checkbox" id="chkDocId2" myattribute="myval43"/> <input type="checkbox ...

javascriptjqueryhtmlasp.net

Can JavaScript executed within a web browser have the capability to manipulate files on the underlying host system's file system?

Is it possible to programmatically move files or folders from a website using code? I am aware that with Python and Node.js, this can be achieved through the OS, path, and fs modules. Can JavaScript running in a website also handle file management tasks ...

javascripthtmlcss

Utilizing erb within a coffeescript file for modifying the background styling

Is there a way to change the background image of a div based on user selection from a dropdown menu? For instance, if the user picks "white" the background image becomes white, and for "red" it changes to red. I'm struggling with this in coffeescript ...

javascriptcssruby-on-railscoffeescripterb

The issue of CharAt not functioning correctly arises when used inside a table and input element within the

The Objective: Extract the first character from the input field and display it beside the input box in order to facilitate sorting. I am facing issues with jQuery data tables and am in search of an alternative solution. Potential Resolution: Use the charA ...

javascripthtmljquerycharat

How can one view all the static variables and methods associated with a class in Typescript or ES6?

Is it possible to retrieve all static variable names and static method names associated with a class, similar to how the Object.keys method returns a list of key names attached to an object? Typescript Example: class FindStatics { static num1:string = ...

javascripttypescriptecmascript-6

React - the function executed within a loop is only invoked once

I have implemented a click handler in my book component to facilitate page flipping. This handler appends the necessary classnames to the pages, enabling me to set up the CSS for the page flip animation. // ---------- Handle the click event on the book p ...

javascriptreactjsfunctionloops

Modifying button text dynamically during save operation with AngularJS

Is it possible to dynamically change the text on a submit button while data is being saved in a form? Here's an example of the button: <button ng-click="save()">Save data</button> I have updated my save function based on some suggestion ...

javascriptangularjs

Troubleshooting AngularJS Directives' Cross-Origin Problems within Eclipse

Hello, I am facing an issue while using Angular JS in Eclipse. Specifically, when attempting to use Directives, I encounter a problem with the Cross-Origin Resource Sharing (CORS) policy when loading the Directives template in the index.html file. XMLHttp ...

javascripthtmlcssangularjseclipse

What is the best way to redirect users to the login page when they are logged out from a different tab or window?

Ensuring user authentication and managing inactivity are crucial components of my Nodejs application, where I leverage cookie-session and passport.js. app.use(require("cookie-session")({ secret:keys.session.secret, resave:false, saveUninitiali ...

javascriptnode.js