Okay I'm still pretty new but improving and I've built this script which switches out multiple divs when you click different buttons, but I plan on extending this to use 20 different buttons to switch out 20 different divs so can it be simplified too not be a massive script.

```
<div id="buttons">
    <div id="salt"></div>
    <div id="pepper"></div>
    <div id="mustard"></div>
</div>

<div id="content">
    <div class="salt-div"> SALT </div>
    <div class="pepper-div"> PEPPER </div>
    <div class="mustard-div"> MUSTARD </div>
</div>

<script>
    $(document).ready(function(){
      $('#salt-button').click(function() {
        $('.salt-div').show();
        $('.pepper-div').hide();
        $('.mustard-div').hide();
        $('#salt-button').css('background', '#F1F1F1');
        $('#pepper-button').css('background', 'none');
        $('#mustard-button').css('background', 'none');
      });

      $('#pepper-button').click(function() {
        $('.pepper-div').show();
        $('.salt-div').hide();
        $('.mustard-div').hide();
        $('#pepper-button').css('background', '#F1F1F1');
        $('#salt-button').css('background', 'none');
        $('#mustard-button').css('background', 'none');
      });

      $('#mustard-button').click(function() {
        $('.mustard-div').show();
        $('.salt-dev').hide();
        $('.pepper-div').hide();
        $('#mustard-button').css('background', '#F1F1F1');
        $('#salt-button').css('background', 'none');
        $('#pepper-button').css('background', 'none');
      });
    });

</script>

```