hide and show contents with jquery

Question

I have 2 divs with a button above it. In the beginning you only see 1 div and this will be thecatalogusOrderBox div. If i click the button: manualButton(which will be shown above the div) then it must show the manualOrderBox div and hide the catalogusOrderBox div. But it then also need to change the button text(from manual button to catalogus button) so the user can open the catalogusOrderBox div again, so if you then click on that button it must show the catalogusOrdersBox again and hide the manualOrderBox.

For now i have this and it doesn't work:

<script type="text/javascript">
$(document).ready(function(){   
    $('.manualOrderBox').hide().before('<a href="#" id="toggle-manualOrderBox" class="manualButton">manual order box</a>');
    $('a#toggle-manualOrderBox').click(function() {

        $('.manualOrderBox').slideToggle(1000);

        if($('.manualOrderBox').is(":visible")){
            $('.catalogusOrderBox').hide();
            $('.manualOrderBox').visible = false;
        }else{
        $('.manualOrderBox').visible = true;
        $('a#toggle-manualOrderBox').text('catalogus orderBox');
        $('.catalogusOrderBox').show();
        }
        return false;
    });

});
</script>

<div class="manualOrderBox">

see also https://jsfiddle.net/Lbot8a8b/ live in action

Answer 1

Please check this Updated Demo

HTML Code :

<button class="changeDiv" id="catalogusOrderBox" value="manualOrderBox">Change Div</button> 
<div class="manualOrderBox">
        manualbox hello
</div>
    <div class="catalogusOrderBox" style="display:none">
       catalogus box hello
</div>

JQuery Code :

    $(".changeDiv").click(function()
    {   
        $(".manualOrderBox").hide();
        $(".catalogusOrderBox").hide();
        id = this.id;
        val = $(".changeDiv").val();
        $("."+id).show();
        $(".changeDiv").val(id);
        $(".changeDiv").attr("id", val);
    });

with change button text Demo

Answer 2

Try this:

$(document).ready(function () {
    var newAnchor = $('<a href="#" id="toggle-manualOrderBox" class="manualButton">manual order box</a>');
    var manualBox = $('.manualOrderBox');
    var catalogusBox = $('.catalogusOrderBox');
    manualBox.slideUp({ duration: 0 }).slideDown({ duration: 0 }).before(newAnchor);
    catalogusBox.slideUp({ duration: 0 });
    newAnchor.text('catalogus order box');
    newAnchor.click(function () {
        newAnchor.text(manualBox.is(':visible') ? 'manual order box' : 'catalogus order box');
        catalogusBox.stop(true).slideToggle(400);
        manualBox.stop(true).slideToggle(400);
        return false;
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="manualOrderBox">manualbox hello</div>
<div class="catalogusOrderBox">catalogus box hello</div>