Custom accordion slide effect jquery

Question

For those who cant wait here's my fiddle :)

So here's what I'm trying to make. I already have this custom multi-level accordion. And what I'm trying to modify about my output is the behavior of the accordion.

Instead of the logic ( When I click on the "header" the "sub-header" goes down as well as the "content" )

I want the logic to be ( When I click on the "header" the "header will slide to left and obviously be hide and the "sub-header" will replace the place of the header as well as click the "sub-header" will also let the "content" replace the position of the "sub-header" and "sub-header" also move to left and on closing it will behave vice versa. It will slide to right )

I know my explanation above is a little mess because I don't really know how to say it properly. :) But I have this images below to illustrate more what I'm trying to say.

The pink background is the main container and the only place where "header", "sub-header" and "content" will be visible. Outside the pink box is not visible to the output.

A brief view of my jQuery code because I cant post this without putting a little code :)

jQuery:

 $('body').on('click', '.title-a1', function() {
        $('.box-a5').slideUp();
        $('.in').show();
        $('.out').hide();
        var currentv1 = $(this).closest('.box-a2').find('.box-a5');
        var triggerv1 = $(this).find('.in');
        var triggerv2 = $(this).find('.out');

        if (currentv1.is(':visible')) {
            currentv1.slideUp();
            triggerv1.show();
            triggerv2.hide();
        } else {
            currentv1.slideDown();
            triggerv1.hide();
            triggerv2.show();
        }
    });

Your answers are highly appreciated. Thank you in advance :)

UPDATED:

I've got this fiddle from the answer below by vCode. This works great and it answers my question but I have this situation where I have many headers as well as sub-headers as well as content. The problem is I don't know how to do it with that kind of situation. I am to new with this kind of custom accordion.

Please check my updated fiddle.

Answer 1

For those who have same question as mine I already solve this. Check this out.

Brief view for jQuery code:

$('.wrapper-l1 h1').on('click', function () {
    var c = $(this).attr("class");
    $("#" + c).show();

    $(this).closest('div').animate({
        marginLeft: '-400px'
    });
});


$('.wrapper-l2 div h1').on('click', function() {
    var d = $(this).attr("class");
    $("#" + d).show();

    $('.wrapper-l1, .wrapper-l2').animate({
        marginLeft: '-400px'
    });
});

$('.wrapper-l2 div .rights-a1').on('click', function() {
    $('.wrapper-l1, .wrapper-l2').animate({
        marginLeft: 0
    });
    $('.wrapper-l2 div').fadeOut();
});

$('.wrapper-l3 div .rights-a2').on('click', function() {
    $('.wrapper-l2, .wrapper-l3').animate({
        marginLeft: 0
    });
    $('.wrapper-l3 div').fadeOut();
});

Answer 2

You can use jQuery's .animate() function combined with some css to accomplish this.

HTML

<div class="row">
    <div class="level level-1">Header <i class="fa fa-chevron-right"></i>

    </div>
    <div class="level level-2"> <i class="fa fa-chevron-left"></i>
Sub-Header <i class="fa fa-chevron-right"></i>

    </div>
    <div class="level level-3"> <i class="fa fa-chevron-left"></i>

        <ul>
            <li>Content</li>
            <li>Content</li>
            <li>Content</li>
            <li>Content</li>
            <li>Content</li>
        </ul>
    </div>
</div>

CSS

.row {
    white-space : nowrap;
    width: 200px;
    overflow: hidden;
}
.level {
    display: inline-block;
    height: 900px;
    width: 200px;
    vertical-align: top;
}
ul {
    padding-left: 10px;
    margin-top: 0px;
}
i {
    cursor: pointer;
}

jQuery

$('i.fa-chevron-right').on('click', function () {
    $(this).closest('div').animate({
        marginLeft: '-200px'
    });
});

$('.level-2 > i.fa-chevron-left').on('click', function () {
    $('.level-1, .level-2').animate({
        marginLeft: 0
    });
});

$('.level-3 > i.fa-chevron-left').on('click', function () {
    $('.level-2').animate({
        marginLeft: 0
    });
});

jsFiddle: http://jsfiddle.net/voveson/ca7dsedp/