Jquery Accordion選項卡不要關閉點擊按鈕

Question

嗨在我的網站我有一個就業門戶頁面，我用jquery手風琴來打開和關閉工作posted.Here當我點擊更多的信息按鈕手風琴選項卡正在擴大，但再次點擊更多信息按鈕時，它不會關閉，只有第一個按鈕向下打開，其餘部分向上打開。這裏是我的代碼。

<div class="digitalmarketingassociate"> 
        <span class="digit">Digital Marketing Associate</span> 
        <div class="applynow">Apply Now</div> 
        <div class="moreinfo accordion" >More Info</div> 
        <div class="panel"> 
         <p class="jobdes">Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum</p> 
       </div>      
       </div> 
       <div class="juniorqaengineer"> 
        <span class="digit">Junior QA Engineer</span> 
        <div class="applynow">Apply Now</div> 
        <div class="moreinfo accordion1">More Info</div> 
        <div class="panel"> 
         <p class="jobdes">Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum</p> 
        </div>     
       </div>    
       <div class="junioriosdeveloper"> 
        <span class="digit">Junior iOS Developer</span> 
        <div class="applynow">Apply Now</div> 
        <div class="moreinfo accordion2">More Info</div> 
        <div class="panel"> 
         <p class="jobdes">Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum</p>        
        </div>    
       </div> 

的Jquery：

所有的

var acc = document.getElementsByClassName("accordion"); 
var i; 
var currentActive; 
var toggleAccordionState = function(accordion) { 
     accordion.classList.toggle("active"); 
    accordion.nextElementSibling.classList.toggle("show"); 
}; 

for (i = 0; i < acc.length; i++) { 
acc[i].onclick = function(){ 
    if(currentActive) { 
      toggleAccordionState(currentActive); 
    } 
    toggleAccordionState(this); 
    currentActive = this;   
} 
} 
var acc = document.getElementsByClassName("accordion1"); 
var i; 
var currentActive; 
var toggleAccordionState = function(accordion) { 
     accordion.classList.toggle("active"); 
    accordion.nextElementSibling.classList.toggle("show"); 
}; 

for (i = 0; i < acc.length; i++) { 
acc[i].onclick = function(){ 
    if(currentActive) { 
      toggleAccordionState(currentActive); 
    } 
    toggleAccordionState(this); 
    currentActive = this;   
    } 
    } 
    var acc = document.getElementsByClassName("accordion2"); 
    var i; 
    var currentActive; 
    var toggleAccordionState = function(accordion) { 
     accordion.classList.toggle("active"); 
    accordion.nextElementSibling.classList.toggle("show"); 
    }; 

for (i = 0; i < acc.length; i++) { 
    acc[i].onclick = function(){ 
    if(currentActive) { 
      toggleAccordionState(currentActive); 
    } 
    toggleAccordionState(this); 
    currentActive = this;   
    } 
    } 

Answer 1

首先，使用一個名爲classaccordion這樣的：<div class="moreinfo accordion">More Info</div>。它有助於編寫更有效且易於理解的內容。 Javascript代碼看起來是這樣的：

var acc = document.getElementsByClassName("accordion"); 
for (i = 0; i < acc.length; i++) { 
    acc[i].onclick = function(){ 
     this.classList.toggle("active"); 
     this.nextElementSibling.classList.toggle("show"); 
    } 
} 

HTML代碼

<div class="digitalmarketingassociate"> 
       <span class="digit">Digital Marketing Associate</span> 
       <div class="applynow">Apply Now</div> 
       <div class="moreinfo accordion" >More Info</div> 
       <div class="panel"> 
        <p class="jobdes">Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum</p> 
      </div>      
      </div> 
      <div class="juniorqaengineer"> 
       <span class="digit">Junior QA Engineer</span> 
       <div class="applynow">Apply Now</div> 
       <div class="moreinfo accordion">More Info</div> 
       <div class="panel"> 
        <p class="jobdes">Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum</p> 
       </div>     
      </div>    
      <div class="junioriosdeveloper"> 
       <span class="digit">Junior iOS Developer</span> 
       <div class="applynow">Apply Now</div> 
       <div class="moreinfo accordion">More Info</div> 
       <div class="panel"> 
        <p class="jobdes">Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum</p>        
       </div>    
      </div> 
</div> 

更進一步，使用一個名爲.show

.show { 
    display: none; 
} 

這裏的樣式類是工作solution