How to set the slide effect on jquery

Question

I have designed a page. How to add functionality of accordion menu. But can't get idea of my problem.

Like in this image

Like one panel was opened always

And slide effect to this menu.

Thanks in advance :)

    jQuery(document).ready(function () {
        $(".accordion").click(function () {
            if (!$(this).hasClass("active")) {
                var oldAcc = $(".accordion.active");
                oldAcc.toggleClass("active");
                oldAcc.next().toggleClass("show");
            }
            $(this).toggleClass("active");
            $(this).next().toggleClass("show");
        });
    });

.boot-accordian button.accordion {
    background-color: #fff;
    color: #363636;
    cursor: pointer;
    width: 100%;
    border: 1px solid #d7d7d7;
    text-align: left;
    outline: none;
    font-size: 18px;
    font-weight: 600;
    transition: 0.4s;
    padding: 20px;
    margin-top: 20px;
}
.boot-accordian .para {
    padding-left: 1px;
    padding-top: 2%;
    font-size: 15px;
}
.boot-accordian button.accordion.active{
    background-color: #0097C7;
    color: #fff;
}
.boot-accordian button.accordion:after {
    font-size: 20px;
    font-weight: 800;
    font-family: FontAwesome;
    content: "\f106";
    color: #97999c;
    float: right;
}
.boot-accordian button.accordion.active:after {
    content: "\f107";
    font-family: FontAwesome;
    font-size: 20px;
    font-weight: 800;
    font-size: 16px;
    color: #fff;
}
.boot-accordian div.panel {
    padding: 0 18px;
    display: none;
    background-color: #fff;
    color: #363636;
    border: 1px solid #d7d7d7;
    border-top: 0;
    border-radius: 0;
}
.boot-accordian div.panel.show {
    display: block;
    margin: 0;
    background-color: #fff;
    color: #363636;
    padding-bottom: 2%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="boot-accordian">
<button class="accordion">How do I call Eventbooking?</button>
 <div class="panel">
                                            <p class="para">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla maximus sem a mauris rutrum tempor. Curabitur dapibus id fells
                                                a rhoncus. Vestibulum gravida a velit quis tristique. Donec dapibus lorem  eget magna lacinia gravida</p>
                                        </div>
                                        <button class="accordion active">Lorem ipsum dolor sit amet, consectetur adipiscing elit?</button>
                                        <div class="panel show">
                                            <p class="para">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla maximus sem a mauris rutrum tempor. Curabitur dapibus id fells
                                a rhoncus. Vestibulum gravida a velit quis tristique. Donec dapibus lorem  eget magna lacinia gravida</p>
                                        </div>
                                        <button class="accordion">Quisque ullamcorper lectus eget justo tincidunt, at scelerisque nulla malesuada?</button>
                                        <div class="panel">
                                            <p class="para">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla maximus sem a mauris rutrum tempor. Curabitur dapibus id fells
                                a rhoncus. Vestibulum gravida a velit quis tristique. Donec dapibus lorem  eget magna lacinia gravida</p>
                                        </div>
                                        <button class="accordion">Etiam semper orci vitae nisi vestibulam varius?</button>
                                        <div class="panel">
                                            <p class="para">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla maximus sem a mauris rutrum tempor. Curabitur dapibus id fells
                                a rhoncus. Vestibulum gravida a velit quis tristique. Donec dapibus lorem  eget magna lacinia gravida</p>
                                        </div>
                                        <button class="accordion">Nullam ac nulla vel dui blandit blandit?</button>
                                        <div class="panel">
                                            <p class="para">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla maximus sem a mauris rutrum tempor. Curabitur dapibus id fells
                                a rhoncus. Vestibulum gravida a velit quis tristique. Donec dapibus lorem  eget magna lacinia gravida</p>
                                        </div>
                                        <button class="accordion">Maecenas fermentum erac ac vulputate  fermentum?</button>
                                        <div class="panel">
                                            <p class="para">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla maximus sem a mauris rutrum tempor. Curabitur dapibus id fells
                                a rhoncus. Vestibulum gravida a velit quis tristique. Donec dapibus lorem  eget magna lacinia gravida</p>
                                        </div>
                                        <button class="accordion">Duis sed nibh eget mauris ultrices scelerisque?</button>
                                        <div class="panel">
                                            <p class="para">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla maximus sem a mauris rutrum tempor. Curabitur dapibus id fells
                                a rhoncus. Vestibulum gravida a velit quis tristique. Donec dapibus lorem  eget magna lacinia gravida</p>
                                        </div>
                                        <button class="accordion">Mauris at tellus id ante tempor scelerisque?</button>
                                        <div class="panel">
                                            <p class="para">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla maximus sem a mauris rutrum tempor. Curabitur dapibus id fells
                                a rhoncus. Vestibulum gravida a velit quis tristique. Donec dapibus lorem  eget magna lacinia gravida</p>
                                        </div>
                                        <button class="accordion">Suspendise et lorem non nisi vehicula convallis?</button>
                                        <div class="panel">
                                            <p class="para">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla maximus sem a mauris rutrum tempor. Curabitur dapibus id fells
                                a rhoncus. Vestibulum gravida a velit quis tristique. Donec dapibus lorem  eget magna lacinia gravida</p>
                                        </div>
                                        <button class="accordion">Morbi eget dolor quis ligula blandit malesuada?</button>
                                        <div class="panel">
                                            <p class="para">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla maximus sem a mauris rutrum tempor. Curabitur dapibus id fells
                                a rhoncus. Vestibulum gravida a velit quis tristique. Donec dapibus lorem  eget magna lacinia gravida</p>
                                        </div>
                                    </div>

Answer 1

Change you jquery

jQuery(document).ready(function () {
        $(".accordion").click(function () {
            if (!$(this).hasClass("active")) {
                var oldAcc = $(".accordion.active");
                oldAcc.toggleClass("active");
                oldAcc.next().slideToggle();
            }
            $(this).toggleClass("active");
            $(this).next().slideToggle();
        });
    });