Wie kann ich mit externen Tasten/Bedienelementen durch Akkordeonsinhalte navigieren?

Question

Also habe ich hier ein einfaches Akkordeon - https://jsfiddle.net/fLLbkxcf/ - welches mit slideToggle einen Akkordeoninhalt anzeigt und versteckt.

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

Allerdings habe ich einige Tasten unter dem Akkordeon (nächste, vorherig), die ich durch die verschiedenen Zustände des Akkordeons in der Lage sein wollen.

Hat jemand Hinweise darauf, wie ich das angehen soll oder kann er mir in die richtige Richtung zeigen?

Answer 1

Sie können einen Click-Handler haben, in dem Sie das aktuelle Element finden und dann, ob basierend auf navigate prev/next Element

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