I have a dropdown list with a default and additional 3 options. I want to hide and show the divs based on the selection. If the selection is default all the divs should be visible. Otherwise based on the selection, the divs should show or hide. However my jQuery code doesn't seem to work. I have no clue why. Here is the code.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">. </script>
<script>
$(document).ready(function(){
$('#purpose').on('change', function() {
if ( this.value == '1')
{
$(".partition").show();
}
else
{
$(".partition").hide();
}
});
});
</script>
And the html code is
<select id="purpose" style="width:33%;height:50px;border:0px;background: #dadada; font-size:x-large;">
<option selected><b>Type de matériel</b></option>
<option value="1">Poster</option>
<option value="2">Books</option>
<option value="3">Audio</option>
</select>
<div class="partition">
<?php the_field('poster_heading_1'); ?>
<?php
$image = get_sub_field('partition_image');
if( !empty($image) ):
?>
<a href="<?php the_sub_field('partition_pdf'); ?>" target="_blank">
<img src="<?php echo $image['url']; ?>">
</a>
<?php the_sub_field('partition_text'); ?>
<?php endif; ?>
</div>