Problem with translating a variable into a selector in JQuery

When attempting to make my Jquery code more flexible, I decided to extract the selector and access it through a variable. However, despite creating variables for both selectors, neither of them seem to be functioning properly. I am confident that the issue is something simple that I am overlooking, but I have been unable to pinpoint it.

Jquery

var accordion = "#accordion";
var accordionextra = accordion + " .panel-heading img'";

$(accordionextra).hide();

$(accordion).find('.panel-collapse').each(function() {
   //Do Something
})

HTML:

<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
                    <div class="panel panel-default">
                        <div class="panel-heading" role="tab" id="headingOne">
                        <h4 class="panel-title">
                            <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                            Collapsible Group Item #1
                            <img src="image/check.png" class="pull-right check" />
                            </a>
                        </h4>
                        </div>
                        <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
                        <div class="panel-body">
                            <form>
                        <div class="form-group">
                            <label for="exampleInputEmail1">Email address</label>
                            <input type="email" class="form-control class1" id="exampleInputEmail1" placeholder="Email">
                        </div>
                        <div class="form-group">
                            <label for="exampleInputPassword1">Password</label>
                            <input type="password" class="form-control class1" id="exampleInputPassword1" placeholder="Password">
                        </div>
                        <button type="submit" class="btn btn-default">Submit</button>
                        </form>
                            </div>
                            </div>
                        </div>
                        <div class="panel panel-default">
                            <div class="panel-heading" role="tab" id="headingTwo">
                            <h4 class="panel-title">
                                <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
                                Collapsible Group Item #2
                                <img src="image/check.png" class="pull-right check" />
                                </a>
                            </h4>
                            </div>
                            <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
                            <div class="panel-body">
                                <form>
                        <div class="form-group">
                            <label for="exampleInputEmail1">Email address</label>
                            <input type="email" class="form-control class2" id="exampleInputEmail1" placeholder="Email">
                        </div>
                        <div class="form-group">
                            <label for="exampleInputPassword1">Password</label>
                            <input type="password" class="form-control class2" id="exampleInputPassword1" placeholder="Password">
                        </div>
                        <div class="checkbox">
                            <label>
                            <input type="checkbox" class="class2"> Check me out
                            </label>
                        </div>
                        <button type="submit" class="btn btn-default">Submit</button>
                        </form>
                            </div>
                            </div>
                        </div>
                        <div class="panel panel-default">
                            <div class="panel-heading" role="tab" id="headingThree">
                            <h4 class="panel-title">
                                <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
                                Collapsible Group Item #3
                                <img src="image/check.png" class="pull-right check" />
                                </a>
                            </h4>
                            </div>
                            <div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
                            <div class="panel-body">
                                <form>
                        <div class="form-group">
                            <label for="exampleInputEmail1">Email address</label>
                            <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
                        </div>
                        <div class="form-group">
                            <label for="exampleInputPassword1">Password</label>
                            <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
                        </div>
                        <div class="checkbox">
                            <label>
                            <input type="checkbox"> Check me out
                            </label>
                        </div>
                        <button type="submit" class="btn btn-default">Submit</button>
                        </form>
                            </div>
                            </div>
                        </div>
                    </div>

Answer №1

It seems there was just a small typo in the code:

 var accordionextra = accordion + " .panel-heading img'";

The correct version should be:

 var accordionextra = accordion + " .panel-heading img";

I tested it and everything is working fine. You can check out the updated code here: https://jsfiddle.net/vgpdzL81/

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

Errors occur when using jQuery Autocomplete alongside Angular HTTP

I have implemented an ajax autocomplete feature for my database using the jQuery-Autocomplete plugin. Below is my current code setup: HTML: <input ng-keyup="searchCustomer()" id="customerAutocomplete" type="text"> Angular $scope.searchCustome ...

Is the on-error event not functioning properly in the <img> tag?

I am currently utilizing VueJS to develop the front-end of a project and encountered an issue with the image tag when loading images. Template <div class="items" transition="fade" v-for="item in list"> <img :src="item.logoPath" @error="replac ...

When using Inertia.js with Laravel, a blank page is displayed on mobile devices

Recently, I've been working on a project using Laravel with React and Inertia.js. While everything runs smoothly on my computer and even when served on my network (192.168.x.x), I encountered an issue when trying to access the app on my mobile phone. ...

How to Access a Method from Controller 2 in AngularJS Controller One

angular.module('starter.controllers', []) .controller('controller1',function($scope) { $scope.function1= function () { // Code for controller1 function } }) .controller('controller2',fun ...

The power of Rails unleashed through Ajax Remote Javascript

Trying to locate Employees who are engaged in multiple Job roles, I have set up three select boxes that dynamically adjust their options. The problem arises when my CoffeeScript file only triggers once. After the initial selection and rendering of the part ...

Combine the information from 3 separate subscriptions into a single object using RxJS in Angular 9

I am seeking assistance with merging data from 3 different sensors into one object. I am using Cordova plugins to retrieve accelerometer, gyroscope, and magnetometer data. However, I am facing an issue in subscribing to all three observables simultaneously ...

Ways to effectively hide one window or pop-up upon clicking another

I am working on creating an interactive website for my close circle of friends and family. One of the key features is to have a button that displays their biography when clicked. What I'm aiming for is that when a different bio is selected, the previo ...

Get rid of numerous div elements in a React.js application with the help of a Remove button

I need help figuring out how to efficiently remove the multiple div's that are generated using the add button. I am struggling to grasp how to pass the parent div's id into the delete method from the child div. Additionally, I'm wondering if ...

Display the hidden element using jQuery with the !important rule

There is a specific element that has been given a class with the following CSS styling: .cls { display:none !important; } Despite attempting to display this element using jQuery $(".cls").show(); This method does not seem to be effective. Is ...

Utilize import and export statements to transfer an HTML tag between two JavaScript files

I have two HTML files linked to two JS files. I want to save an HTML tag from HTML1 with JS1 in a Variable and export it. Then import it in the JS2 file and use it in HTML2 I have tried many ways but nothing seems to work, something as simple as this Exp ...

What is causing the data element to remain unchanged within a Vue.js function and what steps can be taken to ensure its value can be updated?

Using the axios API in the created() function, I am able to access webURLs. When a mouseover event triggers a v-for handler in the HTML file, the index is obtained and assigned to the selectedState data element. Although the value of selectedState changes ...

Is an external source compatible with Jquery autocomplete/combobox?

Searching for a selectbox autocompleter that mimics the functionality of a combobox, where if a value does not exist it returns false/null. http://jqueryui.com/demos/autocomplete/#combobox Is there a method to integrate an external datasource with the co ...

Do multiple AJAX calls share parameters?

I have a JavaScript function as shown below: function makeAjaxCall(outerParameter1, outerParameter2, outerDivId, paramInput){ $.ajax({ type: "POST", url: "some time taking LargeWebMethod or URL", //may take some time to return output dat ...

Prevent adding items to the cart when custom options are mandatory in Magento

Within my current product view, I have incorporated all necessary custom options along with a pop-up window that appears when an incorrect value is entered. For example, Track/Pole Length - Finished Curtain Drop. Even if all the information in the text f ...

Complex UL structure with nested LI items and both column and inline styling

I'm facing a challenge that seems insurmountable - I can't even begin to tackle it, so I don't have a polished solution to present. All I have is the source code and my goal. My task is to create a three-level UL structure. The top level sh ...

Is it possible to call a ref from a different component in React?

I'm currently working on a React chat application and I want the input field where messages are entered to be focused every time you click on the chat box. However, the challenge I'm facing is that the chat box in the main component is separate ...

Addressing the issue of empty ngRepeat loops

Utilizing ngRepeat to generate table rows: <tr ng-repeat="User in ReportModel.report" on-finish-render> <td><span>{{User.name}}</span></td> </tr> An on-finish-render directive triggers an event upon completion of t ...

Deactivate the button upon submission using xVal in MVC

I am currently working on an MVC app that utilizes xVal. My main goal is to integrate a loading graphic into the jquery validation process, specifically to display it once the form has been successfully validated by jquery. However, I am struggling to find ...

jQuery Conditional String Manipulation

I have set up a system where users can input values and make selections from a drop-down menu, which then get integrated into JavaScript code to generate customized sentences based on their inputs. Once the user clicks submit, the sentence is formed. It&ap ...

What is the best way to break out of a function halfway through?

What are your thoughts on using nested if statements? $scope.addToCart = function () { if (flagA) { if (flagB) { if (flagC) { alert('nononono!'); return; } } } e ...