You could make a single button that controls the open / close state, but in my humble opinion, the state control for a button that opens and closes all elements is somewhat confusing, or for the developer or user. Well, time you can have all the elements open and the marked state is closed, and you click the button and did the opposite of what you expected.
In this case, I suggest creating two buttons with specific functions, one to open all and the other to close all.
The first step is to define HTML. You will need to create both buttons and set class to span you want to show / hide. It is not mandatory to set class , but it will make it easier.
$(document).ready(function(){
$('#exibir-todos').click(function(){
$('.alinha .texto').show();
});
$('#esconder-todos').click(function(){
$('.alinha .texto').hide();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js"></script><buttontype="button" id="exibir-todos" >exibir todos</button>
<button type="button" id="esconder-todos" >esconder todos</button>
<div class="alinha">
<span class="cor">cor</span>
<span class="texto">texto</span>
</div>
<div class="alinha">
<span class="cor">cor</span>
<span class="texto">texto</span>
</div>
<div class="alinha">
<span class="cor">cor</span>
<span class="texto">texto</span>
</div>
<div class="alinha">
<span class="cor">cor</span>
<span class="texto">texto</span>
</div>
JavaScript was written using jQuery 1.3.1, as in its example.
The same example is also available in codepen.io using the most current jQuery.
Update
In the comments, the difference between jQuery 1.3.1 and 3.2.1 and the use of a whole library to use only a single function was questioned.
About the differences between the versions of the library, can be seen in the links below:
What is the difference with jquery version 1, version 2 and version 3 versions release?
jQuery 3.0: The Next Generations
Briefly (free translation of the first link):
- jQuery 1: the first stable release;
- jQuery 2: Removed IE 6-8 support for performance gain and library size reduction;
- jQuery 3: Support Promises / A + for Deferreds,
$.ajax and $.when . % compliant with HTML5.
What should be kept in mind is that jQuery has as its main purpose to normalize the differences and provide compatibility between browsers and between different versions of the same browser. Next, it is to provide functions that facilitate the work of a developer and reduce the development code. Facilitation which can be compared to syntactic sugar (although it is not this is the case).
However, I agree with the size generated by the library for something so simple. The example was only developed with jQuery, because in the question example it was already used. Which, in the end, left the response / function "leaner."
In this case, your problem can also be solved with pure javascript, with a bit more code:
function addListener(elem, type, fn) {
if (elem.addEventListener) {
elem.addEventListener(type, fn, false);
} else if (elem.attachEvent) {
elem.attachEvent("on" + type, function() {
return fn.call(elem, window.event);
});
} else {
elem["on" + type] = fn;
}
}
var exibirTodos = document.getElementById('exibir-todos');
var callbackExibirTodos = function() {
var elements = document.getElementsByClassName('texto');
for(var i = 0; i < elements.length ; i++)
{
elements[i].style.display='inline';
}
};
addListener(exibirTodos , 'click' , callbackExibirTodos);
var esconderTodos = document.getElementById('esconder-todos');
var callbackEsconderTodos = function() {
var elements = document.getElementsByClassName('texto');
for(var i = 0; i < elements.length ; i++)
{
elements[i].style.display='none';
}
};
addListener(esconderTodos , 'click' , callbackEsconderTodos);
<button type="button" id="exibir-todos" >exibir todos</button>
<button type="button" id="esconder-todos" >esconder todos</button>
<div class="alinha">
<span class="cor">cor</span>
<span class="texto">texto</span>
</div>
<div class="alinha">
<span class="cor">cor</span>
<span class="texto">texto</span>
</div>
<div class="alinha">
<span class="cor">cor</span>
<span class="texto">texto</span>
</div>
<div class="alinha">
<span class="cor">cor</span>
<span class="texto">texto</span>
</div>
To improve the compatibility of the .data() function, the Stack Overflow developed function was used
What was created, in the final response, was pretty much the same thing that was developed using jQuery. Add an event to each button with its addEventListener (display / hide).
