JQuery toggle with HTML sections

I am attempting to have jQuery listen for a click on a div, which then brings another div in using a transition.

However, I cannot get the toggle to actually show my div with the contents I want to show. It will hide section-1 but not toggle section-2 into view.

Idea: Section-1 holds HTML polygon Section-2 (hidden at load) holds input fields for data return

When Section-1 is clicked, jQuery hide Section-1 and toggles Section-2 into view with a transition.

HTML:

<!-- start button section -->
        <section class="site-section fullscreen" id="section-1">
          <div class="row justify-content-center">
            <div class="col-md-11">
              <div class="row">
                <h2 class="heading text-uppercase text-white" data-aos="fade-up">Live Feed</h2>
              </div>
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
                    <polygon onclick="startSim()" points="40,30 65,50 40,70"></polygon>
                    </svg>
            </div>
          </div>
        </section>
<!-- end button section -->

<!-- data fields section -->
<section class="site-section fullscreen" id="section-2" style="display:none">
          <div class="row justify-content-center">
            <div class="col-md-11">

              <div class="row">
                <h2 class="heading text-uppercase text-white" data-aos="fade-up">Live Feed 2!</h2>
              </div>

            </div>
          </div>
        </section>
<!-- data fields section -->

jQuery

$('#section-1').click(function () {

    //Hiding the Start Button Div
    $('#section-1').hide();

    // Set the effect type
    var effect = 'slide';

    // Set the options for the effect type chosen
    var options = { direction: down };

    // Set the duration (default: 400 milliseconds)
    var duration = 1000;
    
    $('#section-2').toggle(effect, options, duration);
});

Any help is appreciated.