Show one div and hide others based on input value

Question

How can I refactor $('#region-2, #region-3').hide(); so that I don't need to type in multiple ID's? There may be 50+ elements.

 $('#submit1').on("click", function() { var input_val = $('#input1').val(); if (input_val == 'region1') { $('#region-1').show().attr("style", "display: block!important"); $('#region-2, #region-3').hide(); } else if (input_val == 'region2') { $('#region-2').show().attr("style", "display: block!important"); $('#region-1, #region-3').hide(); } }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <input type="text" class="form-control marg-bot-20" id="input1" placeholder=""> <input class="btn btn-primary" id="submit1" type="submit" value=""> <div class="region-container"> <div id="region-1" class="hide"> region 1 </div> <div id="region-2" class="hide"> region 2 </div> <div id="region-3" class="hide"> region 3 </div> </div> 

Answer 1

To achieve this you can put the lookup value in a data attribute on each child div. Then you can filter() them to find the one which matches the value of #input1 and show() it whilst hiding all the others. Try this:

 $('#submit1').on("click", function() { var input_val = $('#input1').val(); $('.region-container > div').hide().filter(function() { return $(this).data('lookup') === input_val; }).show(); }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <input type="text" class="form-control marg-bot-20" id="input1" placeholder=""> <input class="btn btn-primary" id="submit1" type="submit" value=""> <div class="region-container"> <div id="region-1" class="hide" data-lookup="region1"> region 1 </div> <div id="region-2" class="hide" data-lookup="region2"> region 2 </div> <div id="region-3" class="hide" data-lookup="region3"> region 3 </div> </div> 

Answer 2

If you are going to use the same text as the id and just the space that differ so you could use it.

Since you're using bootstrap you could play with the hide class and no need for the inline style.

 $('#submit1').on("click", function() { if( $('#input1').val() ){ var input_val = $('#input1').val().replace(' ', '-'); $('div[id^="region-"]').addClass('hide'); $('#' + input_val).removeClass('hide'); } }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" /> <input type="text" class="form-control marg-bot-20" id="input1" placeholder=""> <input class="btn btn-primary" id="submit1" type="submit" value="Search"> <br> <div class="region-container"> <div id="region-1" class="hide"> region 1 </div> <div id="region-2" class="hide"> region 2 </div> <div id="region-3" class="hide"> region 3 </div> </div> 

Answer 3

I just update few jQuery changes in your code, i hope it'll help you out. Thanks

You have to type same ids in input which you have write in your HTML

 $('#submit1').on("click", function() { var input_val = $('#input1').val(); $('.hide').hide(); $('#' + input_val).show(); }); 

 .hide { display: none; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <input type="text" class="form-control marg-bot-20" id="input1" placeholder=""> <input class="btn btn-primary" id="submit1" type="submit" value="Button"> <div class="region-container"> <div id="region-1" class="hide"> region 1 </div> <div id="region-2" class="hide"> region 2 </div> <div id="region-3" class="hide"> region 3 </div> </div>