0

Boa tarde!

Estou fazendo uma documentação e preciso que um botão do menu lateral mostre/oculte uma div.

Tentei esse script aqui porém ele só mostra/oculta o "Conteúdo 2" e nunca o "Conteúdo 1":

<script>
    function myFunction(e) {
        // e.preventDefault();
        var cont = document.getElementById('collapseExample');
        cont.classList.toggle('show');
        cont.scrollIntoView({
            behavior: "smooth"
        });
    }
</script>

<script>
    function myFunction(e) {
        // e.preventDefault();
        var cont = document.getElementById('collapseExample2');
        cont.classList.toggle('show');
        cont.scrollIntoView({
            behavior: "smooth"
        });
    }
</script>

Alguém sabe como atribuir cada um dos scripts à um botão individual?

Exemplo executável abaixo:

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="utf-8" />
<title>Exemplo</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" media="screen" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" media="screen" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.2/css/all.min.css" />
<style>
    .cont {
        margin-top: 120vh;
        margin-bottom: 120vh;
    }
</style>
</head>

<body>

    <p>
        <a class="btn btn-primary" href="#collapseExample" role="button" onclick="myFunction()">
            BOTÃO 1
        </a>
    </p>

    <p>
        <a class="btn btn-primary" href="#collapseExample2" role="button" onclick="myFunction()">
            BOTÃO 2
        </a>
    </p>

    <div class="collapse" id="collapseExample">
        <div class="card card-body">
            CONTEÚDO 1
        </div>
    </div>

    <div class="collapse" id="collapseExample2">
        <div class="card card-body">
            CONTEÚDO 2
        </div>
    </div>

    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>

    <script>
        function myFunction(e) {
            // e.preventDefault();
            var cont = document.getElementById('collapseExample');
            cont.classList.toggle('show');
            cont.scrollIntoView({
                behavior: "smooth"
            });
        }
    </script>

    <script>
        function myFunction(e) {
            // e.preventDefault();
            var cont = document.getElementById('collapseExample2');
            cont.classList.toggle('show');
            cont.scrollIntoView({
                behavior: "smooth"
            });
        }
    </script>
</body>

</html>

1 Resposta 1

0

Você está duplicando a função myFunction(). Assim a segunda irá sobrescrever a primeira, e só vai funcionar com o botão 2.

Você deve usar apenas uma função e passar no onclick o parâmetro this, que será o botão clicado na função:

onclick="myFunction(this)"

E na função pegar o atributo href do botão clicado e retirar o #, que será o id da div que você abrir:

var div = e.getAttribute("href").replace("#","");

O e na função representa o botão clicado enviado pelo this.

Veja:

function myFunction(e) {
   // e.preventDefault();
   var div = e.getAttribute("href").replace("#","");
   var cont = document.getElementById(div);
   cont.classList.toggle('show');
   cont.scrollIntoView({
       behavior: "smooth"
   });
}
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">

<p>
  <a class="btn btn-primary" href="#collapseExample" role="button" onclick="myFunction(this)">
      BOTÃO 1
  </a>
</p>

<p>
  <a class="btn btn-primary" href="#collapseExample2" role="button" onclick="myFunction(this)">
      BOTÃO 2
  </a>
</p>

<div class="collapse" id="collapseExample">
  <div class="card card-body">
      CONTEÚDO 1
  </div>
</div>

<div class="collapse" id="collapseExample2">
  <div class="card card-body">
      CONTEÚDO 2
  </div>
</div>

1
  • Obrigado pela ajuda Sam! Consegui resolver através de outro script, mas obrigado mesmo! Commented 4/08/2019 às 21:29

Você deve fazer log-in para responder a esta pergunta.

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