HTML - Show/Hide Buttons on Bootstrap Panel collapse/expand

Question

I'm using a Bootstrap collapsible panel. Here's the Fidle for it

I'm trying to do the following :

1. I want to move both the buttons on the Panel header(at the extreme right end) i.e. exactly opposite to the text "Panel"

2. But I only want the buttons to be visible when the panel is expanded. And when the panel is hidden the buttons should be hidden too.

How can I achieve this. What would be the JS for it?

I tried to do the following in JS:

$(document).ready(function () {        
        $("#btnSearch").hide();
         $(".panel-title").click(function () {         
             $("#btnSearch").show();            
      });
});

But with this the buttons won't hide when the panel is made to hide.

Answer 1

Try this. I moved your buttons to panel-heading itself and positioned them using position:absolute;.

It is very similar to this bootsnipp

$(".panel-success").on('show.bs.collapse', function() {
    $('.buttonCon').addClass('vis');
}).on('hide.bs.collapse', function() {
    $('.buttonCon').removeClass('vis');
})

.panel{
  position:relative;
}
.buttonCon{
  position:absolute;
  top:5px;
  right:10px;
  display:none;
}
.buttonCon.vis{
  display:block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="panel panel-success">
    <div class="buttonCon">
        <button type="button" class="btn btn-primary" onclick="ReloadData()">
            Button1
            <span class="glyphicon glyphicon-search" aria-hidden="true" onclick="ReloadData()"></span>
          </button>
          <button type="reset" class="btn btn-warning" id="clearAll" data-toggle="tooltip" title="btn2">
            Buttonn2
            <span class="glyphicon glyphicon-remove"></span>
          </button>
        </div>
    <div class="panel-heading panelHeader" data-toggle="collapse" data-target="#body" style="cursor:pointer;">
      <div class="panel-title">
        <span class="glyphicon glyphicon-expand"></span>&nbsp;&nbsp;Panel
        </div>
    </div>
    <div class="panel-body collapse" id="body">
      <div class="form-group row">
        <label for="Label1" class="col-xs-1 col-md-1 col-form-label">Label 1</label>
        <div class="col-md-2">
          <input class="form-control roundedElement" type="text" id="txt1" />
        </div>

        <label for="Label2" class="col-xs-1 col-form-label alignment">Label 2</label>
        <div class="col-md-2">
          <input class="form-control roundedElement" type="text" id="txt2" />
        </div>

        <label for="Label3" class="col-xs-1 col-form-label alignment">Label 3</label>
        <div class="col-md-2">
          <input class="form-control roundedElement" type="text" id="txt3" />
        </div>
      </div>

      <div class="form-group row" style="margin-left:auto;margin-right:auto;">
        <div class="col-md-2 col-md-offset-5">
          
        </div>
      </div>

    </div>
  </div>
</div>

Answer 2

You can use bootstrap collapse events to achieve it.

$('#accordion').on('shown.bs.collapse', function() {
  $(".buttons").show();
})
$('#accordion').on('hidden.bs.collapse', function() {
  $(".buttons").hide();
})

Check this fiddle.