I'm working myself through this tutorial but I'm using jQuery and Bootstrap instead of what I think the author used, which was jQuery mobile? In any event I cannot get it to work. 
<https://www.youtube.com/watch?v=Cc3K2jDdKTo&list=UUVTlvUkGslCV_h-nSAId8Sw&index=97>

When the user clicks Btn1 I want panel1 to disappear. Clicking Btn2 causes panel2 to disappear and so on. Could someone help me out on where I'm going wrong? Thank you.

**HTML**

```
<div class="container">
  <!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
<button type="button" class="btn btn-primary" myPanel="panel1">Btn 1</button>

<!-- Secondary, outline button -->
<button type="button" class="btn btn-secondary" myPanel="panel2">Btn 2</button>

<!-- Indicates a successful or positive action -->
<button type="button" class="btn btn-success" myPanel="panel3">Btn 3</button>

<!-- Contextual button for informational alert messages -->
<button type="button" class="btn btn-info" myPanel="panel4">Btn 4</button>

</div>

<div class="container">
    <div class="row">
        <div class="col-xs-3" id="panel1">
            first panel
        </div>
        <div class="col-xs-3" id="panel2">
            second panel
        </div>
        <div class="col-xs-3" id="panel3">
            third panel
        </div>
        <div class="col-xs-3" id="panel4">
            fourth panel
        </div>
    </div> <!--/.row-->
</div> <!--/.container-->

```

**JS**

```
$(document).ready(function(){
    $(".btn").click(function(){
        var panelID = $(this).attr('myPanel');
        $('#' + panelId).toggle();
    });
});

```