CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
raduken
raduken

Reputation: 2119

logout Bootstrap Collapse

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>

Upvotes: 0

Views: 401

Answers (1)

StaticBeagle
StaticBeagle

Reputation: 5175

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/

Upvotes: 1

Related Questions