Слайд div по клику, а затем снова - Jquery

У меня есть две кнопки бок о бок, которые при нажатии отмечаются "активным" классом, а также запускают эффект слайда CSS на ниже div.

При первом нажатии страницы кнопка A уже классифицируется как "активная", а слайд 1 открыт. Когда вы нажимаете кнопку B, она успешно классифицируется как "активная", а слайдер успешно слайд слайд 2 (справа налево).

То, что я не могу исправить, заключается в том, как теперь изменить слайдер, если кнопка A снова нажата. Я посмотрел примеры на живых веб-сайтах, которые показывают то же самое, но они кажутся намного более сложными, чем то, что должно быть.

HTML:

<div id="get-in-touch" class="row show-for-medium-up">
    <ul class="tab-navigation small-12 columns">
        <li id="say-hello-form">
            <div class="small-12 medium-6 columns">
                <h4>Want to say hello?</h4>
                <button id="send-message" class="active" rel="tab1">Send us a Message</button>
            </div>
        </li>

        <h4 class="or">OR</h4>

        <li id="start-project-form">
            <div class="small-12 medium-6 columns">
                <h4>Want to work with us?</h4>
                <button id="kick-start" rel="tab2">Kick Start your Project</button>
            </div>
        </li>
    </div>
</div>

<section id="say-hello-wrapper-outer" >
    <section id="say-hello-wrapper-inner" class="row">
        <section id="say-hello" class="active hide-for-small tab-container">
            <div id="tab1" class="row tab_content">
                <div class="medium-6 columns">
                    <div id="map">
                        <p>We work remotely with clients all over Australia!</p>
                        <img src="<?php echo get_template_directory_uri(); ?>/img/map.jpg">
                    </div>
                </div>
                <div id="form" class="medium-6 columns">
                    <?php gravity_form(2, false, false, false, '', true); ?>
                </div>
            </div>

            <div id="tab2" class="row tab_content">
                <div id="form" class="medium-12 columns">
                    <?php gravity_form(3, false, false, false, '', true); ?>
                </div>
            </div>
        </section>
    </section>
</section>  

CSS:

#say-hello-wrapper-outer {
    background: #f5f6fa;
    width: 100%;
}

#say-hello-wrapper-inner {
    overflow: hidden;
    background: #f5f6fa;
}

#say-hello {
    width: 2280px;
    height: 2000px;
    overflow: hidden;
    margin-left: -1140px;
    // margin-left: -1100px;

    -webkit-transition: margin-left 0.6s;
    -moz-transition: margin-left 0.6s;
    transition: margin-left 0.6s;

    #tab1, #tab2 {
        width: 1170px;
        float: left;
    }
}

#say-hello > #form {
    border-bottom: 1px solid #ebebeb;
}

#say-hello.active {
    margin-left: 0px;
}

JS:

jQuery("ul.tab-navigation li button").click(function() {
    jQuery("ul.tab-navigation li button").removeClass("active");
    jQuery(this).addClass("active");

    jQuery('#say-hello').removeClass("active", function() {
      jQuery('#say-hello').addClass("active");
    });
});