如何使用外部按鈕/控件循環手風琴內容？

Question

所以我在這裏有一個簡單的手風琴 - https://jsfiddle.net/fLLbkxcf/ - 這是使用slideToggle顯示和隱藏手風琴的內容。

$(".accordion_trigger").click(function() { 
    $(this).next(".accordion_holder").slideToggle("slow").siblings(".accordion_holder:visible").slideUp("slow"); 
    $(this).toggleClass("current"); 
    $(this).siblings(".accordion_trigger").removeClass("current"); 
}); 

但是我有我希望能夠循環通過手風琴的不同狀態手風琴（下一個，上一個）下方的一些按鈕。

有沒有人對我應該怎麼解決這個還是可以點我在正確的方向任何線索？

Answer 1

你可以有一個單擊處理程序，在這裏你會發現當前元素，然後導航爲基礎，以是否顯示上一個/下一個元素

$(".accordion_trigger").click(function() { 
 
    $(this).next(".accordion_holder").slideToggle("slow").siblings(".accordion_holder:visible").slideUp("slow"); 
 
    $(this).toggleClass("current"); 
 
    $(this).siblings(".accordion_trigger").removeClass("current"); 
 
}); 
 
$('.acc-ext-trigger').click(function() { 
 
    var $curr = $(".accordion_trigger.current"), 
 
    dir = $(this).data('dir'); 
 
    var $next = $curr[dir == -1 ? 'prevAll' : 'nextAll']('.accordion_trigger'); 
 
    $next = $next.length ? $next : $('.accordion_trigger')[dir == -1 ? 'last' : 'first'](); 
 
    $next.triggerHandler('click'); 
 
});

.accordion_holder { 
 
    display: none; 
 
    background: #dddddd; 
 
    border-bottom: 1px solid black; 
 
} 
 
.accordion_trigger { 
 
    width: 100%; 
 
    background: grey; 
 
    border-bottom: 1px solid black; 
 
} 
 
.accordion_trigger p, 
 
.accordion_holder p { 
 
    margin: 0; 
 
} 
 
/* Clearfix */ 
 

 
.clearfix:after { 
 
    visibility: hidden; 
 
    display: block; 
 
    font-size: 0; 
 
    content: " "; 
 
    clear: both; 
 
    height: 0; 
 
} 
 
.clearfix { 
 
    display: inline-block; 
 
} 
 
.clearfix { 
 
    display: block; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<!-- Accordion 1 --> 
 
<div class="accordion_trigger"> 
 
    <p class="leadin">Accordion Title 1</p> 
 
</div> 
 

 
<div class="accordion_holder"> 
 
    <div class="clearfix"> 
 
    <p>This is a test</p> 
 
    </div> 
 
</div> 
 

 
<!-- Accordion 2 --> 
 
<div class="accordion_trigger"> 
 
    <p class="leadin">Accordion Title 2</p> 
 
</div> 
 

 
<div class="accordion_holder"> 
 
    <div class="clearfix"> 
 
    <p>This is a test</p> 
 
    </div> 
 
</div> 
 

 
<!-- Accordion 3 --> 
 
<div class="accordion_trigger"> 
 
    <p class="leadin">Accordion Title 2</p> 
 
</div> 
 

 
<div class="accordion_holder"> 
 
    <div class="clearfix"> 
 
    <p>This is a test</p> 
 
    </div> 
 
</div> 
 

 
<!-- Accordion controls --> 
 
<a href="#" class="acc-ext-trigger" data-dir="1">Next</a> 
 
<a href="#" class="acc-ext-trigger" data-dir="-1">Previous</a>