Can't search with Jquery .attr results

In the following code I define a variable, var panel by using the method .attr on an element. I get a result of var panel = “#panel4”, which I confirm by using an alert(). So far so good. BUT, when I put this variable inside a Jquery function so as to toggle an element which has an id=“panel4” as in:

$(panel).toggle();

^This does not work. If I change this code to:

$("#panel4").toggle();

it works!

Anyone know why I can’t use my variable in this code?

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags must come first in the head; any other head content must come after these tags -->
    <title>Bootstrap 101 Template</title>
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
 <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
  <style type="text/css">

  .jumbotron {text-align: center;}
  </style>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
<div class="container">
  <div class="jumbotron">
    <h1>Let's have Fun</h1>      
    <button type="button" data-panelid=“#panel1” id="btn btn-default" class="btnDefault">#btn1</button>
    <button type="button" data-panelid=“#panel2” class="btnDefault">#btn2</button>
    <button type="button" data-panelid=“#panel3” class="btnDefault">#btn3</button>
    <button type="button" data-panelid=“#panel4” class="btnDefault">#btn4</button>
  </div>
  <div class="col-xs-3">
  <div id="panel1" class="panel panel-primary">
  <div class="panel-heading">
   #panel1
  </div>
  <div class="panel-body"> Contet 
  </div>

  </div>
  </div>
  <div class="col-xs-3">
  <div id="panel2" class="panel panel-primary">
  <div class="panel-heading">
   #panel2
  </div>
  <div class="panel-body"> Contet 
  </div>

  </div>
  </div>
  <div class="col-xs-3">
  <div id="panel3" class="panel panel-primary">
  <div class="panel-heading">
   #panel3
  </div>
  <div class="panel-body"> Contet 
  </div>

  </div>
  </div>
  <div class="col-xs-3">
  <div id="panel4" class="panel panel-primary">
  <div class="panel-heading">
   #panel4
  </div>
  <div class="panel-body"> Contet 
  </div>

  </div>
  </div>
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
   <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script>

    $(function(){ 

      var bokchoi =   
        
      $(".btnDefault").on("click",function(){ 
          
         
           var panel = $(this).attr("data-panelid"); 
          
        /* $(bokchoi).toggle();  */
           alert(panel); 
    
      $(panel).toggle(); });  
        
    });

    </script>
</body>
</html>

1 Like

Those double curly quotes should either be straight quotes or straight double quotes. Then it will work.

Note: I noticed you are loading two different versions of jQuery and Bootstrap.js in two different places in your project. Only use the newer version and only put it right above the custom script code you have in the body element.

1 Like

Thanks! You and your team are really amazing. I hope I can give back to the IT community as well someday.