Ir ao conteúdo
  • Cadastre-se
Regras do Clube do Hardware

Javascript Como colocar elemento para abrir e fechar

David Martinho

Por David Martinho
em Web e banco de dados

 Compartilhar
Ir à solução Resolvido por David Martinho,

Posts recomendados

David Martinho
 

David Martinho

Postado
Postado

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 = '+'
    })
}

// 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 = '−';
        }
    }) 
})

 

 

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

 

imagem.thumb.png.9e9a27d8c59d8fb2ffa1dbeb683db9a5.png

Link para o comentário
Compartilhar em outros sites
Diego72Marinho
 

Diego72Marinho

Postado
Postado

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.

  • Obrigado 1
Link para o comentário
Compartilhar em outros sites
Luiz Paulo Escobar
 

Luiz Paulo Escobar

Postado
Postado

@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

 

  • Curtir 1
Link para o comentário
Compartilhar em outros sites
David Martinho
 

David Martinho

Postado
  • Autor
Postado

@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"

Link para o comentário
Compartilhar em outros sites
  • Solução
David Martinho
 

David Martinho

Postado
  • Autor
  • Solução
Postado 
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.
 

Link para o comentário
Compartilhar em outros sites
Luiz Paulo Escobar
 

Luiz Paulo Escobar

Postado
Postado

@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 '&#43;' 

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;';
          }
        } 
    }) 
})

 

7 minutos atrás, Luiz Paulo Escobar disse: 
innerHTML

pode trocar isso por textContent para testes. Eu não tenho seu html e css então não consigo testar... Tenta ai e me fale.

Link para o comentário
Compartilhar em outros sites

Crie uma conta ou entre para comentar

Você precisa ser um usuário para fazer um comentário

Criar uma conta

Crie uma nova conta em nossa comunidade. É fácil!

Crie uma nova conta

Entrar

Já tem uma conta? Faça o login.

Entrar agora
 Compartilhar
Ir à lista de tópicos

Sobre o Clube do Hardware

No ar desde 1996, o Clube do Hardware é uma das maiores, mais antigas e mais respeitadas comunidades sobre tecnologia do Brasil. Leia mais

Direitos autorais

Não permitimos a cópia ou reprodução do conteúdo do nosso site, fórum, newsletters e redes sociais, mesmo citando-se a fonte. Leia mais

Mais

×
×
  • Criar novo...

 

GRÁTIS: ebook Redes Wi-Fi – 2ª Edição

EBOOK GRÁTIS!

CLIQUE AQUI E BAIXE AGORA MESMO!