JSFiddle - React, Tailwind, and code Playground

HTML

<div class="manualOrderBox">
        manualbox hello
</div>
	<div class="catalogusOrderBox">
       catalogus box hello
</div>

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;
					});
					
				});