Bootstrap Snippet Toggle focus , add remove class on focus by variable using HTML CSS Javascript

1
2
3
4
5
6
7
8
9
10
11
12
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="wrapper">
    <label for="name" class="required">name</label>
    <div class="data_area">
        <input type="text" id="" name="" value="" title="" class="" />
    </div>
</div>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
.searchExp {
    background:yellow;
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
jQuery(document).ready(function(){
  var $inputs = jQuery('.wrapper input').click(function () {
    $inputs.parent().filter('.searchExp').removeClass('searchExp');
    jQuery(this).parent().addClass('searchExp');
});
});
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

"Toggle focus , add remove class on focus by variable"
Bootstrap 4.1.1 Snippet by naimansari

Related: See More

Questions / Comments:

"Toggle focus , add remove class on focus by variable" Bootstrap 4.1.1 Snippet by naimansari

Related: See More

Questions / Comments:

"Toggle focus , add remove class on focus by variable"
Bootstrap 4.1.1 Snippet by naimansari