How to hide and then show an article?

Navigation
0

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>

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

    
asked by anonymous 05.09.2016 / 01:37

3 answers

1

Pure Javascript Version 

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>
    
05.09.2016 / 03:37
0

You can leave the element hidden as soon as you enter the screen, for example: 

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

And when you click div list, it displays it: 

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

Will you want to hide the details again, or let them appear? If you do not want to leave it displaying all the time, you will have .toggle (); instead of .show (); 

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

Do you understand?

    
05.09.2016 / 02:02
0

You can do the following 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 as follows: 

$(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><divid="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>
    
05.09.2016 / 02:45
Load HTML into Div via Ajax Doubt with htaccess file