Efeito Sanfona para mostrar e esconder textos/imagens

Código CSS/HTML
1

Como eu faço para conseguir obter este mesmo “efeito sanfona”, que existe na apresentação das parcelas de uma forma de pagamento (ver imagem a seguir), para esconder/mostrar outros textos ou imagens na descrição do produto?
efeito sanfona

Resumindo: Eu gostaria de poder clicar em uma palavra como SAIBA MAIS (na descrição do produto) e, automaticamente, a linha onde está esse texto se expandir/contrair.
Imagino que, se esta função já existe neste Tema, não deve ser difícil de aplicá-la em outras partes da página.

OBS: Estou utilizando o Tema Google #3 - Mosaico.

1 curtida
2

A função já existe no tema porém está no código fonte do tema e não temos acesso a isso, o ideal seria criar novamente e pra isso precisa conhecimentos em HTML/CSS e Java Script

1 curtida
3

Eu criei a seguinte função no javascript:

function toggleElement(id) {
      var element = document.getElementById(id);
      if (element.style.display === "none") {
        element.style.display = "table";
      } else {
        element.style.display = "none";
      }
    }

Esta função controla a expansão/retração das informações do conteúdo da seguinte tabela.

<table>
    <tr onclick="toggleElement('content1')">
      <td>Linha 1</td>
    </tr>
    <tr id="content1" class="hidden">
      <td colspan="2">
        <table>
          <tr>
            <td>Conteúdo Expansível 1, Coluna 1</td>
            <td>Conteúdo Expansível 1, Coluna 2</td>
          </tr>
          <tr>
            <td>Conteúdo Expansível 1, Coluna 1</td>
            <td>Conteúdo Expansível 1, Coluna 2</td>
          </tr>
          <tr>
            <td>Conteúdo Expansível 1, Coluna 1</td>
            <td>Conteúdo Expansível 1, Coluna 2</td>
          </tr>
        </table>
      </td>
    </tr>
  </table>

Porém, isto está ocorrendo de forma “seca”, ou seja, sem uma animação mostrando a expansão/retração da tabela.
Sabe de alguma linha de código que eu poderia acrescentar para que essa animação ocorresse?

1 curtida
4

Nesse caso tu teria que usar a função toogle de .addClass e .remove.Class, por que ai só ta mudando o css do elemento, não tem exclusão do elemento ou adição de classe com animação

5

tente usar o efeito com jquery

https://api.jquery.com/toggle/

image

1 curtida
6

Obrigado pela sugestão, Leonardo.

Eu estou tentando importar a biblioteca jquery para o site da Loja Integrada, para tentar utilizar este efeito que vc mencionou, pois é exatamente isto o que eu preciso. Porém, quando eu coloco o script a seguir no cabeçalho (head) da página (na área de inclusão de código html disponibilizado pela Loja Integrada) o site fica “fora do ar” e aparece apenas uma tela em branco.

<script src="https://code.jquery.com/jquery-3.7.0.js"></script>

Qual a forma correta de se inserir ou se referenciar uma biblioteca jquery na Loja Integrada?

1 curtida
8

Deu certo, @Leonardo_Vicentini_F

Utilizei o seguinte código:

<script>
    $(document).ready(function() {
      $("#line1").on("click", function() {
        $(".line:not(#line1)").toggle("slow");
      });
    });
  </script>
<style type="text/css">.line {
      display: none;
    }
</style>
<p id="line1" style="cursor: pointer;">Clique aqui para expandir/contrair a Linha 1</p>
<p class="line">Linha 2</p>
<p class="line">Linha 3</p>
<p class="line">Linha 4</p>```
9

A loja integrada já usa o jquery, seria usar somente o comando.

2 curtidas