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.

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.

• javascript
• jquery
• html
• css
• twitter-bootstrap

• 2 add your complete code – ADH - THE TECHIE GUY Commented Dec 27, 2016 at 5:10
• both button at the same horizontal levels as "panel" ? – ab29007 Commented Dec 27, 2016 at 5:11
• Well most of you have almost given correct solution to achieve my requirement. But there's one problem though : Clicking the button causes the panel to hide. This should not be the case. Is there any way to prevent the panel from hiding? – Mr.Human Commented Dec 27, 2016 at 8:31

4 Answers 4

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>

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.

The following JsFiddle is another option compared to the answers already given.

Mainly, it prevents the use of position: absolute which can result in a mish-mash of bad things happening. The following jQuery (which is readily available since you are using bootstrap) will work:

$("#js-panel").on('show.bs.collapse', function() {
    $('.js-toggle-btn').removeClass('hide');
}).on('hide.bs.collapse', function() {
    $('.js-toggle-btn').addClass('hide');
})

Take note that there are events to track whether a panel is currently opening or closing (plus two others), which can be found here.

I would also suggest that you take the time to read some of the documentation/examples found on the bootstrap webpage, only because a lot of your css/html is pretty rough/unnecessarily complex.

Got it working by combining the answers provided by @kittyCat (the updated solution) and @BuddhistBeast .

Here's the Fiddle.

HTML code :

<div class="container">
  <div class="panel panel-success" id="js-panel">

    <div class="panelButtons">
      <button type="reset" class="js-toggle-btn btn-warning pull-right btn-xs hide" id="clearAll" data-toggle="tooltip" title="btn2" style="margin-left:5px;">
        Button2
        <span class="glyphicon glyphicon-remove"></span>
      </button>
      <button type="button" class="js-toggle-btn btn btn-primary pull-right btn-xs hide" onclick="ReloadData()">
        Button1
        <span class="glyphicon glyphicon-search"></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>

  </div>
</div>

JS Code :

$("#js-panel").on('show.bs.collapse', function() {
  $('.js-toggle-btn').removeClass('hide');
}).on('hide.bs.collapse', function() {
  $('.js-toggle-btn').addClass('hide');
})