Trying to get panels to disappear with the click of a button

John M. Published at Dev

John M.

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

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

Parvez Rahaman

You have variable name mistake var panelID you used as panelId.

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

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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-->

Collected from the Internet

Please contact [email protected] to delete if infringement.