<p><br></p>
I'm aware that some of you are novices in the field of web building and that you could all use some help. This tutorial will help you accomplish tasks that your HTML and CSS cannot. You should now be aware that while CSS contributes to HTML's aesthetic appeal, HMTL aids in its structural development. However, CSS behaviour is restricted.

JavaScript enables you to customise the behaviour of your HTML. To change our CSS, we will use the JavaScript library jQuery. For example, we will make a div disappear and then reappear when we press the same button.

Achieving this requires:

HTML file with a jQuery CDN or HTML with a jQuery linked file
Add Bootstrap or Tailwind - this is optional
<pre class="prettyprint lang-html prettyprinted">
     
	<title>jQuery show/hide div with button</title>
	<meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
	<script src="https://code.jquery.com/jquery-3.5.1.min.js" crossorigin="anonymous"></script>
      
	
	

		<div class="container-fluid text-center" style="margin: auto; padding: 100px 0 100px 0; ">
			<h1 class="text-capitalize">jQuery show/hide div with button</h1>
			<lt-highlighter contenteditable="false" data-lt-linked="1" style="display: none;"><lt-div spellcheck="false" class="lt-highlighter__wrapper" style="width: 94.375px !important; height: 36px !important; transform: none !important; transform-origin: 48.1875px 19px !important; zoom: 1 !important; margin-top: 1px !important; margin-left: 408.672px !important;"><lt-div class="lt-highlighter__scroll-element" style="top: 0px !important; left: 0px !important; width: 94px !important; height: 36px !important;"><canvas class="lt-highlighter__canvas" width="28" height="20" style="display: none; top: 8px !important; left: 55px !important;"></canvas></lt-div></lt-div></lt-highlighter><button class="btn btn-success my-btn" data-lt-tmp-id="lt-150907" spellcheck="false" data-gramm="false">Show Div</button>
		</div>
		<div class="show-hide-div bg-dark text-white text-center" style="padding: 200px 0px; display: none;">
			<h1>Showing the DIV</h1>
		</div>

<script>
			$(document).ready(function () {
				
				
				$('.my-btn').click(function () {

				var button = $(this);
				const showHideDiv =	$('.show-hide-div').css("display");

					// hide div and change the text of the button
				if(showHideDiv === 'block'){
					$('.show-hide-div').css("display", "none");
					button.html("");
					button.html("Show Div");
				}

				// Show div and change the text of the button
				else{
					$('.show-hide-div').css("display", "block");
					button.html("");
					button.html("Hide Div");
				}
				});
			});
</script></pre>