0

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

que quero que fique escondido inicialmente, pra que só quando eu clicar nessa div:
<div id="lista"><img src="_imagens/pizzaiolo_corpo-300x288.png" class="logo"><h2>'.$linha['nomep'].'</h2></div> Aquele article apareça.

3 Respostas 3

1

Versão com Javascript puro

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>

Versão com 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>

0

Você pode deixar o elemento escondido, logo que entra na tela, exemplo:

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

E quando clicar div lista, exibe ela:

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

Você vai querer esconder os detalhes novamente, ou deixar aparecendo? Caso não queira deixar exibindo o tempo todo, você terá .toggle(); ao invés de .show();

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

Entendeu?

0

Você pode fazer da seguinte maneira com Javascript puro:

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

Ou então caso você esteja usando jQuery, você pode fazer da seguinte forma:

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

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 .