Question

So what I would like to happen when the tabs are clicked on the hidden divs slide down but no matter which one is clicked it will always open on top of the previous. Right now they open in the order they’re in, in the HTML. Here is the Jquery `

$(document).ready(function ($) {

$('.menu-bio').bind('click', function (event) {
    if ($('#bio').is(':visible')) {
        $('#bio').slideUp();
        $('.menu-bio').removeClass('open');
    } else {
        if ($('#media').is(':visible')) {
            $('#media').slideDown(function () {
                $('#bio').slideDown();
                if($('.dropmenu').first().attr('id') != 'bio') $('#bio').insertBefore($('.dropmenu')[0]);           
            });
        } 
        if ($('#dates').is(':visible')) {
            $('#dates').slideDown(function () {
                $('#bio').slideDown();
                if($('.dropmenu').first().attr('id') != 'bio') $('#bio').insertBefore($('.dropmenu')[0]);           
            });
        } 
        if ($('#contacts').is(':visible')) {
            $('#contacts').slideDown(function () {
                $('#bio').slideDown();
                if($('.dropmenu').first().attr('id') != 'bio') $('#bio').insertBefore($('.dropmenu')[0]);           
            });
        } 
        else {
            $('#bio').slideDown();
        }

        $('.menu-bio').addClass('open');
    }
    return false;
});

$('.menu-media').bind('click', function (event) {
    if ($('#media').is(':visible')) {
        $('#media').slideUp();
        $('.menu-media').removeClass('open');
    } else {
        if ($('#bio').is(':visible')) {
            $('#bio').slideDown(function () {
                $('#media').slideDown();
                if($('.dropmenu').first().attr('id') != 'media') $('#media').insertBefore($('.dropmenu')[0]);
            });
        } 
        if ($('#dates').is(':visible')) {
            $('#dates').slideDown(function () {
                $('#media').slideDown();
                if($('.dropmenu').first().attr('id') != 'media') $('#media').insertBefore($('.dropmenu')[0]);           
            });
        } 
        if ($('#contacts').is(':visible')) {
            $('#contacts').slideDown(function () {
                $('#media').slideDown();
                if($('.dropmenu').first().attr('id') != 'media') $('#media').insertBefore($('.dropmenu')[0]);           
            });
        } 
        else {
            $('#media').slideDown();
        }
        $('.menu-media').addClass('open');
    }
    return false;
});

$('.menu-dates').bind('click', function (event) {
    if ($('#dates').is(':visible')) {
        $('#dates').slideUp();
        $('.menu-dates').removeClass('open');
    } else {
        if ($('#bio').is(':visible')) {
            $('#bio').slideDown(function () {
                $('#dates').slideDown();
                if($('.dropmenu').first().attr('id') != 'dates') $('#dates').insertBefore($('.dropmenu')[0]);

            });
        } 
        if ($('#media').is(':visible')) {
            $('#media').slideDown(function () {
                $('#dates').slideDown();
                if($('.dropmenu').first().attr('id') != 'dates') $('#dates').insertBefore($('.dropmenu')[0]);           
            });
        } 
        if ($('#contacts').is(':visible')) {
            $('#contacts').slideDown(function () {
                $('#dates').slideDown();
                if($('.dropmenu').first().attr('id') != 'dates') $('#dates').insertBefore($('.dropmenu')[0]);           
            });
        } 
        else {
            $('#dates').slideDown();
        }
        $('.menu-dates').addClass('open');
    }
    return false;
});

$('.menu-contacts').bind('click', function (event) {
    if ($('#contacts').is(':visible')) {
        $('#contacts').slideUp();
        $('.menu-contacts').removeClass('open');
    } else {
        if ($('#media').is(':visible')) {
            $('#media').slideDown(function () {
                $('#contacts').slideDown();
                if($('.dropmenu').first().attr('id') != 'contacts') $('#contacts').insertBefore($('.dropmenu')[0]);

            });
        } 
        if ($('#dates').is(':visible')) {
            $('#dates').slideDown(function () {
                $('#contacts').slideDown();
                if($('.dropmenu').first().attr('id') != 'contacts') $('#contacts').insertBefore($('.dropmenu')[0]);         
            });
        } 
        if ($('#bio').is(':visible')) {
            $('#bio').slideDown(function () {
                $('#contacts').slideDown();
                if($('.dropmenu').first().attr('id') != 'contacts') $('#contacts').insertBefore($('.dropmenu')[0]);         
            });
        } 
        else {
            $('#contacts').slideDown();
        }
        $('.menu-contacts').addClass('open');
    }
    return false;
});


$('.openbox').bind('click', function (event) {
    if ($(this).parent().hasClass('open')) {
        $(this).next('ul').slidedDown('fast');
        $(this).parent().removeClass('open');
    } else {
        $(this).next('ul').slideUp('fast');
        $(this).parent().addClass('open');
    }
    return false;
});
});

If anyone can help me it would be greatly appreciated, Thanks

Answer 1

This lines of code do the trick of inserting the element you define #bio, #media or #dates before the other elements. Just have to edit the line below.

$('#bio').insertBefore($('.dropmenu')[0]);
$('#media').insertBefore($('.dropmenu')[0]);
$('#dates').insertBefore($('.dropmenu')[0]);