Jquery function to show and hide text?

Asked

Viewed 396 times

0

Basically when you click The Art the phrases that have the id= shows should appear and when you click again disappear 

<!DOCTYPE html>
    <html>
    <head>
        <title></title>
        <script type="text/javascript" src="Scripts/jquery-3.1.1.j**s"></script>
        <meta charset="utf-8" />
    </head>
    <body>
        <div>
            <h2 onclick="Mudarestado('mostrar')"><center>A arte</center></h2>
            <br />
            <p><center> não tem sentido </center></p>
            <p id="mostrar"><center>sem paixão  </center></p>
            <p><center>Você deve sair  </center></p>
            <p id="mostrar"><center>e criar arte.  </center></p>
            <p><center>(Arrumar) [Arrume] um trabalho  </center></p>
            <p id="mostrar"><center>fazendo o que você ama  </center></p>
            <p><center>e faça sua vida  </center></p>
            <p id="mostrar"><center> sendo você mesmo. </center></p>
            <p><center>Você não pode deixar  </center></p>
            <p id="mostrar"><center> outras pessoas definirem </center></p>
            <p><center> o resto da sua vida (ser) </center></p>
            <p id="mostrar"><center>e lhe dizerem que você será  </center></p>
            <p><center> uma piada, um fracasso. </center></p>
            <p id="mostrar"><center>Siga seu coração.  </center></p>
            <p><center> Você vai acabar </center></p>
            <p id="mostrar"><center>feliz e livre e não  </center></p>
            <p><center> um artista faminto. </center></p>
            <p id="mostrar"><center> Ame sua arte e </center></p>
            <p><center> contribua  com a sociedade </center></p>
            <p id="mostrar"><center> inspirando as pessoas </center></p>
            <p><center>os invés de ficar perdendo tempo  </center></p>
            <p id="mostrar"><center> deixando os outros lhe dizerem  </center></p>
            <p><center>que você não vale nada.  </center></p>
            <p id="mostrar"><center>Você pode mudar o mundo  </center></p>
        </div>

        <script type="text/javascript">
            function Mudarestado(el) {
                var display = document.getElementById(el).style.display;
                if (display == "none")
                    document.getElementById(el).style.display = 'block';
                else
                    document.getElementById(el).style.display = 'none';
            }
        </script>
    </body>
    </html>
javascript jquery html

1 answer

1

The best thing would be to have a class and the CSS do the hide/show part.

Class could be like this:

.esconder .mostrar {
    display: none;
}

And a working example would be like this:

function Mudarestado(el) {
  el.parentElement.classList.toggle('esconder');
}
div {
  text-align: center
}

.esconder .mostrar {
  display: none;
}
<div class="esconder">
  <h2 onclick="Mudarestado(this)">A arte</h2>
  <br>
  <p> não tem sentido </p>
  <p class="mostrar">sem paixão </p>
  <p>Você deve sair </p>
  <p class="mostrar">e criar arte. </p>
  <p>(Arrumar) [Arrume] um trabalho </p>
  <p class="mostrar">fazendo o que você ama </p>
  <p>e faça sua vida </p>
  <p class="mostrar"> sendo você mesmo. </p>
  <p>Você não pode deixar </p>
  <p class="mostrar"> outras pessoas definirem </p>
  <p> o resto da sua vida (ser) </p>
  <p class="mostrar">e lhe dizerem que você será </p>
  <p> uma piada, um fracasso. </p>
  <p class="mostrar">Siga seu coração. </p>
  <p> Você vai acabar </p>
  <p class="mostrar">feliz e livre e não </p>
  <p> um artista faminto. </p>
  <p class="mostrar"> Ame sua arte e </p>
  <p> contribua com a sociedade </p>
  <p class="mostrar"> inspirando as pessoas </p>
  <p>os invés de ficar perdendo tempo </p>
  <p class="mostrar"> deixando os outros lhe dizerem </p>
  <p>que você não vale nada. </p>
  <p class="mostrar">Você pode mudar o mundo </p>
</div>

Note: the tag <center> it’s abandoned, you shouldn’t use it anymore.

Browser other questions tagged javascript jquery html

You are not signed in. Login or sign up in order to post.