How to hide / show one div at a time with Javascript? [closed]

Question

How to hide / show one div at a time with Javascript? [closed]

Navigation

#1 by (1 votes)

-3

function show() {
  var x = document.getElementsByClassName('bla').style.display;
  if (x == "none") {
    document.getElementsByClassName('bla').style.display = "inline";
  } else {
    document.getElementsByClassName('bla').style.display = "none"
  }
}

<h3><a href="#" onclick="show()">Portas e Protocolos<span class="fa fa-chevron-down"></span></a></h3>
<p style="display: none; margin-left: 15px;" class="bla">Um protocolo é uma linguagem que serve como padrão de comunicação<br> entre computadores conectados em uma rede. Já uma porta é um programa<br> cujo número é associado a um endereço IP para que o computador identifique<br> o que fazer com os dados recebidos.</p>
<h3><a href="#" onclick="show()">TCP/IP e OSI<span class="fa fa-chevron-down"></span></a></h3>
<p style="display: none; margin-left: 15px;" class="bla">Os modelos de protocolo mais utilizados na internet são o<br> TCP/IP e o OSI. O primeiro tem 4 camadas(Aplicação, Transporte,<br> Interface e Interface com a Rede) e o último possui 7 camadas</p>
<div class="">
  <h2>Hardware</h2>
  <p>Em Hardware aprendemos: </p>
  <h3>Processadores</h3>
  <p style="display: none; margin-left: 15px;" class="bla">O  processador é um dispositivo do computador cuja função é calcular e processar informações recebidas.</p>
</div>

javascript css

asked by anonymous 09.07.2017 / 19:52

1 answer

How to put a url in web.config Check if mobile or desktop

score 1 · Accepted Answer

Nelson, grabbing the elements from the class JavaScript retrieves a collection of elements in an array, so you can do what you need in this case, it would be better to assign a id to each paragraph and do the function for when you click each one of the h3 show the paragraphs below them.

Using the native form might look like this:

function mostra(elem){
  x=document.getElementById(elem);
  if (x.style.display == 'inline') {
    x.style.display = 'none';
  } else {
    x.style.display = 'inline';
  }
}

#accordion h3{
  background-color: lightblue;
  cursor: pointer;
}
#accordion p{
  display: none;
}

<div id="accordion">
  <h3 onclick="mostra('portas')">Portas e Protocolos</h3>
  <p id="portas">Um protocolo é uma linguagem que serve como padrão de comunicação entre computadores conectados em uma rede. Já uma porta é um programa cujo número é associado a um endereço IP para que o computador identifique o que fazer com os dados recebidos.</p>
  <h3 onclick="mostra('tcp')">TCP/IP e OSI</h3>
  <p id="tcp">Os modelos de protocolo mais utilizados na internet são o TCP/IP e o OSI. O primeiro tem 4 camadas(Aplicação, Transporte, Interface e Interface com a Rede) e o último possui 7 camadas</p>
  <h3 onclick="mostra('hw')">Hardware</h3>
  <p id="hw">Em Hardware aprendemos:</p>
  <h3 onclick="mostra('proc')">Processadores</h3>
  <p id="proc">O  processador é um dispositivo do computador cuja função é calcular e processar informações recebidas.</p>
</div>

If you want to take a look at a framework that makes things easier for you, this is an example that fits in with what you want to do.

JQuery UI Accordion

$( function() {
    $( "#accordion" ).accordion({
      collapsible: true
    });
} );

#accordion h3{
  background-color: lightblue;
  cursor: pointer;
}

<script src="https://code.jquery.com/jquery-1.12.4.js"></script><scriptsrc="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div id="accordion">
  <h3>Portas e Protocolos</h3>
  <p>Um protocolo é uma linguagem que serve como padrão de comunicação entre computadores conectados em uma rede. Já uma porta é um programa cujo número é associado a um endereço IP para que o computador identifique o que fazer com os dados recebidos.</p>
  <h3>TCP/IP e OSI</h3>
  <p>Os modelos de protocolo mais utilizados na internet são o TCP/IP e o OSI. O primeiro tem 4 camadas(Aplicação, Transporte, Interface e Interface com a Rede) e o último possui 7 camadas</p>
  <h3>Hardware</h3>
  <p>Em Hardware aprendemos:</p>
  <h3>Processadores</h3>
  <p>O  processador é um dispositivo do computador cuja função é calcular e processar informações recebidas.</p>
</div>

See more at: link