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 time all elements is somewhat confusing, whether for the developer or user. Because, time you can have all the elements open and the status marked is closed, and you click the button and did the opposite of what you expected
In that 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 a class to the span you want to show/hide. It is not required to set the class, but it will facilitate.
$(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>
<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>
Javascript was written using jQuery 1.3.1, as in your example.
The same example is also available on codepen.io using more current jQuery.
Update
Comments questioned the difference between jQuery 1.3.1 and 3.2.1 and the use of an entire library to use only a single function.
About the differences between library versions, can be viewed 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 version;
- jQuery 2: removed IE 6-8 support for performance gain and library size reduction;
- jQuery 3: Support Promises/A+ for Deferreds,
$.ajax and $.when. .data() HTML5 compatible.
What should be borne in mind is that jQuery has as its main purpose to normalize 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 this is not 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 ultimately left the answer/function more "lean".
In this case, your problem can also be solved with pure javascript, with a little 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 function compatibility addEventListener, the function developed has been used in this answer stack overflow.
What was created, in the final answer, was practically the same thing that was developed using jQuery. Add an event to each button with its respective callback (display/hide).
Gabriel, it worked for 1, congratulations. Can you tell me which is the most current version of Jquery, which you used in codepen? Is it lighter? Do you have in Google CDN? Thank you for your valuable time
– Geo
I’ve seen it’s 3.2.1. This is lighter and faster than the 1.3.1 I use?
– Geo
@Newer Geo does not mean faster or lighter, however, it is very likely to be more stable and have more implementations/Features.
– Gabriel Heming
Gabriel, my use is only for your function. Vi that 321 has 85Kb and 131 has +-52kb. I know there’s a lot of resources in Jq, but it’s the same thing as taking a pound of sugar in a trailer. I still haven’t found a place that explains the differences of versions to use the smallest possible. Abs.
– Geo
@Geo the response has been updated.
– Gabriel Heming
Gabriel, you’re a genius... and you urged me to study JQ. I was impressed with the resources. I’ve applied some, using your function as a basis. It’s actually much easier to operate. I’m excited to "play" with the functions. I won’t take up your precious time anymore. Thank you very much for your attention.
– Geo