0

Na função atual abaixo, abre uma ID (titulo) em cada clique.

E pode abrir várias, se clicar em cada uma.

Está ótimo e funcionando perfeito (creio)

Mas eu preciso ter um único botão separado que abra todas juntas e feche todas.

(e manter a função atual de abrir/fechar cada)

Eu pensei em usar a class="alinha", que é comum em todos os títulos mas, faz dias que pesquiso, testei vários exemplos e não consegui. Ajudem um velho aprendiz a evitar um AVC.

Agradeço a todos pela ajuda.

ps: é possível reduzir mais as funções? acho que está redundante.

<script src="/1.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){ //aqui troca a cor do titulo
$('.cor').click(function(){
$trClass = $(this).attr('class');
	if ($trClass == undefined || $trClass == 'desclicado'){
	$(this).attr('class', 'clicado');
	}else{
		$(this).attr('class', 'desclicado');
        }
	});
});
function abre(ab){ //aqui abre e fecha cada uma
if	(document.getElementById(ab).style.display=='block')
	{document.getElementById(ab).style.display='none';}
else{document.getElementById(ab).style.display='block';}
}
</script>

PHP/HTML5
$consulta=$pdo->query("select titulo,texto from...
while...
<div class="alinha" onclick="abre('texto<?=$id?>')"><span class="cor"><b><?=$titulo?></b></span>
	<span id="texto<?=$id?>" style="display:none">
	<div>TEXTO</div>
	</span>
</div>	

4 Respostas 4

2

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).

6
  • Gabriel, funcionou de 1ª, parabéns. Pode me informar qual a versão mais atual do JQuery, que vc usou no codepen? É mais leve? tem no CDN da Google? Agradeço por dispor seu tempo valioso
    – Geo
    27/10/2017 às 22:03
  • Já vi que é a 3.2.1. esta é mais leve e rápida que a 1.3.1 que uso?
    – Geo
    27/10/2017 às 22:34
  • @Geo mais nova não quer dizer mais rápida ou leve, entretanto, é bem provavel que seja mais estável e possua mais implementações/features. 30/10/2017 às 10:18
  • Gabriel, o meu uso é só para a sua função. Ví que 321 tem 85Kb e o 131 tem +-52kb. Sei que existem muitos recursos no Jq, mas é a mesma coisa de levar 1 kg de açúcar numa carreta. Ainda não achei um lugar que explique as diferenças de versões para usar a menor possível. Abs.
    – Geo
    30/10/2017 às 10:38
  • @Geo a resposta foi atualizada. 30/10/2017 às 11:36
1

Pode usar a propriedade slideToggle e slideDown do Jquery

$( "button" ).click(function() {
  if(!$(this).hasClass('todos')){
    $( this ).prev('.cor').slideToggle( "fast" );
  }else{
    $('.cor').slideDown( "fast" );
  }
});
.ctn {
  display: flex;
}
.cor {
  height: 58px;
  width: 58px;
  display: none;
}
.verde{
  background: green;
}
.amarelo{
  background: yellow;
}
.azul{
  background: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="ctn">
  <div class="items">
     <div class="verde cor">
       
     </div>
     <button>
       Ver cor
     </button>
  </div>
  <div class="items">
     <div class="azul cor">
       
     </div>
     <button>
       Ver cor
     </button>
  </div>
  <div class="items">
     <div class="amarelo cor">
       
     </div>
     <button>
       Ver cor
     </button>
  </div>
  <div class="items">
     <button class="todos">
       Ver todos
     </button>
  </div>
</div>

Caso não queira a transição passe 0 como parâmetro.

1
  • Sannyas, agradeço sua atenção, mas infelizmente não é esta função (muito bonita). Veja no meu modelo que cor é referente ao título, que muda conforme abre ou fecha individualmente. não tem botões nos titulos, tem onclick. Eu só preciso de um botão separado no topo ou rodape que abra e fecha tudo. Tentei adaptar sua sugestão mas não deu. Ainda preciso aprender muito. Agradeço a sua ajuda. Abs
    – Geo
    27/10/2017 às 22:12
1

Você pode colocar uma classe nas tags <span/>

<div class="alinha" onclick="abre('texto<?=$id?>')"><span class="cor"><b><?=$titulo?></b></span>
    <span id="texto<?=$id?>" class="alinha-texto" style="display:none">
        <div>TEXTO</div>
    </span>
</div>

Com essa classe você pode trocar a propriedade display de todos os elementos alinha-texto usando a seguinte função

function abreOuFechaTextos() {
    var textos = document.getElementsByClassName('alinha-texto');
    Array.prototype.forEach.call(textos, (el) => el.style.display = (el.style.display === 'none') ? 'block' : 'none');
}

Segue um exemplo:

    function abreOuFechaTextos() {
        var textos = document.getElementsByClassName('alinha-texto');
        Array.prototype.forEach.call(textos, (el) => el.style.display = (el.style.display === 'none') ? 'block' : 'none');
    }
<button onclick="abreOuFechaTextos()">Botão</button>

<div class="alinha" onclick="abre(texto-1)"><span class="cor"><b><?=$titulo?></b></span>
    <span id="texto-1" class="alinha-texto" style="display:none">
        <div>TEXTO</div>
    </span>
</div>


<div class="alinha" onclick="abre(texto-2)"><span class="cor"><b><?=$titulo?></b></span>
    <span id="texto-2" class="alinha-texto" style="display:none">
        <div>TEXTO 2</div>
    </span>
</div>


<div class="alinha" onclick="abre(texto-3)"><span class="cor"><b><?=$titulo?></b></span>
    <span id="texto-3" class="alinha-texto" style="display:none">
        <div>TEXTO 3</div>
    </span>
</div>


<div class="alinha" onclick="abre(texto-4)"><span class="cor"><b><?=$titulo?></b></span>
    <span id="texto-4" class="alinha-texto" style="display:none">
        <div>TEXTO 4</div>
    </span>
</div>

<div class="alinha" onclick="abre(texto-5)"><span class="cor"><b><?=$titulo?></b></span>
    <span id="texto-5" class="alinha-texto" style="display:none">
        <div>TEXTO 5</div>
    </span>
</div>

4
  • Agradeço a todos pelas rápidas respostas. Vou testar e logo retorno. Obrigado pela ajuda. Abs
    – Geo
    27/10/2017 às 19:36
  • André Luiz, comecei pela sua sugestão e funcionou de 1ª. Parabéns. Agora vou nas outras. Prevejo que será difícil escolher.
    – Geo
    27/10/2017 às 20:07
  • @Geo é melhor você fazer o comentário na resposta dele, assim chega uma notificação pra ele. 27/10/2017 às 21:58
  • Valeu a dica, ainda sou "novo" aqui, mas aprendo rápido. Abs
    – Geo
    27/10/2017 às 22:04
0

André e Gabriel: As suas orientações foram ótimas e funcionais e me ajudou muito. Agradeço pela ajuda e me considero satisfeito.

Gabriel, a sua atenção e paciência são louváveis. Estou estudando o JQuery e descobri inúmeros recursos que ajudam muito.

E graças ao stackoverflow podemos ampliar nossos conhecimentos

Obrigado a todos.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .