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

1 Resposta 1

2

Nelson, pegando os elementos pela classe o JavaScript recupera uma coleção de elementos num array, portanto para você fazer o que precisa neste caso seria melhor atribuir uma id a cada parágrafo e fazer a função para quando o clicar em cada um dos h3 mostrar os parágrafos abaixo deles.

Utilizando a forma nativa pode ser assim:

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>

Caso queira dar uma olhada num framework que facilita as coisas pra você esse é um exemplo que se enquadra no que você quer fazer.

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>

Veja mais em: https://jqueryui.com/

4
  • Eu acho que seria interessante postar como fazer na própria linguagem, sem o uso da lib. Commented 10/07/2017 às 22:04
  • Consegui resolver fazendo isso: function show(id) { var x = document.getElementById(id).style.display; if (x == "none") { document.getElementById(id).style.display = "inline"; } else{ document.getElementById(id).style.display = "none"; } }
    – nelson450
    Commented 10/07/2017 às 22:06
  • No elemento html a ser aplicada a função, eu coloquei +/- assim: <a onclick="show('bla')".
    – nelson450
    Commented 10/07/2017 às 22:09
  • Atualizei a resposta, dá uma olhada agora. Commented 10/07/2017 às 22:18

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .