Como mostrar ou ocultar uma seção ao clicar no elementor

Principais conclusões

• Elementor não possui controle dedicado para mostrar ou ocultar uma seção ao clicar, portanto os três métodos de trabalho são o widget Accordion, um widget de alternância de conteúdo e um botão com um script curto.
• O widget Elementor Accordion esconde quaisquer widgets dentro de um item até que seu título seja clicado, e o estado padrão definido como Todos em colapso mantém o item fechado no carregamento da página.
• O widget Master Addons Toggle Content funciona como um interruptor de mostrar e ocultar quando uma de suas duas opções é deixada vazia e a outra mantém a seção.
• Um botão pode mostrar ou ocultar qualquer contêiner Elementor com cerca de dez linhas de JavaScript em um widget HTML, usando uma classe CSS no botão e outra no contêiner.
• As Condições de Exibição do Elementor e as configurações de ocultação Responsiva não reagem aos cliques, porque decidem o que é mostrado por regra ou por dispositivo antes que o visitante faça qualquer coisa.

Para mostrar ou ocultar uma seção no clique em Elementor, coloque a seção dentro de algo que abre quando clicado O widget Accordion faz isso sem plugin extra Uma alternância de conteúdo dá a você um interruptor Mostrar e Ocultar Um botão com algumas linhas de script pode revelar qualquer contêiner na página Elementor não tem um único “show na configuração click”, então um desses três é a rota.

Cada método abaixo foi construído e testado no Elementor 4.3. escolha como o gatilho deve ser: uma barra de título, um interruptor ou um botão.

Qual método se encaixa na sua página

Todos os três métodos escondem uma seção até um clique Eles diferem no que o visitante clica e quanta configuração eles precisam.

Método 1: O widget Accordion

O widget Accordion é a maneira mais rápida de mostrar uma seção no clique, porque cada item é um contêiner que aceita qualquer widget O que você colocar dentro fica escondido até que o título seja clicado.

1. Edite a página com Elementor e arraste o Acordeão widget para onde a seção oculta deve estar.
2. Exclua os itens que você não precisa Para uma seção oculta, mantenha um item.
3. Digite o título em que os visitantes clicarão, como Mostrar detalhes de entrega.
4. Clique dentro do item e adicione seu conteúdo: texto, imagens, um formulário ou um layout de contêiner inteiro.
5. Aberto Interações e definir Estado padrão para Todos desabaram.

O limite deste método é o look O gatilho é sempre uma barra de título diretamente acima do conteúdo Se você precisar de um botão estilizado, ou um gatilho em outro lugar da página, use o Método 3. para mais estilos de título, o Widget Acordeão Avançado é uma opção.

Método 2: Um conteúdo alternar com uma opção vazia

Um alternador de conteúdo normalmente alterna entre dois blocos Deixe um bloco vazio e ele se torna um interruptor de mostrar e ocultar: um rótulo não mostra nada, o outro mostra sua seção.

Essas etapas usam Alternar conteúdo do Master Addons Pro. Testamos a opção vazia no Elementor 4.3 e ela não deixa lacunas ou espaço reservado.

1. Arrastar Alternar conteúdo na página.
2. No Elementos listar, rotular o primeiro item Ocultar detalhes e excluir o texto da amostra para que seu conteúdo fique vazio.
3. Rotule o segundo item Mostrar detalhes Escreva o conteúdo no editor, ou conjunto Tipo para modelo e escolha um modelo salvo para um layout completo.
4. Aberto Alternar configurações e partir Índice Ativo em 1, então a página carrega com a seção oculta.
5. Definir Posição to Antes se o interruptor deve sentar-se acima da seção, ou Depois de colocá-lo abaixo.

A mudança torna o estado óbvio, o que se adapta a detalhes opcionais, como informações nutricionais, especificações técnicas ou termos. Para invertê-lo, com a seção visível primeiro, defina Índice Ativo como 2.

Alternando entre duas seções? O Alternar página do widget Conteúdo possui switches de faturamento, tabelas de especificações e mais oito demonstrações ao vivo.

Método 3: Um botão e um script curto

Use um script quando o gatilho deve ser um botão normal, ou quando o botão e a seção estão em lugares diferentes Você adiciona uma classe CSS ao botão, uma à seção e cola um pequeno trecho em um widget HTML.

1. Adicionar a Botão widget. Em Avançado > Classes CSS, digite show-hide-button. Deixe o campo de ligação do botão vazio.
2. Selecione o contêiner que deseja ocultar. Em Avançado > Classes CSS, digite show-hide-target.
3. Arrastar um html widget em qualquer lugar da página e colar o código abaixo.
4. Atualize a página e teste-a no front-end.

<style>
.show-hide-target { display: none; }
.show-hide-target.is-open { display: flex; }
.elementor-editor-active .show-hide-target { display: flex; }
</style>

<script>
document.addEventListener("DOMContentLoaded", function () {
  document.querySelectorAll(".show-hide-button a, .show-hide-button button").forEach(function (button) {
    button.addEventListener("click", function (event) {
      event.preventDefault();
      document.querySelectorAll(".show-hide-target").forEach(function (target) {
        target.classList.toggle("is-open");
      });
    });
  });
});
</script>

A regra do primeiro estilo esconde o recipiente A segunda mostra-o uma vez que o script adiciona o is-open classe.o terceiro mantém o recipiente visível dentro do editor do Elementor, para que ainda possa editá-lo Cada clique no botão adiciona ou remove a classe.

Três notas sobre este método Cada contêiner com a classe abre junto, então use nomes de classes diferentes se precisar de pares separados em uma página O texto do botão não muda por si só E se um plugin de cache ou otimização de script atrasar o JavaScript, o primeiro clique pode ser ignorado até que o script carregue.

Se a secção deve abrir sobre a página, use um popup Ver como adicionar um pop-up no Elementor.

O que não funciona: Condições de exibição e configurações responsivas

Dois recursos do Elementor soam como se devessem fazer isso e não. Ambos ocultam conteúdo, mas nenhum deles reage a um clique.

• Configurações responsivas. Advanced > Responsive has Hide On Desktop, Hide On Tablet and Hide On Mobile Eles escondem um elemento pelo tamanho da tela, o tempo todo.
• Condições Exibição. Condições de exibição do Elementor mostrar ou ocultar um elemento por regra, como status de login, função de usuário, data ou navegador A decisão é tomada quando a página é carregada.

Eles são as ferramentas certas quando o site deve decidir o que um visitante vê Nós cobrimos eles em Condições de exibição do elementor, e o Exibição Extensão das condições a página lista todas as regras que suporta Quando o visitante deve decidir, use um dos três métodos de clique acima.

Perguntas frequentes

Pensamentos finais

Existem três maneiras confiáveis de mostrar ou ocultar uma seção ao clicar no Elementor. Use o widget Accordion quando uma barra de título estiver bem, um conteúdo alterne com uma opção vazia quando desejar um switch visível e um botão com um script curto quando o gatilho tiver que ficar em outro lugar.

Se você acabar alternando entre duas seções com mais frequência do que escondendo uma, o Alternar widget Conteúdo foi construído para isso.

Leitura relacionada

• Condições de exibição do elementor: mostrar e ocultar conteúdo por regra
• Como adicionar um pop-up no Elementor
• Efeitos de rolagem de elementador
• Como criar um botão de alternância no Elementor (3 maneiras)
• Elementor alternar vs acordeão vs guias vs switcher de conteúdo