jqueryにスライド効果を設定する方法

Question

私はページを設計しました。アコーディオンメニューの機能を追加する方法。しかし、私の問題のアイデアを得ることはできません。この画像で

と同様に1枚のパネルと同様に

は常に

を開いて、このメニューにエフェクトをスライドさせました。事前に

感謝:)

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

あなたは

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(); 
     }); 
    });