0

To make my Jquery more flexible I've pulled the selector out and I'm trying to access it through a variable, but both variables for both selectors don't appear to be working. I'm sure it'll be something simple that I'm missing and can't see, but I just can't find 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> 
5
  • On which context do you call your snippet? Just sounds like you are trying to targeting element before available in DOM Commented Feb 4, 2016 at 13:11
  • 1
    Remove the ' in var accordionextra = accordion + " .panel-heading img'"; Commented Feb 4, 2016 at 13:11
  • Yep - that got it - thought it would be something simple Commented Feb 4, 2016 at 13:12
  • @WebDevelopWolf But then $(accordion).find('.panel-collapse') was already working?! Commented Feb 4, 2016 at 13:13
  • I don't understand how using a variable makes it more flexible? It just adds more lines of unnecessary code... Commented Feb 4, 2016 at 13:20

1 Answer 1

1

Looks is just a typo in

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

should be

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

i test it here and works fine... https://jsfiddle.net/vgpdzL81/

Sign up to request clarification or add additional context in comments.

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.