Show/Hide Divs using jQuery and ACF

Question

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>

Answer 1

If I understood correctly, you should have 3 partition div to work like you said, each div should have the id number equals select option value that you want to show. Check this code and let me say if this is what you need.

jQuery:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">. </script>
<script>
    $(document).ready(function(){ 
        $('#purpose').on('change', function() { 
            var val = $(this).val();
            console.log(val);
            if ( val == '0' ) { 
                $(".partition").show(); 
            } else { 
                $(".partition").hide(); 
                $("#partition-" + val).show(); 
            } 
        }); 
    }); 
</script>

HTML:

<select id="purpose" style="width:33%;height:50px;border:0px;background: #dadada; font-size:x-large;">
    <option selected value="0"><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" id="partition-1">
    <?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>

Answer 2

This should work, just corrected a bit of the jquery

 <script>
$(document).ready(function(){
$('#purpose').change(function() {
if ( $(this).val() == '1')
{
$(".partition").show();
}
else
{
$(".partition").hide();
}
});
});
</script>