How to hide and then show an article?

Question

I have this article:

<article class="detalhes">
        <?php
        $sql = "SELECT `nomep`, `cidade`,`bairro`, `endereco`, `site`, `site`, `email`, `facebook`, `googleplus`, `descricao`, `funciona` FROM `cadastropn` WHERE `cidade` = '$cidade' && `id` = '1'";
        $result = mysqli_query($mysqli, $sql);
        while($linha = $result->fetch_assoc()){
            echo'<div id="detalhes"><img src="_imagens/pizzaiolo_corpo-300x288.png" class="logo">'.$linha['nomep'];
            echo'<br><br>'.$linha['bairro'].','.$linha['cidade'];
            echo'<br>'.$linha['endereco'];
        }
        ?>
    </article>

that I want to hide initially, so that only when I click this div:
<div id="lista"><img src="_imagens/pizzaiolo_corpo-300x288.png" class="logo"><h2>'.$linha['nomep'].'</h2></div> That article comes out.

Answer 1

Version with pure Javascript

document.getElementById("lista").onclick = fadeToggle;

function fadeToggle(evt) {
    var el = document.getElementsByClassName("detalhes");
    el[0].classList.toggle("show");
}

.detalhes {
    display: none;
}

.detalhes.show {
    display: initial !important;
}

<div id="lista">
  Div lista com Javascript puro
</div>

<article class="detalhes">
  Conteúdo do article vai aqui...
</article>

Version with jQuery

$('#lista').click(function () {
  $('.detalhes').fadeToggle();
});

<div id="lista">
  Div lista com jQuery
</div>

<article class="detalhes" style="display:none">
  Conteúdo do article vai aqui...
</article>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Answer 2

You can leave the element hidden as soon as it enters the screen, example:

$(".detalhes").hide();

And when you click div list, it displays it:

$("#detalhes").show();

Will you want to hide the details again, or let it show up? If you don’t want to let it show all the time, you will. toggle(); instead of . show();

$("#detalhes").toggle();

Got it?

Answer 3

You can do it this way with pure Javascript:

(function() {

  var detalhes = document.getElementsByClassName('detalhes');
  //Esconde o elemento article.
  detalhes[0].style.display = 'none';
  
  var lista = document.getElementById('lista');
  
  //Adiciona o evento de click na DIV para mostrar o elemento quando ela for clicada.
  lista.addEventListener('click', function() {
    
    //Mostrar article.
  	detalhes[0].style.display = 'block';
  
  }, false);
 
})();

<div id="lista"><h2>Mostrar</h2></div>

<article class="detalhes">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis, ullam ad voluptates quisquam libero beatae voluptatum eligendi recusandae provident, unde alias esse corporis placeat in molestias quae eaque, a sed!
</article>

Or if you’re using jQuery, you can do it this way:

$(function() {

  var detalhes = $('.detalhes');
  //Esconde o elemento article.
  detalhes.hide();
  
  //Adiciona o evento de click na DIV para mostrar o elemento quando ela for clicada.
  $('#lista').click(function() {
  
    //Mostrar article
  	detalhes.show();
  
  });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="lista"><h2>Mostrar</h2></div>

<article class="detalhes">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis, ullam ad voluptates quisquam libero beatae voluptatum eligendi recusandae provident, unde alias esse corporis placeat in molestias quae eaque, a sed!
</article>