Question

Simply, I want to change the css display state of a div based on what you select on a drop down. That means, when I select an item on my drop down, it changes a div’s css display property from none to block.

My CSS

<style>
  .lp_claims, .gap_claims, .home_claims, .motor_claims{ display:none;}
</style>

HTML

<select name="claimsform">
<option value="lp_claims"> Loan Protection </option>
 <option value="gap_claims"> GAP or Cash Assist </option>
 <option value="home_claims"> Home </option>
 <option value="land_claims"> Landlords </option>
<option value="motor_claims"> Car </option>
</select> 

<div class="lp_claims">
<p> <strong>Loan </strong><br>
Contact  us  </p>
</div>

<div class="gap_claims">
<p> <strong>GAP or Cash Assist </strong><br>
Contact  us  </p></div>

<div class="home_claims">
<p><strong>Home </strong><br>
Contact  us  .</p>
</div>

<div class="motor_claims">
<p><strong>Motor</strong><br>
Contact  us .</p>
</div>

and Jquery

<script type="text/javascript">
$(document).ready(function(){
$('select').on('change', function(){
var val = $(this).val();
$('div').hide();
$('.' + val).css('display','block'); }).change();
});
</script>

Here’s the fiddle : http://jsfiddle.net/En4Ka/

OK NOW EVERYTHING WORKS FINE. AND MY QUESTION IS : Why isnt this working on my HTML file : http://fitfixtraining.com.au/test/index.html

Answer 1

Because (as ahren [+1] said) you have an illegal character in your code, look at your console’s errors.

It usually happens when you copypasta code from jsfiddle.

Here’s a screenshot from Notepad++ where I highlight it for you:

edit: Just coded a quick JS to get rid of those pesky invisible white spaces, you can try it here.