Show/hide div on select

Question

I am trying to show div's depending on which value a select box is on. With my current script it is working, however, when I change the value of the select it shows the next div without hiding the previously selected one. I only want this JS script to show the currently selected div, not every div that is selected by the select box (ie. switching from one option to another).

js and html

 <script>
        $(function() {
            $('#contract_bid').hide();
            $('#equipment_purchase').hide();
            $('#hiring_employees').hide();
            $('#marketing').hide();
            $('#expansion').hide();
            $('#working_capital').hide();
            $('#inventory_purchase').hide();
            $('#refinancing').hide();
            $('#other').hide();
            $('#loan_application_requested_purpose').change(function(){
                if($('#loan_application_requested_purpose').val() == 'Contract Bid') {
                    $('#contract_bid').show(); 
                } else if($('#loan_application_requested_purpose').val() == 'Equipment Purchase') {
                    $('#equipment_purchase').show(); 
                } else if($('#loan_application_requested_purpose').val() == 'Hiring Employees') {
                    $('#hiring_employees').show(); 
                } else if($('#loan_application_requested_purpose').val() == 'Marketing') {
                    $('#marketing').show(); 
                } else if($('#loan_application_requested_purpose').val() == 'Expansion/Renovation') {
                    $('#expansion').show(); 
                } else if($('#loan_application_requested_purpose').val() == 'Working Capital') {
                    $('#working_capital').show(); 
                } else if($('#loan_application_requested_purpose').val() == 'Inventory Purchase') {
                    $('#inventory_purchase').show(); 
                } else if($('#loan_application_requested_purpose').val() == 'Refinancing') {
                    $('#refinancing').show(); 
                } else {
                    $('#other').show(); 
                }
            });
        });
    </script>

# HTML
<div id="contract_bid"></div>
<div id="equipment_purchase"></div>
<div id="hiring_employees"></div>
<div id="marketing"></div>
<div id="expansion"></div>
<div id="working_capital"></div>
<div id="inventory_purchase"></div>
<div id="refinancing"></div>
<div id="other"></div>

Answer 1

Like this

1. Give all the divs a class, for example "loan_purpose"
2. change your script to this:

$(function() {
  $('#loan_application_requested_purpose').on("change",function(){
    $(".loan_purpose").hide();
    // change all spaces to underscore and grab the first part of Expansion/
    var $div = $("#"+$(this).val().toLowerCase().replace(/ /g,"_").split("/")[0]);
    if ($div.length>0) $div.show();
    else $("#other").show(); 
  }).change(); // run change on load to show relevant already selected
});

Alternative to giving a class: if your divs have a common parent, you can do

$("#parentID > div").hide(); 

instead of

$(".loan_purpose").hide();

---

Alternative solution:

If you can change the values to reflect the IDs of the divs to show then the script will be much shorter:

<select id="loan_application_requested_purpose">
  <option value="other">Please select</option>
  <option value="equipment_purchase">Equipment Purchase</option>
  .
  .
  <option value="expansion">Expansion/Renovation</option>
</select>

Then my script needs only

$(function() {
    $('#loan_application_requested_purpose').on("change",function(){
      $(".loan_purpose").hide();
      $("#"+$(this).val()).show();
    }).change(); // run change on load to show relevant already selected
});

Answer 2

First of all add common class to all your divs:

<div id="other" class="section"></div>
<div id="contract_bid" class="section"></div>
<!-- and so on ... -->

Then it will allow you to reduce your code:

$(function () {
    $('.section').hide();

    $('#loan_application_requested_purpose').change(function () {

        $('.section').hide();

        var val = $(this).val();

        if (val == 'Contract Bid') {
            $('#contract_bid').show();
        } else if (val == 'Equipment Purchase') {
            $('#equipment_purchase').show();
        }
        // other checks ....
        else {
            $('#other').show();
        }
    });
});

Note that it's cleaner to calculate value only once with var val = $(this).val(); and use it later.

And finally even better would be to use CSS to initially hide sections (and get rid of the first $('.section').hide(); ):

.section {
    display: none;
}

Answer 3

<div id="#myDivs">
<div id="contract_bid"></div>
<div id="equipment_purchase"></div>
<div id="hiring_employees"></div>
<div id="marketing"></div>
<div id="expansion"></div>
<div id="working_capital"></div>
<div id="inventory_purchase"></div>
<div id="refinancing"></div>
<div id="other"></div>
</div>

    if($('#loan_application_requested_purpose').val() == 'Contract Bid') {
         $("#myDivs div").hide()                    
        $('#contract_bid').show(); 
    }else
    {
    ...

Answer 4

you can hide the visible div before you display the hidden div:

    $(function() {
        $('#contract_bid').hide();
        $('#equipment_purchase').hide();
        $('#hiring_employees').hide();
        $('#marketing').hide();
        $('#expansion').hide();
        $('#working_capital').hide();
        $('#inventory_purchase').hide();
        $('#refinancing').hide();
        $('#other').hide();
        $('#loan_application_requested_purpose').change(function(){
            // here comes the change:
            $('.loan_application_purpose:visible').hide();
            if($('#loan_application_requested_purpose').val() == 'Contract Bid') {
                $('#contract_bid').show(); 
            } else if($('#loan_application_requested_purpose').val() == 'Equipment Purchase') {
                $('#equipment_purchase').show(); 
            } else if($('#loan_application_requested_purpose').val() == 'Hiring Employees') {
                $('#hiring_employees').show(); 
            } else if($('#loan_application_requested_purpose').val() == 'Marketing') {
                $('#marketing').show(); 
            } else if($('#loan_application_requested_purpose').val() == 'Expansion/Renovation') {
                $('#expansion').show(); 
            } else if($('#loan_application_requested_purpose').val() == 'Working Capital') {
                $('#working_capital').show(); 
            } else if($('#loan_application_requested_purpose').val() == 'Inventory Purchase') {
                $('#inventory_purchase').show(); 
            } else if($('#loan_application_requested_purpose').val() == 'Refinancing') {
                $('#refinancing').show(); 
            } else {
                $('#other').show(); 
            }
        });
    });

HTML:

<div id="contract_bid" class="loan_application_purpose"></div>
<div id="equipment_purchase" class="loan_application_purpose"></div>
<div id="hiring_employees" class="loan_application_purpose"></div>
<div id="marketing" class="loan_application_purpose"></div>
<div id="expansion" class="loan_application_purpose"></div>
<div id="working_capital" class="loan_application_purpose"></div>
<div id="inventory_purchase" class="loan_application_purpose"></div>
<div id="refinancing" class="loan_application_purpose"></div>
<div id="other" class="loan_application_purpose"></div>

Answer 5

Always hide all then show selected:

 $( '#trigger' ).change( function() { var selected_id = '#' + $('#trigger').val(); // Grab the ID to show $( '.foo' ).hide(); // Hide all $( selected_id ).show(); // Show selected } ).change(); // Run at least once 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <select id="trigger"> <option>d1</option> <option>d2</option> </select> <div id="d1" class="foo">D1</div> <div id="d2" class="foo">D2</div> 

Answer 6

Here, you have to hide other div in if or elseif condition like in if

if($('#loan_application_requested_purpose').val() == 'Contract Bid') {

 $('#contract_bid').show(); 
    $('#equipment_purchase').hide();
    $('#hiring_employees').hide();
    $('#marketing').hide();
    $('#expansion').hide();
    $('#working_capital').hide();
    $('#inventory_purchase').hide();
    $('#refinancing').hide();
}