Looking to modify the behavior of a button where, when clicked, it hides a specific div element, changes its text display, and toggles between classes using addClass/removeClass for subsequent click events.
Unfortunately, the intended functionality is not working as expected, and I'm unsure why.
Here's a snippet of the code:
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Magic Disappearance</title>
<link rel='stylesheet' type='text/css' href='stylesheet.css'/>
<script type='text/javascript' src='script.js'></script>
</head>
<body>
<div class="vanish1"></div>
<div class="vanish2"></div>
<div class="vanish3"></div>
<div class="vanish4"></div>
<br/>
<br />
<button class='first' value='button'>Make it disappear!</button>
</body>
</html>
CSS:
.vanish1 {
height: 100px;
width: 100px;
display: inline-block;
background-color: #F38630;
border-radius: 5px;
}
.hide1 {
color: red;
}
Javascript (jQuery):
$(document).ready(function() {
$('.first').click(function() {
$('.vanish1').fadeOut('slow');
$(this).text('Bring it back!');
$(this).addClass("hide1");
$(this).removeClass("first");
});
$('.hide1').click(function() {
$('.vanish1').fadeIn('slow');
$(this).text('Make it disappear!');
$(this).removeClass("hide1");
$(this).addClass("first");
});
});
Upon clicking the button, the designated div disappears successfully with the class change reflected in the CSS and browser dev tools. However, the reversal process on subsequent clicks does not occur as expected.
Any assistance on this issue would be greatly appreciated!