I have a set of 4 buttons, which are used to show/hide all images within the page -- which they do just fine. When an individual button is clicked, it changes the inner button text from "HIDE ALL" to "DISPLAY ALL".
However, all other buttons remain the same.
How can I have all other buttons change text as well?
So far I tried this, which works a one button at a time -- I would like to have all of them changed at once:
$('.HideDisplay').click(function() {
var $this = $(this);
$this.toggleClass('HideDisplay');
if ($this.hasClass('HideDisplay')) {
$this.text('HIDE ALL');
$(this).css('color', 'black');
$(this).css("background-color", "#f1f1f1");
$(this).hover(function() {
$(this).css("background-color", "#dedede");
}, function() {
$(this).css("background-color", "#f1f1f1");
});
} else {
$this.text('DISPLAY ALL');
$(this).css('color', 'white');
$(this).css("background-color", "#009E60");
$(this).hover(function() {
$(this).css("background-color", "#008000");
}, function() {
$(this).css("background-color", "#009E60");
});
}
});<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.1/jquery.min.js"></script>
</head>
<body>
<p><button id="button" class="HideDisplay">HIDE ALL</button></p>
<p><button id="button2" class="HideDisplay">HIDE ALL</button></p>
<p><button id="button3" class="HideDisplay">HIDE ALL </button></p>
<p><button id="button4" class="HideDisplay">HIDE ALL</button></p>
</pre>
</body>
</html>In your case, you need to use the selector "button[id*='button']" to change all of your buttons because if you use the selector by class it gonna work the first time but then when you click the second time don't because the class gonna be removed by the toggleClass function. Also, you need to change the display text with the same selector and inside the if you can set a variable with the label that you want to use, check the code below:
$('.HideDisplay').click(function() {
var $this = $(this);
var textToDisplay = '';
if (!$this.hasClass('HideDisplay')) {
textToDisplay = 'HIDE ALL';
$this.css('color', 'black');
$this.css("background-color", "#f1f1f1");
$this.hover(function() {
$this.css("background-color", "#dedede");
}, function() {
$this.css("background-color", "#f1f1f1");
});
} else {
textToDisplay = 'DISPLAY ALL';
$this.css('color', 'white');
$this.css("background-color", "#009E60");
$this.hover(function() {
$(this).css("background-color", "#008000");
}, function() {
$(this).css("background-color", "#009E60");
});
}
$("button[id*='button']").toggleClass('HideDisplay');
$("button[id*='button']").text(textToDisplay);
});<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.1/jquery.min.js"></script>
</head>
<body>
<p><button id="button" class="HideDisplay">HIDE ALL</button></p>
<p><button id="button2" class="HideDisplay">HIDE ALL</button></p>
<p><button id="button3" class="HideDisplay">HIDE ALL </button></p>
<p><button id="button4" class="HideDisplay">HIDE ALL</button></p>
</pre>
</body>
</html>Instead of using id to select the elements and make changes separately there is an alternative way of doing this with a cleaner code using querySelectorAll() allowing you to select all elements with a specific class and then make all the desired changes to all the elements using a loop.
Consider the following with plain JavaScript
$('.HideDisplay').on('click', function(){
const btns = document.querySelectorAll('.HideDisplay');
for(btn of btns){
if(btn.innerText === 'HIDE ALL'){
btn.innerText = 'DISPLAY ALL';
btn.style.backgroundColor = 'green';
btn.style.color = 'white';
}
else{
btn.innerText = 'HIDE ALL';
btn.style = null;
}
}
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p><button class="HideDisplay">HIDE ALL</button></p>
<p><button class="HideDisplay">HIDE ALL</button></p>
<p><button class="HideDisplay">HIDE ALL </button></p>
<p><button class="HideDisplay">HIDE ALL</button></p>