Issue with functionality of Bootstrap 4 Checkbox accordion

I am trying to achieve something similar to this example:

https://getbootstrap.com/docs/4.0/components/collapse/#multiple-targets

Instead of using a button, I want to use a checkbox. I want the collapse effect to occur when the checkbox is checked.

<div class="container-fluid">
    <b>Job Request</b>
    <div class="row">
        <div class="col-md-12">
            <div class="form-group">
                <label for="change_jobs">I intend to select or change jobs</label>
                <input type="checkbox" id="change_jobs" name="change_jobs" data-toggle="collapse" onclick="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
                <div class="collapse" id="collapseExample">
                    <div class="card card-body">
                        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

However, when I click the checkbox, I encounter this error in the console and the collapse effect does not work

SyntaxError: private fields are not currently supported

Answer №1

Make sure to update onclick="#collapseExample" to data-target="#collapseExample"

<div class="container-fluid">
    <b>Job Application</b>
    <div class="row">
        <div class="col-md-12">
            <div class="form-group">
                <label for="change_jobs">I intend to choose or change a job</label>
                <input type="checkbox" id="change_jobs" name="change_jobs" data-toggle="collapse" data-target="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
                <div class="collapse" id="collapseExample">
                    <div class="card card-body">
                        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Feel free to reach out if you have any questions.

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

The functionality of nested routing is not operating properly in react-router

I'm currently struggling to get my CollectionPage to render and match the URL correctly within my nested Route in React. Unfortunately, it doesn't seem to be working as expected! Here's a piece of code from my shop.component file that is be ...

Utilizing document.getElementById().value in hidden fields for asp.net web pages does not function correctly

Recently, I developed a basic website using ASP.NET Web Pages with Razor markup. The site includes a form with two hidden fields: latitude and longitude. My goal was to utilize the HTML5 Geolocation API in my JavaScript script to obtain the user's loc ...

Tips for Implementing a Footer Component in ReactJS

My current setup includes: https://i.stack.imgur.com/2gvHk.png A navigation bar Nested content with a wizard and partial windows. A dynamic footer whose buttons and functionality need to change based on certain scenarios in the content. Currently, I ha ...

Having trouble choosing a dropdown value with ng-model; the first item keeps showing up as blank when selected

When I attempt to select a dropdown value inside an AngularJS function by setting the value to the ng-model, the dropdown initially shows a blank value selected. Below is my HTML code: <select class="pulldown" ng-model="test" ng-options="obj as obj.des ...

Tips for managing the most recent keyup event in a search feature

I have a search input on my website. Whenever a user types a letter in it, an ajax request is made to display some content as the result. My goal is to only create an ajax request for the last keyup event when the user types quickly. I came across a soluti ...

Nodemailer is failing to send emails on Heroku

Recently, I encountered an issue that has been puzzling me. I use cloud9 for work and nodemailer works perfectly fine, sending all emails from a form I created. However, when I deployed a small server to Heroku with just a change in an environmental vari ...

Use jQuery to swap out images and witness the image loading in real time

Currently, I am using jQuery to dynamically change images by using the code $('img').attr('src','newUrl'); However, whenever I do this, the image is only displayed once it has completely loaded. Due to my slow internet conne ...

JavaScript Plugins for Cordova

The more I delve into the inner workings of Cordova, the clearer it becomes to me. Yet, one area that continues to perplex me is the structure of JavaScript plugins. Typically, I write my JavaScript code as follows, adhering to what I believe is the stand ...

What is the best way to load an index.js file within a plugin framework?

I currently have an isolated index.js file located at plugins/some_plugin/index.js After attempting to run require(path_to_index.js) in my application, I encounter a 'cannot find modules' error message. This issue is understandable as the "some ...

Tips for efficiently handling navigation re-rendering on a Single Page Application using Vue.js

I am currently in the process of developing a Single Page Application using Vue.js. The structure involves having a template in App.vue which includes a navigation bar followed by a router-view component. When a user attempts to log in, a modal window appe ...

Extracting information from a Postgres query in Node.js

I'm looking for guidance on how to pass the results of a postgres query in Node.js to another function. Can anyone provide an example? ...

Discover the convenient shortcut keys that enable you to easily align text in editors, similar to the functionality found in

When working in MS Office, aligning text is done by selecting the text and then using the shortcut keys Ctrl+L for left align, Ctrl+R for right align, and Ctrl+E for center alignment. However, when using online text editors like TinyMCE and CKEditor, I am ...

The form reset function came back as null in the results

I'm attempting to reset the form inputs with the following code: $("#form_employee_job")[0].reset(); Even after executing the code, the inputs remain filled and the console shows undefined What am I overlooking? https://i.sstatic.net/sqzzZ.jpg ...

Div element to animate and vanish in a flash

I'm attempting to create a smooth slide effect for a div element before it disappears. Below is the code I am currently using: function slideLeft(element) { $("#" + element).animate({ left: "510" }, { duration: 750 }); document.getEle ...

Event delegation will be ineffective when the target element is nested within another element

After receiving a recommendation from my colleagues on Stackoverflow (mplungjan, Michel), I implemented the event delegation pattern for a comment list. It has been working well and I am quite excited about this approach. However, I have encountered an iss ...

Discovering the Cookie in Angular 2 after it's Been Created

My setup includes two Components and one Service: Components: 1: LoginComponent 2: HeaderComponent (Shared) Service: 1: authentication.service Within the LoginComponent, I utilize the authentication.service for authentication. Upon successful authent ...

Issue with Vue3: The imported module is not defined

Update: I recently downgraded vue-cli to version 4.5.19 and now the code is functioning properly. It seems like there might be an issue related to vue-cli or its dependencies. I encountered a problem while working on a simple vue.js project using vue-cli. ...

Having trouble publishing project on Vercel because of a naming issue

Whenever I try to deploy a project on vercel, I encounter an error stating that the project name is not valid. The specific error messages are as follows: Error: The name of a Project can only contain up to 100 alphanumeric lowercase characters and hyphe ...

Issue with Typescript and react-create-app integration using Express

I'm relatively new to Typescript and I decided to kickstart a project using create-react-app. However, I encountered an issue while trying to connect my project to a server using express. After creating a folder named src/server/server.ts, React auto ...

"Error: Cannot iterate over items in React using Item.map, as

I am currently working on implementing a function to handle changes in the names of individuals within an array stored in state as personState. const [personState, setPersonState] = useState([ { id:'asdasd', name: "Max", age ...