CODEWITHSUNDEEP
javascriptjquerytwitter-bootstrap
Guto
Guto

Reputation: 341

How to set a button visible only when a panel is collapsed

there is a way to set a button visible only when a panel is collapsed? I tried the bellow code but without success. I also tried to use getElementById("#closeButton").style.visibility but it still not working. 

function checkCollapsed(){
  
 if($("#panel").hasClass('ui-collapsible-collapsed')){
     $("#closeButton").hide();
 }else{
   $("#closeButton").show();
 }
}
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>


<div class="panel-group col-lg-1">
   <div class="panel panel-default">
     <div class="panel-heading">
       <h4 class="panel-title">
         <a data-toggle="collapse" href="#panel" onclick="checkCollapsed()">test</a>
         <button id="closeButton" type="button" class="close" aria-label="Close" >
           <span aria-hidden="true">&times;</span>
         </button>
       </h4>
     </div>
     <div id="panel" class="panel-collapse collapse">
        blablabla
     </div>
   </div>
</div>

Upvotes: 1

Views: 1542

Answers (2)

Rayon
Rayon

Reputation: 36599

.in class is being added to #panel element. ui-collapsible-collapsed remain there all the time.

function checkCollapsed() {
  if ($("#panel").hasClass('in')) {
    $("#closeButton").hide();
  } else {
    $("#closeButton").show();
  }
}
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>


<div class="panel-group col-lg-1">
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
         <a data-toggle="collapse" href="#panel" onclick="checkCollapsed()">test</a>
         <button id="closeButton" type="button" class="close" aria-label="Close" >
           <span aria-hidden="true">&times;</span>
         </button>
       </h4>
    </div>
    <div id="panel" class="panel-collapse collapse">
      blablabla
    </div>
  </div>
</div>

Upvotes: 2

&#193;lvaro Touz&#243;n
&#193;lvaro Touz&#243;n

Reputation: 1230

I supose that the problem is when your click, is before change the class. One idea is to make a little timeout:

function checkCollapsed(){
  setTimeout(function(){
if($("#panel").hasClass('ui-collapsible-collapsed')){
     $("#closeButton").hide();
 }else{
   $("#closeButton").show();
 }
}, 110);

}

The idea is take a time to collapside panel to change status, and class. Expect it help

Upvotes: 0

Related Questions