Você poderia fazer um único botão que controlasse o estado de abertura/fechamento, mas, em minha humilde opinião, o controle de estado para um botão que hora abre e hora fecha todos os elementos é um tanto confuso, seja para o desenvolvedor ou usuário. Pois, hora você poderá ter todos os elementos abertos e o estado marcado está como fechado, e você clica no botão e fez o contrário do que você esperava
Nesse caso, eu sugiro a criação de dois botões com funções específicas, um para abrir todos e outro para fechar todos.
O primeiro passo, é definir o HTML. Você precisará criar ambos os botões e definir uma class
para o span
que deseja exibir/ocultar. Não é obrigatório definir a class
, mas facilitará.
$(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>
O JavaScript foi escrito utilizando a jQuery 1.3.1, conforme está no seu exemplo.
O mesmo exemplo também está disponível no codepen.io usando jQuery mais atual.
Update
Nos comentários, foi questionada a diferença entre jQuery 1.3.1 e 3.2.1 e o uso de toda uma biblioteca para utilizar apenas uma única função.
Sobre as diferenças entre as versões da biblioteca, podem ser visualizdas nos links abaixo:
What is the difference with jquery version 1, version 2 and version 3 versions release?
jQuery 3.0: The Next Generations
Resumidamente (tradução livre do primeiro link):
- jQuery 1: a primeira versão estável;
- jQuery 2: removido suporte ao IE 6-8 para ganho de performance e redução do tamanho da biblioteca;
- jQuery 3: Suporte Promises/A+ para Deferreds,
$.ajax
e $.when
. .data()
compatível com HTML5.
O que deve-se ter em mente é que jQuery possui como principal intuito normalizar as diferenças e fornecer uma compatibilidade entre browsers e entre diferentes versões do mesmo browser. Logo em seguida, é fornecer funções que facilitem o trabalho de um desenvolvedor e reduzir o código de desenvolvimento. Facilitação a qual pode ser comparada a açucar sintático (apesar de não ser este o caso).
Entretanto, concordo com o tamanho gerado pela biblioteca para algo tão simples. O exemplo apenas foi desenvolvido com jQuery, pois, no exemplo da pergunta já era utilizado. O que, no final das contas, deixava a resposta/função mais "enxuta".
Nesse caso, o seu problema também pode ser resolvido com javascript puro, com um pouco mais de código:
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>
Para melhorar a compatibilidade da função addEventListener
, foi utilizada a função desenvolvida nesta resposta do Stack Overflow.
O que foi criado, na resposta final, foi praticamente a mesma coisa que foi desenvolvido utilizando jQuery. Adicionar um evento para cada botão com o seu respectivo callback
(exibir/esconder).