Unable to make the next and previous button work on jqueryui accordion

Question

I was able to wrap the accordion content in div and was also able to push the active tab on the top. But I want external previous, next and close accordion button. I have tried serveral options but nothing is work. Can anyone tell me how to go about it.

This is my FIDDLE

 <div id="accordion">
<div class="wrap">
     <h3><a href="#">Header 1</a></h3>

    <div>Collapsible content 1</div>
</div>
<!-- end wrap -->
<div class="wrap">
     <h3><a href="#">Header 2</a></h3>

    <div>Collapsible content 2</div>
</div>
<!-- end wrap -->
<div class="wrap">
     <h3><a href="#">Header 3</a></h3>

    <div>Collapsible content 3</div>
</div>
<!-- end wrap -->
<button class='previous'>Previous</button>
<button class='next'>Next</button>

 $(window).load(function () {
$(function () {
    $("#accordion").accordion({
        header: '> div.wrap >h3'
    });
});
});

 $(".wrap").click(function () {
//$(this).prependTo("#ImportantNumbers");
$(this).hide().prependTo("#accordion").slideDown();
 });

Answer 1

http://jsfiddle.net/wq3pu8t9/1/

$('.next').click(function () {

    var $a = $("#accordion");
    //Which panel is currently  active
    var $cur = $('.ui-state-active').parents('.wrap');
    //get number of panels
    var len = $('.wrap').size();

    //get index of active panel
    var ind = $a.accordion("option", "active")
    //index increases by one,         
    ind++;
    //the index of the panel that will become active
    //if the index is greater than the maximum index
    //index is set to zero, panel
    if (ind > len - 1) ind = 0;

    //currently active panel placed on the bottom
    $cur.appendTo("#accordion");
    //next panel becomes active
    $a.accordion("option", "active", ind);

})

$('.previous').click(function () {

    var $a = $("#accordion");
    var $cur = $('.ui-state-active').parents('.wrap');
    var len = $('.wrap').size();

    var ind = $a.accordion("option", "active")
    ind--;
    if (ind < 0) ind = len - 1;

    $('.wrap').last().prependTo("#accordion");

    $a.accordion("option", "active", ind);

})

Answer 2

Here you go : http://jsfiddle.net/aravi_vel/du7ocqom/1/

Use the "option:active" method to determine the current active panel. Use the same to set the new active panel.

$accordion.accordion("option","active");
$accordion.accordion("option","active",next);

Used help from this answer: https://stackoverflow.com/a/11041496/976777