Javascript Como colocar elemento para abrir e fechar

David Martinho · 20 de abril de 2022

Bom Dia.

Eu tenho uma aba de FAQ onde tem aquelas caixas que abrem para extender o texto, mas eu só consegui fazer para abrir, mas eu gostaria que desse para ao clicar no botão abrisse, mas se clicar de novo feche a caixa outra vez.

Neste momento a caixa só fecha se eu abrir outra.

const faqTag = document.querySelectorAll('.faq');

// Hide other elements and change icon.
const hideTag = () =>{
    faqTag.forEach(item =>{
        item.classList.remove('open')
        item.children[1].innerHTML = '&#43;'
    })
}

// Toggle targeted element to show with froEach Loop.
faqTag.forEach(item =>{  
    item.addEventListener('click', e =>{
        if (e.target.className == 'btn') {
            hideTag()
            e.target.parentElement.classList.toggle('open');
            e.target.innerHTML = '&#8722;';
        }
    }) 
})

Código HTML

<div class="faq"><!-- FAQ 1 -->
            <div class="faq_text">
                <h2>De que forma posso inserir os registos das máquinas?</h2>
                <p>Existem 2 formas de inserir dados no website,<b class="black"> manualmente</b>, indo na aba <b><a href="form_insere_registos.php" class="href">Inserir Registos</a></b>, ou através da <b><a href="index.html" class="href">Consulta Avançada</a></b>, ambas localizadas na página inicial.</p>
                <p>De seguida, deve escolher a linha, para visualizar as máquinas correspondentes e após selecionada, aparecerão os <b class="black">números de SAP</b> de acordo com a máquina escolhida.</p>
                <p>Ao inserir registos pela consulta avançada <b class="black">não será necessário executar o passo acima mencionado</b>, pois a máquina já estará escolhida pelo utilizador.</p>
                <p>*Deve selecionar primeiro a linha ao inserir um registo, pois para escolher outros campos como <b class="black">nº de SAP</b> e a<b class="black"> Máquina</b>, será necessário saber qual linha foi escolhida</p>
            </div>
            <span class="btn">&#43;</span>
        </div><!-- FAQ 1 End -->

        <div class="faq"><!-- FAQ 2 -->
            <div class="faq_text">
                <h2>Como posso consultar os registos de alteração?</h2>
                <p>Pode usar a <b><a href="consulta_manual.php" class="href">Consulta Manual</a></b> ou a <b><a href="index.html" class="href">Consulta Avançada</a></b>, ambas localizadas na página inicial.</p>
                <p>No caso da <b><a href="consulta_manual.php" class="href">Consulta Manual</a></b>, aparecerá uma tabela com todos os registos de alteração da fábrica, com um sistema de procura por <b class="black">Máquina</b>, <b class="black">nº de SAP</b>, <b class="black">Linha</b>, <b class="black">Data</b>, <b class="black">Tipo</b>, <b class="black">Descrição</b> e <b class="black">Responsável</b>.</p>
                <p>Também contará com a opção de eliminar e editar registos.</p>
                <p>Se utilizar a <b><a href="index.html" class="href">Consulta Avançada</a></b>, aparecerá uma tabela com todos os registos da máquina escolhida, bem como as funcionalidades acima mencionadas.</p>
            </div>
            <span class="btn">&#43;</span>
        </div><!-- FAQ 2 End -->

Luiz Paulo Escobar · 22 de abril de 2022

@David Martinho Cara.

É só fazer o JS ouvir algo e se houver uma classe 'abre', se não 'feche'

Citação

https://jsfiddle.net/anonymousLPH/n9dy2xfe/2/

Diego72Marinho · 23 de abril de 2022

Fala amigão . Boa noite!

Vou te passar duas formas diferentes pra você fazer isso .

Se tu for fazer com javascript, você não precisa de um loop, e você pode fazer isso com uma função com switch.

Você precisará também inserir mais uma "div" pra cada "span" e "faq_text" que você anexar ao seu HTML.

O HTML ficaria assim:

<body>
    <div class="faq"><!-- FAQ 1 -->
        
        <div>
            <h2>De que forma posso inserir os registos das máquinas?</h2>

            <div class="faq_text">
                    <p>Existem 2 formas de inserir dados no website,<b class="black"> manualmente</b>, indo na aba <b><a href="form_insere_registos.php" class="href">Inserir Registos</a></b>, ou através da <b><a href="index.html" class="href">Consulta Avançada</a></b>, ambas localizadas na página inicial.</p>
                    <p>De seguida, deve escolher a linha, para visualizar as máquinas correspondentes e após selecionada, aparecerão os <b class="black">números de SAP</b> de acordo com a máquina escolhida.</p>
                    <p>Ao inserir registos pela consulta avançada <b class="black">não será necessário executar o passo acima mencionado</b>, pois a máquina já estará escolhida pelo utilizador.</p>
                    <p>*Deve selecionar primeiro a linha ao inserir um registo, pois para escolher outros campos como <b class="black">nº de SAP</b> e a<b class="black"> Máquina</b>, será necessário saber qual linha foi escolhida</p>
            </div>
        
           <span class="btn" onclick="clickFaq(this)">&#43;</span>

        </div>
 

        <div>
            <h2>Como posso consultar os registos de alteração?</h2>

                <div class="faq_text">                  
                    <p>Pode usar a <b><a href="consulta_manual.php" class="href">Consulta Manual</a></b> ou a <b><a href="index.html" class="href">Consulta Avançada</a></b>, ambas localizadas na página inicial.</p>
                    <p>No caso da <b><a href="consulta_manual.php" class="href">Consulta Manual</a></b>, aparecerá uma tabela com todos os registos de alteração da fábrica, com um sistema de procura por <b class="black">Máquina</b>, <b class="black">nº de SAP</b>, <b class="black">Linha</b>, <b class="black">Data</b>, <b class="black">Tipo</b>, <b class="black">Descrição</b> e <b class="black">Responsável</b>.</p>
                    <p>Também contará com a opção de eliminar e editar registos.</p>
                    <p>Se utilizar a <b><a href="index.html" class="href">Consulta Avançada</a></b>, aparecerá uma tabela com todos os registos da máquina escolhida, bem como as funcionalidades acima mencionadas.</p>                   
                </div>

                <span class="btn" onclick="clickFaq(this)" >&#43;</span>

        </div>


    </div><!-- FAQ 2 End -->
  
  
  </body>

Note que nas spans que funcionam como buttons, irá a função "clickFaq(this)" em um onclick.

E o script ficaria assim :

<script>
    const faqTag = document.querySelectorAll('.faq');

    function clickFaq(e , element ){

      switch(e.parentElement.children[1].classList.value){

      case  "faq_text" : 
      e.parentElement.children[1].setAttribute('class','boxClosed')
      e.innerHTML = `&#8722`
      break;

      case  "boxClosed" : 
      e.parentElement.children[1].setAttribute('class','faq_text')
      e.innerHTML =  `&#43`

      break;
       
      }

    }

</script>

Note que dentro da função clickFaq(this) há referência a uma classe chamada "boxClosed". Então, dentro do seu CSS, insira uma classe com o mesmo nome da seguinte forma :

O "display: none" que fará fechar a div.


.boxClosed{
display: none
}

Agora , acho que valeria a pena você considerar fazer sua FAQ, usando somente HTML e CSS, com as tags : <details> <summary> . Ficaria assim seu HTML :

<body> 
<details>

        <summary>De que forma posso inserir os registos das máquinas?</summary>

            <p>Existem 2 formas de inserir dados no website,<b class="black"> manualmente</b>, indo na aba <b><a href="form_insere_registos.php" class="href">Inserir Registos</a></b>, ou através da <b><a href="index.html" class="href">Consulta Avançada</a></b>, ambas localizadas na página inicial.</p>

            <p>De seguida, deve escolher a linha, para visualizar as máquinas correspondentes e após selecionada, aparecerão os <b class="black">números de SAP</b> de acordo com a máquina escolhida.</p>

            <p>Ao inserir registos pela consulta avançada <b class="black">não será necessário executar o passo acima mencionado</b>, pois a máquina já estará escolhida pelo utilizador.</p>

            <p>*Deve selecionar primeiro a linha ao inserir um registo, pois para escolher outros campos como <b class="black">nº de SAP</b> e a<b class="black"> Máquina</b>, será necessário saber qual linha foi escolhida</p>

    </details>



    <details>

        <summary>Como posso consultar os registos de alteração?</summary>

                <p>Pode usar a <b><a href="consulta_manual.php" class="href">Consulta Manual</a></b> ou a <b><a href="index.html" class="href">Consulta Avançada</a></b>, ambas localizadas na página inicial.</p>

                  <p>No caso da <b><a href="consulta_manual.php" class="href">Consulta Manual</a></b>, aparecerá uma tabela com todos os registos de alteração da fábrica, com um sistema de procura por <b class="black">Máquina</b>, <b class="black">nº de SAP</b>, <b class="black">Linha</b>, <b class="black">Data</b>, <b class="black">Tipo</b>, <b class="black">Descrição</b> e <b class="black">Responsável</b>.</p>

                  <p>Também contará com a opção de eliminar e editar registos.</p>

                  <p>Se utilizar a <b><a href="index.html" class="href">Consulta Avançada</a></b>, aparecerá uma tabela com todos os registos da máquina escolhida, bem como as funcionalidades acima mencionadas.</p>  

    </details>
  
  </body>

Não sei se você já analisou a possibilidade de usar essas tags, se não, note que somente com elas no HTML, você tem efeito semelhante à função feita no javascript. Para mudar a setinha de abri e fechar para os símbolos "+ e - " você pode inserir o seguinte CSS:


summary{
    list-style-type: '+';
    list-style-position: square;
    
}

details[open] summary{
    list-style-type: '-';
    list-style-position: square;

}

E sem javascript você faz o efeito de abrir e fechar do seu FAQ. Depois é só estilizar para ficar parecido com a imagem que você postou.

Luiz Paulo Escobar · 23 de abril de 2022

@Diego72Marinho https://jsfiddle.net/anonymousLPH/s58tx7gr/26/

<html>
 <body>
   <a class='button'> clicker </a>
  <div class='div_text'>
    <p class='text'>
    Lorem ipsum dolor sit amet . The graphic and typographic operators know this well, in reality all the professions dealing with the universe of communication have a stable relationship with these words, but what is it? Lorem ipsum is a dummy text without any sense.
    </p>
  </div>
   <a class='button'> clicker </a>
  <div class='div_text'>
    <p class='text'>
    Lorem ipsum dolor sit amet . The graphic and typographic operators know this well, in reality all the professions dealing with the universe of communication have a stable relationship with these words, but what is it? Lorem ipsum is a dummy text without any sense.
    </p>
  </div>
   <a class='button'> clicker </a>
  <div class='div_text'>
    <p class='text'>
    Lorem ipsum dolor sit amet . The graphic and typographic operators know this well, in reality all the professions dealing with the universe of communication have a stable relationship with these words, but what is it? Lorem ipsum is a dummy text without any sense.
    </p>
  </div>
 </body>
</html>

* {
  margin: 0;
  box-sizing: border-box; 
  }
  
  .div_text {
    display: none;
    flex-wrap: wrap;
    justify-content: center;
    background: no-repeat #ebebeb; 
    border: solid 1px #9b9b9b;
    border-radius: 15px;
    padding: 10px 20px;
    margin: 40px 5px;
  }

  
  .button{
    background: #e9e9e9;
    display: flex;
    flex-direction: row;
    cursor: pointer;
    padding: 10px 20px;
    margin: 10px 0;
  }
  
  .button:hover {
    text-decoration: under-liner;
    font-weight: 700;
  }
  
  
  .active {
     display: flex;
  }

!percorre os elementos e faz cada um ouvir algo. E se ouvir navega pelo dom encontrando algo e fazendo o toggle.


// JS
const clickers = document.querySelectorAll('.button');
const divText = document.querySelector('.div_text');

for(const clicker of clickers) {
  clicker.addEventListener('click', () => {
    clicker.parentElement.nextElementSibling.classList.toggle('active');
  }); 
}

Aqui um código sem rodear a roda.

@David Martinho

David Martinho · 26 de abril de 2022

@Luiz Paulo Escobar Então, eu consegui resolver o problema tirando o evento hideTag(), mas agora o simbolo passa para menos e depois não muda mais.

const faqTag = document.querySelectorAll('.faq');

// Hide other elements and change icon.
const hideTag = () => {
    faqTag.forEach(item => {
        item.classList.remove('open')
        item.children[1].innerHTML = '&#43;'
    })
}

// Toggle targeted element to show with froEach Loop.
faqTag.forEach(item =>{  
    item.addEventListener('click', e => {
        if (e.target.className == 'btn') {      
            e.target.parentElement.classList.toggle('open');
            e.target.innerHTML = '&#8722;';
        } 
    }) 
})

O que eu posso fazer para quando o simbolo estiver "menos" ao clicar passar para "mais"

David Martinho · 26 de abril de 2022

const faqTag = document.querySelectorAll('.faq');


// Hide other elements and change icon.

const hideTag = () => {

    faqTag.forEach(item => {

        item.classList.remove('open')

        item.children[1].innerHTML = '&#43;'

    })

}


// Toggle targeted element to show with froEach Loop.

faqTag.forEach(item =>{  

    item.addEventListener('click', e => {

        hideTag ()

        if (e.target.className == 'btn') {      

            e.target.parentElement.classList.toggle('open');

            e.target.innerHTML = '&#8722;';

        }

    })

})

Já funciona cara, a única diferença é que para fechar a caixa tenho que clicar em alguma zona da caixa, mas sem ser no botão.

Luiz Paulo Escobar · 27 de abril de 2022

@David Martinho Nesse código ai, quando você clica o toggle se encarrega de verifica se existe ou não o toggle, mas ele sempre vai adicionar o - e nada mais, porque ele só fica "ouvindo" e adicionando o :

17 horas atrás, David Martinho disse:
e.target.innerHTML = '&#8722;';

E eu acredito que você deveria verifica se existe '$#8722;' como conteudo do e.target. Se sim você colocar o outro código '+'

const faqTag = document.querySelectorAll('.faq');

// Hide other elements and change icon.
const hideTag = () => {
    faqTag.forEach(item => {
        item.classList.remove('open')
        item.children[1].innerHTML = '&#43;'
    })
}

// Toggle targeted element to show with froEach Loop.
faqTag.forEach(item =>{  
    item.addEventListener('click', e => {
        if (e.target.className == 'btn') {      
            e.target.parentElement.classList.toggle('open');
          
          if (e.target.innerHTML == '&#8722;') {    
            e.target.innerHTML = '&#43;';
          } else {
            e.target.innerHTML = '&#8722;';
          }
        } 
    }) 
})