logout Bootstrap Collapse - html

Question

Hi guys I am using Bootstrap Collapse :https://www.w3schools.com/bootstrap/bootstrap_collapse.asp
it is working perfect, but I have to add background and padding 10px and this breaks the accordion effect, it is someone know how to fix this?
if I remove the padding works perfect, but I need the padding.
thank you.
jsfiddle:https://jsfiddle.net/a759nymd/
$(document).click(function(e) {
if (!$(e.target).is('.collapse-logout')) {
$('.collapse').collapse('hide');
}
});
.collapse-logout {
background: black;
color: #27a0d7;
cursor: pointer;
border-radius: 5px;
height: 40px;
padding:10px;
}
<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.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="user-logout">
<label class="" data-toggle="collapse" data-target="#demo">
Hi,<strong>${ username }<b class="caret"></b></strong>
</label>
<div id="demo" class="collapse collapse-logout">
<i class="fa fa-power-off" aria-hidden="true"></i>Logout
</div>
</div>

Answer 1

You can wrap the accordion content inside a div and then apply the padding to that inner div
$(document).click(function(e) {
if (!$(e.target).is('.collapse-logout')) {
$('.collapse').collapse('hide');
}
});
.collapse-logout {
background: black;
color: #27a0d7;
cursor: pointer;
border-radius: 5px;
height: 40px;
}
.collapse-body {
padding:10px;
}
<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.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="user-logout">
<label class="" data-toggle="collapse" data-target="#demo">
Hi,<strong>${ username }<b class="caret"></b></strong>
</label>
<div id="demo" class="collapse collapse-logout">
<div class="collapse-body">
<i class="fa fa-power-off" aria-hidden="true"></i>Logout
</div>
</div>
</div>
And the updated fiddle
https://jsfiddle.net/a759nymd/4/