test b drp dwn2

forked from sohaibghani1's block: test b drp dwn

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.js"></script>
<script src="bootstrap-toggle.min.js"></script>
<link rel="stylesheet" href="bootstrap-toggle.min.css">
<link rel="stylesheet" href="bootstrap-theme.min.css">
  
<style>
    body {
  padding: 15px;
}
/* each line in dropdown */
/* .checkbox-menu li label {
    display: block;
    padding: 0px 20px;
    font-weight: normal;
    color: #333;
} */
/* .checkbox-menu li input {
    margin: 0px 0px;
    top: 0px;
    position: relative;
} */

.checkbox-menu22 li.active label {
    background-color: #5aa8f6;
    font-weight:1;
}

/* hover on each line in dropdown */
.checkbox-menu22 li:hover,
.checkbox-menu22 li:focus {
    background-color: #b6f7fb !important;
}

/* .checkbox-menu li.active label:hover,
.checkbox-menu li.active label:focus {
    background-color: yellow;
} */

.btn-danger {
        color: #333;
        background-color: indianred;
        border-color: #d43f3a;
}
.btn-primary:active:hover, .btn-primary.active:hover, .open > .dropdown-toggle.btn-primary:hover, .btn-primary:active:focus, .btn-primary.active:focus, .open > .dropdown-toggle.btn-primary:focus, .btn-primary:active.focus, .btn-primary.active.focus, .open > .dropdown-toggle.btn-primary.focus{
    color: #333;
    background-color: #d4d4d4;
    border-color: #8c8c8c;
  }  
.btn:hover,.btn:focus, .btn:active{
/*     background-color: #b8b8ff; */
    border-color: #d43f3a;
  } 
.btn {
    display: inline-block;
    padding: 2px 10px;
    margin-bottom: 0;
    font-size: 14px;
    font-weight: 400;
    line-height: -3.428571444;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-image: none;
    border: 1px solid transparent;
    border-radius: 4px;
   }
  
.toggle-on.btn-sm:hover {    
    background-color: #d4d4d4; 
    border-color: #d43f3a;
  }
.toggle-off.btn-sm:hover {    
    background-color: #d4d4d4; 
    border-color: #d43f3a;
  }  
.toggle-on.btn-sm {
    padding-right: 20px;
    color: #333;
    font-weight: 600;
    background-color: indianred; 
    /*border-width: 1px;  
    border-color: #d43f3a;
    /*width: 12px;*/
  }
.toggle-handle.btn.btn-default.btn-sm{
    background-color: brown;
  }

.toggle.btn-sm{
  min-width: 50px;
  min-height: 30px;
  border-color: #d43f3a;
  border: #d43f3a;
  border-width: 5px;
}  
  
  </style>
</head>

<body>
  
  <div class="dropdown">
  <button class="btn btn-danger dropdown-toggle" type="button"id="dropdownMenu1" data-toggle="dropdown" 
          aria-haspopup="true" aria-expanded="true" style="height :34px; width:165px;   border-color: #d43f3a;  border-width: 3px;outline-color: transparent;"> Explore Details <span class="caret"></span>
  </button>
    
  <ul id="drop" class="dropdown-menu checkbox-menu22 allow-focus22" aria-labelledby="dropdownMenu1" style="min-width:165px ; text-align:left;">

</ul>
</div>
  
  
  <script>
    
function addCheckbox(name) {
   var container = $('#drop');
   var id = container.find('input').length+1; 
		
   var container2= $('<li />', {id:id, style:"width:165px ; text-align:left;"}).appendTo(container);
   $('<input />', { type: 'checkbox', id: 'cb'+id, value: name, style: "display: inline-block; margin-left:20px;vertical-align: sub;    width: 15px;height: 15px;" }).appendTo(container2);
   var label=$('<label />', { 'for': 'cb'+id, text: name,class:"check", style: "display: inline-block;padding: 0px 0px; font-weight: bold;color: #333;min-width: 125px;    margin-left: 5px; margin-bottom: 0px;" }).appendTo(container2);
}

});

$(document).on('click', '.allow-focus22', function (e) {
  e.stopPropagation();
});

// to turn other checkbox to uncheck
$('input:checkbox').click(function() {
    $('input:checkbox').not(this).prop('checked', false);
//   $('input:checkbox').not(this).closest("li").toggleClass("active", false);
  var templi= $('input:checkbox').not(this).closest("li");
//   console.log(templi.length);
  for (var l=0;l<templi.length;l++){
  	templi[l].style.backgroundColor ="transparent";
  }
});

</script>
</body>

https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js

https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.js