CODEWITHSUNDEEP
javascriptjquerytwitter-bootstrap
hippolas_cage
hippolas_cage

Reputation: 71

Add a class to div when a bootstrap div is collapsed

How do I add a class to a div when a bootstrap 3 collapsible is collapsed? I need a code which adds the class darken when the div is collapsed. And when a collapsible is closed the class darken should be removed

#content { 
width: 400px; 
padding: 20px; 
border: 3px solid #EEE;
margin-top: 20px;
text-align: center 
}

.darken { 
background: #EEE; 
color: #FFF; 
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


<a data-toggle="collapse" href="#collapse1">Switch</a>
<div id="collapse1" class="panel-collapse collapse">
Power on.
</div>  
<div id="content">
Please, add the class "darken" to me!
</div>

Upvotes: 1

Views: 1933

Answers (6)

vicky patel
vicky patel

Reputation: 705

$(document).ready(function(){
$("a").click(function(){
$('#content').toggleClass('darken')
})
})
#content { 
width: 400px; 
padding: 20px; 
border: 3px solid #EEE;
margin-top: 20px;
text-align: center 
}

.darken { 
background: #EEE; 
color: #FFF; 
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


<a data-toggle="collapse" href="#collapse1">Switch</a>
<div id="collapse1" class="panel-collapse collapse">
Power on.
</div>  
<div id="content">
Please, add the class "darken" to me!
</div>

Upvotes: 0

hasan challawala
hasan challawala

Reputation: 24

$('#collapse1').on('show.bs.collapse', function () {
  $("#content").addClass('darken')
})
$('#collapse1').on('hide.bs.collapse', function () {
  $("#content").removeClass('darken')
})
#content { 
width: 400px; 
padding: 20px; 
border: 3px solid #EEE;
margin-top: 20px;
text-align: center 
}

.darken { 
background: #EEE; 
color: #FFF; 
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


<a id="myCollapsible" data-toggle="collapse" href="#collapse1">Switch</a>
<div id="collapse1" class="panel-collapse collapse">
Power on.
</div>  
<div id="content">
Please, add the class "darken" to me!
</div>

Upvotes: -1

fyasir
fyasir

Reputation: 2970

$( "#switch" ).click(function() {
  if($("#collapse1" ).hasClass("in")) {
    $("#content" ).removeClass("darken");
  } else {
    $("#content" ).addClass("darken");
  }
});
#content { 
width: 400px; 
padding: 20px; 
border: 3px solid #EEE;
margin-top: 20px;
text-align: center 
}

.darken { 
background: #EEE; 
color: #FFF; 
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


<a data-toggle="collapse" href="#collapse1" id="switch"> Switch</a>
<div id="collapse1" class="panel-collapse collapse">
Power on.
</div>  
<div id="content">
Please, add the class "darken" to me!
</div>

Upvotes: 1

Andy G
Andy G

Reputation: 19367

With CSS, and assuming you want to darken rather than specifically needing to add a .darken class:

.collapse.in + #content {
    background-color: #EEE;
}

where + is the adjacent sibling combinator.

Upvotes: 1

Arkej
Arkej

Reputation: 2251

Here you have solution with pure CSS

#content { 
width: 400px; 
padding: 20px; 
border: 3px solid #EEE;
margin-top: 20px;
text-align: center 
}

.darken { 
background: #EEE; 
color: #FFF; 
}

#collapse1.in + #content {
background: #EEE; 
color: #FFF; 
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


<a data-toggle="collapse" href="#collapse1">Switch</a>
<div id="collapse1" class="panel-collapse collapse">
Power on.
</div>  
<div id="content">
Please, add the class "darken" to me!
</div>

Upvotes: 1

SilverSurfer
SilverSurfer

Reputation: 4368

Use shown.bs.collapse and hidden.bs.collapse to check when is collapsed/opened:

$('#collapse1').on('shown.bs.collapse', function () {
   $("#content").addClass("darken")
});

$('#collapse1').on('hidden.bs.collapse', function () {
   $("#content").removeClass("darken")
});
#content { 
width: 400px; 
padding: 20px; 
border: 3px solid #EEE;
margin-top: 20px;
text-align: center 
}

.darken { 
background: #EEE; 
color: #FFF; 
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


<a data-toggle="collapse" href="#collapse1">Switch</a>
<div id="collapse1" class="panel-collapse collapse">
Power on.
</div>  
<div id="content">
Please, add the class "darken" to me!
</div>

Upvotes: 1

Related Questions