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>
javascriptjqueryhtmlcss

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

Activating the CSS :active selector for elements other than anchor tags

How can I activate the :active state for non-anchor elements using JavaScript (jQuery)? After reading through Section 5.11.3 of the W3C CSS2 specification in relation to the :hover pseudo selector in hopes of triggering the activation of an element, I stu ...

javascriptjquerycss

Styling a clock with rounded corners using CSS: Border-radius trick

Attempting to craft a analog 12-hour clock using basic CSS properties, I initiated the process by forming a square div of the size 500px. Applying a border-radius of 250px resulted in an aesthetically pleasing circle design. Following this step, I incorpor ...

htmlgeometrycss

What are the best practices for sharing context in express and typescript?

Implementing a solution to expose a value to all request handlers using express and typescript is my goal. I am looking for a way to easily "inject" this value from a middleware or an alternative method that allows for simple mocking if needed. Here is th ...

javascriptnode.jstypescriptexpressdependency-injection

Having trouble seeing the output on the webpage after entering the information

I can't seem to figure out why the result is not displaying on the HTML page, so for now I have it set up as an alert. <h1>Factorial Problem</h1> <form name="frm1"> Enter any number :<input type="text" name="fact1"& ...

javascripthtml

Tips for preventing a child div from moving when scrolling towards it and creating an internal scroll with a smooth animation using either JavaScript or jQuery

Looking to add scrolling functionality with animation to a child div on my webpage? Check out this example. I attempted using JavaScript's on scroll function, but it didn't work as expected. Currently, I have it set up to trigger on click of cer ...

javascripthtmljquerycsscss-animations

Is there a way for me to add a clickable link within a tooltip?

In my title, I want to insert a clickable link like 'Link' or 'a'. The title is ready for any string you input. <MaterialSwitch title={CLICKABLE STRING HERE} /> ...

javascriptreactjstypescript

Vue.js does not seem to be properly assigning attributes that are declared within the data object array

Trying to get a hang of vue.js and looking to create dynamic product cards using it: This is the snippet from my HTML file: <div id="app"> <card v-for="products in product" :productname="product.productname"></card> </div> Here&a ...

javascriptvue.jsvuejs2

What are some successful methods for displaying extensive data lists to users in a meaningful and organized manner?

From dropdown lists to hover menus with fly-out options, there are various ways to present content on a website... I am managing a comprehensive list of U.S. military bases across the world for my website. This list includes both active and inactive bases ...

jquerycsslistmenu

What is the best way to conceal the HTML video controls for multiple videos displayed on a single webpage?

I have a web page that displays a collection of movies generated using a PHP foreach loop. The code snippet looks like this: foreach ($movies as $movie) { $pos = strrpos($movie, '/'); $id = $pos === false ? $movie : substr($movie, $pos ...

javascriptphphtml5-video

An error is thrown when trying to validate a form using jQuery code due to a

I encountered an "uncaught syntax error unexpected identifier" while working on my code. Despite following a tutorial from Lynda.com and typing the code exactly as instructed, I cannot seem to identify the syntax error. The code worked for the tutor, but ...

jqueryvalidationsyntaxidentifier

RXJS buffering with intermittent intervals

Situation: I am receiving audio data as an array and need to play it in sequence. The data is coming in continuously, so I am using an observable to handle it. Since the data arrives faster than it can be played, I want to use a buffer to store the data w ...

javascriptangularaudiorxjs

The essence of a character undergoes a complete transformation once it is presented in

There seems to be an issue with the character "т", ascii code: 209 130 When this particular character is put in italics, its appearance changes drastically... Check out the т character in italics (take a look at the source code - it's fascinating) ...

htmlcsscharacterasciiitalics

Multiple Ajax(Jquery method) Submissions with just one click and issue with Image not being sent to the server

Having trouble submitting form data to the server after client-side validation using jQuery. I've been working on this all day and could really use some help. I created a jQuery slider for my login form, where it slides to the next input field after v ...

phpjqueryhtmlajax

Why doesn't the WordPress Genesis child-theme inherit the parent CSS styles?

I am new to using the Genesis framework and I find myself confused about its child themes. The Genesis theme comes with its own stylesheet, but in order to use Genesis, you need to install a child theme. However, the child themes I have come across (such ...

csswordpressgenesis

Having trouble creating multiple PDFs with mPDF without having to store them on the server

I am creating several PDF files in a loop using the mPDF library. Here is a snippet of my code: for($i=0;$i<=3;$i++) { $mpdf = new mPDF(); $stylesheet = file_get_contents('style.css'); $mpdf->WriteHTML($stylesheet,1); $mpd ...

phphtmlmpdf

What is the best method for ensuring three inside divs have equal heights?

I am working with a container div#content that holds three inner divs. I want to ensure that all three divs have the same height, but also expand based on their content. Here is an example of what I have tried: <!doctype html public "-//w3c//dtd html 4 ...

csshtmlheight

Choosing a single row from a Bootstrap React table

i have successfully implemented the Async Function to display data, as shown in the image. the table starts empty but gets populated after the await. However, I am facing an issue in finding a property to retrieve the selected row from the table. Is there ...

javascripthtmlreactjs

Checking connectivity in an Ionic application

Within my Ionic application, I am faced with the task of executing specific actions depending on whether the user is currently connected to the internet or not. I plan on utilizing the $cordovaNetwork plugin to determine the connectivity status within the ...

javascriptangularjsionic-framework

Ways to display a default view in React

I am working on a React website that has three different routes. My goal is to have the first route, named Home, automatically displayed when a user lands on the site. Below is the code snippet from my App.js: <Router> <Navigation /> <Sw ...

javascriptreactjs

Random Exclamation Point Appears in Outcome of PHP HTML-Email

I have been encountering exclamation points appearing randomly in the output of my PHP email function. After some research, I learned that this could be due to long lines or the need to encode the email in Base64. However, I am unsure how to go about doing ...

htmlemailphp