Hide and show content using jquery

Question

I have 2 divs with a button above it. At the beginning you see only 1 div, and that will be divcatalogusOrderBox. If I press the button: manualButton (which will be shown above the div), then it should display the divOurderBox and hide the divus catalogusOrderBox. But then it is also necessary to change the button text (from the "Manual button" to the "Catalogus" button) so that the user opens the divus catalogusOrderBox again, so if you then click on this button, he must again display the usOrdersBox directory and hide the manual control. >

At the moment I have this and it does not 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

Try it:

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

Answer 2

Please check 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 text button change demo