<head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
p {
padding: 10px;
border: 1px solid black;
width: 50%;
margin: 10px 0;
}
button {
padding: 8px 15px;
margin: 5px;
cursor: pointer;
}
</style>
</head>
<body>
<button id="hideBtn">Hide Paragraphs</button>
<button id="showBtn">Show Paragraphs</button>
<p>This is the first paragraph.</p>
<p>This is the second paragraph.</p>
<script>
$(document).ready(function() {
$("#hideBtn").click(function() {
$("p").hide("slow");
});
$("#showBtn").click(function() {
$("p").show("fast");
});
});
</script>
</body>
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.