On form inputs focus, show div. hide div on blur for multiple inputs and hidden divs

Question

I have 2 text input fields that have a hidden div associated with each one. When the client focuses in each text field the hidden div will appear. If the client clicks/focuses anywhere but the text field or the associated div they would both disappear (only 1 hidden div would be visible at a time).

I found a working example snippet for a single text field input but I don't know how to adjust the script for two separate inputs/divs.

1) Focus in "Search Markets" shows "Select markets" div (dark area click will close/hide the div).

2) Focus in "Search Symbols" shows "Select symbols" div (dark area click will close/hide the div).

 //BASED OFF SO SINGULAR EXAMPLE //https://stackoverflow.com/questions/2426438/jquery-on-form-input-focus-show-div-hide-div-on-blur-with-a-caveat#answer-2427363 $('#search-markets').focus(function() { $('div.select-filters').css('display', 'flex'); $(document).bind('focusin.select-filters click.select-filters',function(e) { if ($(e.target).closest('.select-filters, #search-markets').length) return; $(document).unbind('.select-filters'); $('div.select-filters').slideUp(300); }); }); $('div.select-filters').hide(); 

 #select-data-inputs { background-color: #000; } .select-filters { background-color: rgba(0, 0, 0, 0.8); border-top: 2px solid #fff; color: #fff; } #select-symbols { background-color: rgba(1, 56, 89, 0.85); } #select-markets { background-color: rgba(2, 104, 165, 0.85); } .filter-list li.list-inline-item { width: 48%; margin: 0; } 

 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous"> <div class="container-fluid"> <div class="row m-5 "> <div class="col-12 text-center"> <h1>On form inputs focus, show div. hide div on blur for <span class="text-danger">multiple inputs</span> and hidden divs</h1> <p class="lead"><i><a href="https://stackoverflow.com/questions/2426438/jquery-on-form-input-focus-show-div-hide-div-on-blur-with-a-caveat" target="_blank">Based from SO sigular example</a></i></p> </div> </div> <div class="row"> <!--TEXT FIELDS INPUT ROW--> <!--TEXT FIELDS INPUT ROW--> <div id="select-data-inputs" class="controls form-row p-3 w-100"> <div class="col-4"> <input type="text" id="search-markets" class="input form-control" placeholder="Search Markets"> </div> <div class="col-4 offset-1"> <input type="text" id="search-symbols" class="input form-control" placeholder="Search Symbols"> </div> </div> </div> <div id="main-display"> <!--HIDDEN DIV FOR FIRST TEXT FIELD--> <!--HIDDEN DIV FOR FIRST TEXT FIELD--> <div id="select-markets" class="row select-filters p-4"> <div class="select-heading col-12 pl-2"> <h6 class="small-sub-heading">Select markets</h6> </div> <div class="col-4 pt-2 select-filter-items"> <ul class="filter-list list-unstyled pl-2"> <li class="list-inline-item"> <input class="form-check-input" type="checkbox" id="market-option-1" value="market-option-1"> <label class="form-check-label" for="market-option-1">Market Option 1</label> </li> <li class="list-inline-item"> <input class="form-check-input" type="checkbox" id="market-option-2" value="market-option-2"> <label class="form-check-label" for="market-option-2">Market Option 2</label> </li> <li class="list-inline-item"> <input class="form-check-input" type="checkbox" id="market-option-3" value="market-option-3"> <label class="form-check-label" for="market-option-3">Market-Option 3</label> </li> <li class="list-inline-item"> <input class="form-check-input" type="checkbox" id="market-option-4" value="market-option-4"> <label class="form-check-label" for="market-option-4">Market-Option 4</label> </li> </ul> </div> </div> <!--HIDDEN DIV FOR SECOND TEXT FIELD--> <!--HIDDEN DIV FOR SECOND TEXT FIELD--> <div id="select-symbols" class="row select-filters p-4"> <div class="select-heading col-4 offset-5 pl-2"> <h6 class="small-sub-heading">Select symbols</h6> </div> <div class="col-4 offset-5 pt-2 select-filter-items"> <ul class="filter-list list-unstyled pl-2"> <li class="list-inline-item"> <input class="form-check-input" type="checkbox" id="symbol-option-1" value="symbol-option-1"> <label class="form-check-label" for="symbol-option-1">Symbol Option 1</label> </li> <li class="list-inline-item"> <input class="form-check-input" type="checkbox" id="symbol-option-2" value="symbol-option-2"> <label class="form-check-label" for="symbol-option-2">Symbol Option 2</label> </li> <li class="list-inline-item"> <input class="form-check-input" type="checkbox" id="symbol-option-3" value="symbol-option-3"> <label class="form-check-label" for="symbol-option-3">Symbol Option 3</label> </li> <li class="list-inline-item"> <input class="form-check-input" type="checkbox" id="symbol-option-4" value="symbol-option-4"> <label class="form-check-label" for="symbol-option-4">Symbol Option 4</label> </li> </ul> </div> </div> </div> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.bundle.min.js" integrity="sha384-pjaaA8dDz/5BgdFUPX6M/9SUZv4d12SUPF0axWc+VRZkx5xU3daN+lYb49+Ax+Tl" crossorigin="anonymous"></script> 

Answer 1

I suppose something like this is what you want:

 //BASED OFF SO SINGULAR EXAMPLE //https://stackoverflow.com/questions/2426438/jquery-on-form-input-focus-show-div-hide-div-on-blur-with-a-caveat#answer-2427363 $('#search-markets').focus(function() { $('div.select-filters.market').css('display', 'flex'); $(document).bind('focusin.select-filters.market click.select-filters.market',function(e) { if ($(e.target).closest('.select-filters.market, #search-markets').length) return; $(document).unbind('.select-filters.market'); $('div.select-filters.market').slideUp(300); }); }); $('#search-symbols').focus(function() { $('div.select-filters.symbol').css('display', 'flex'); $(document).bind('focusin.select-filters.symbol click.select-filters.symbol',function(e) { if ($(e.target).closest('.select-filters.symbol, #search-symbols').length) return; $(document).unbind('.select-filters.symbol'); $('div.select-filters.symbol').slideUp(300); }); }); $('div.select-filters').hide(); 

 #select-data-inputs { background-color: #000; } .select-filters { background-color: rgba(0, 0, 0, 0.8); border-top: 2px solid #fff; color: #fff; } #select-symbols { background-color: rgba(1, 56, 89, 0.85); } #select-markets { background-color: rgba(2, 104, 165, 0.85); } .filter-list li.list-inline-item { width: 48%; margin: 0; } 

 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous"> <div class="container-fluid"> <div class="row m-5 "> <div class="col-12 text-center"> <h1>On form inputs focus, show div. hide div on blur for <span class="text-danger">multiple inputs</span> and hidden divs</h1> <p class="lead"><i><a href="https://stackoverflow.com/questions/2426438/jquery-on-form-input-focus-show-div-hide-div-on-blur-with-a-caveat" target="_blank">Based from SO sigular example</a></i></p> </div> </div> <div class="row"> <!--TEXT FIELDS INPUT ROW--> <!--TEXT FIELDS INPUT ROW--> <div id="select-data-inputs" class="controls form-row p-3 w-100"> <div class="col-4"> <input type="text" id="search-markets" class="input form-control" placeholder="Search Markets"> </div> <div class="col-4 offset-1"> <input type="text" id="search-symbols" class="input form-control" placeholder="Search Symbols"> </div> </div> </div> <div id="main-display"> <!--HIDDEN DIV FOR FIRST TEXT FIELD--> <!--HIDDEN DIV FOR FIRST TEXT FIELD--> <div id="select-markets" class="row select-filters market p-4"> <div class="select-heading col-12 pl-2"> <h6 class="small-sub-heading">Select markets</h6> </div> <div class="col-4 pt-2 select-filter-items"> <ul class="filter-list list-unstyled pl-2"> <li class="list-inline-item"> <input class="form-check-input" type="checkbox" id="market-option-1" value="market-option-1"> <label class="form-check-label" for="market-option-1">Market Option 1</label> </li> <li class="list-inline-item"> <input class="form-check-input" type="checkbox" id="market-option-2" value="market-option-2"> <label class="form-check-label" for="market-option-2">Market Option 2</label> </li> <li class="list-inline-item"> <input class="form-check-input" type="checkbox" id="market-option-3" value="market-option-3"> <label class="form-check-label" for="market-option-3">Market-Option 3</label> </li> <li class="list-inline-item"> <input class="form-check-input" type="checkbox" id="market-option-4" value="market-option-4"> <label class="form-check-label" for="market-option-4">Market-Option 4</label> </li> </ul> </div> </div> <!--HIDDEN DIV FOR SECOND TEXT FIELD--> <!--HIDDEN DIV FOR SECOND TEXT FIELD--> <div id="select-symbols" class="row select-filters symbol p-4"> <div class="select-heading col-4 offset-5 pl-2"> <h6 class="small-sub-heading">Select symbols</h6> </div> <div class="col-4 offset-5 pt-2 select-filter-items"> <ul class="filter-list list-unstyled pl-2"> <li class="list-inline-item"> <input class="form-check-input" type="checkbox" id="symbol-option-1" value="symbol-option-1"> <label class="form-check-label" for="symbol-option-1">Symbol Option 1</label> </li> <li class="list-inline-item"> <input class="form-check-input" type="checkbox" id="symbol-option-2" value="symbol-option-2"> <label class="form-check-label" for="symbol-option-2">Symbol Option 2</label> </li> <li class="list-inline-item"> <input class="form-check-input" type="checkbox" id="symbol-option-3" value="symbol-option-3"> <label class="form-check-label" for="symbol-option-3">Symbol Option 3</label> </li> <li class="list-inline-item"> <input class="form-check-input" type="checkbox" id="symbol-option-4" value="symbol-option-4"> <label class="form-check-label" for="symbol-option-4">Symbol Option 4</label> </li> </ul> </div> </div> </div> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.bundle.min.js" integrity="sha384-pjaaA8dDz/5BgdFUPX6M/9SUZv4d12SUPF0axWc+VRZkx5xU3daN+lYb49+Ax+Tl" crossorigin="anonymous"></script> 

You need to split the class between symbols and markets ( .select-filters ). Notice that I use add select-filters market for market and select-filters symbol for symbol.

For separating the focus you need to use a specified function like div.select-filters.market for market and div.select-filters.symbol for symbol:

$('#search-markets').focus(function() {
    $('div.select-filters.market').css('display', 'flex');
    $(document).bind('focusin.select-filters.market click.select-filters.market',function(e) {
        if ($(e.target).closest('.select-filters.market, #search-markets').length) return;
        $(document).unbind('.select-filters.market');
        $('div.select-filters.market').slideUp(300);
    });
});

$('#search-symbols').focus(function() {
    $('div.select-filters.symbol').css('display', 'flex');
    $(document).bind('focusin.select-filters.symbol click.select-filters.symbol',function(e) {
        if ($(e.target).closest('.select-filters.symbol, #search-symbols').length) return;
        $(document).unbind('.select-filters.symbol');
        $('div.select-filters.symbol').slideUp(300);
    });
});
$('div.select-filters').hide();