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

Question

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>

Answer 1

Nelson, taking the elements by the class Javascript recovers a collection of elements in an array, so for you to do what you need in this case it would be better to assign a id each paragraph and make the function for when click on each of the h3 show paragraphs below them.

Using the native form can be 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 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>
<script src="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 in: https://jqueryui.com/