Harici düğmeler/kontroller kullanarak bir akordeon içeriğinden nasıl geçebilirim?

Question

Burada akordeon içeriğini göstermek ve gizlemek için slideToggle kullanan https://jsfiddle.net/fLLbkxcf/ - basit bir akordeon var.

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

Ancak ben akordeon farklı durumlarının dolaşmak için mümkün istiyorum akordeon (sonraki, önceki) aşağıda bazı düğmeler bulunur.

Bunu nasıl başaracağımı gösteren herhangi bir ipucu var mı, yoksa doğru yönde mi işaret edebilir?

Answer 1

Sen erişim sekme anahtarlarını isterim önceki/sonraki elemanını

$(".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>