Why add class to button only works after a second click?

user_5499981 0
Viewed 212

I try edit button style when bootstrap collapse is show and when bootstrap collapsed is hidden. But when I first time click on the button, collapse is show but button style doesn't change. They change when i click button second time (then collapse is hidden)

My button:

<button type="button" class="btn-block" data-toggle="collapse" data-target="#demo1" id="demo1button"> 
Button
</button>

Collapse element

<div  class="collapse" id="demo1">
    ...            
</div>

Script

$("#demo1button").click(function(){
if(!$("#demo1").hasClass('show')){
    $("#demo1button").addClass("collapsed");
}else{
  $("#demo1button").removeClass("collapsed");
}
});

What's more, i try do this in other way and it still dosen't work

Script

$("#demo1button").click(function(){
 if($("#demo1button").hasClass('collapsed')){
   $("#demo1button").removeClass("collapsed");
 }else{  
   $("#demo1button").addClass("collapsed");
 }    
});

Style.css

.collapsed{
background-color: #7a7a7a;
}
bootstrap-4 jquery javascript
1 Answers

I think that you don't have to use external JS to add and remove class because you are using bootstrap collapsible so Bootstrap will manage that class list of your button element.

You just have to define a class in button collapsed, so your button should be:

<button type="button" class="btn-block collapsed" data-toggle="collapse" data-target="#demo1" id="demo1button"> 
    Button
</button>

then apply your active content CSS in proper way.

Here is a demo code in my snippet:

.single_collapsible button {
  color: #fff;
  border: none;
  outline: none;
  background-color: green;
}

button.collapsed {
  background-color: gray;
}
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
</head>

<body>
  <div class="container">
    <div class="single_collapsible mb-2">
      <button type="button" class="btn-block collapsed" data-toggle="collapse" data-target="#demo1" id="demo1button"> Button</button>
      <div class="collapse" id="demo1">
        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
        survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
        publishing software like Aldus PageMaker including versions of Lorem Ipsum.
      </div>
    </div>
    <div class="single_collapsible mb-2">
      <button type="button" class="btn-block collapsed" data-toggle="collapse" data-target="#demo2" id="demo2button"> Button</button>
      <div class="collapse" id="demo2">
        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
        survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
        publishing software like Aldus PageMaker including versions of Lorem Ipsum.
      </div>
    </div>
    <div class="single_collapsible mb-2">
      <button type="button" class="btn-block collapsed" data-toggle="collapse" data-target="#demo3" id="demo3button"> Button</button>
      <div class="collapse" id="demo3">
        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
        survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
        publishing software like Aldus PageMaker including versions of Lorem Ipsum.
      </div>
    </div>
  </div>
</body>

</html>

user_119767690
Related