4

Estou com um problema a esconder uma div quando mostro outra. Se eu utilizar .conteudo_cima em vez do id2 consigo fazer este efeito, mas faz para todos ao mesmo tempo e eu quero para cada um individualmente.

Como faço isso? http://codepen.io/Ryuh/pen/ezNqXJ

HTML

<div class="div_grande">
  <?php
    if (!mysqli_set_charset($conn, "utf8")) {
        printf("Error loading character set utf8: %s\n", mysqli_error($link));
        exit();
        } else {
        $sql = "SELECT idr, nome, video, img1, img2, img3, img4, img5, img6, telefone, morada, descricao, site FROM restaurantes WHERE fk_lingua = $idl AND fk_distrito = $idd ORDER BY idr DESC";
    }
    $result = $conn->query($sql);
    if ($result->num_rows > 0) {
    // output data of each row
    while($row = $result->fetch_assoc()) {
        $id = $row['idr'];
        $strid = (string)$id;
        $id2 = '_'.$strid."cima";
?>
    <div class="conteudo_cima" id="<?php echo eval('return $'. $id2 . ';');?>">
      <iframe class="img_cima" src="<?php echo $row['video']; ?>" allowfullscreen=1 frameBorder=0></iframe>
      <div class="texto">
        <h1><?php echo $row['nome']."<br>";?></h1>
        <?php echo $row['descricao']."<br>";?>
        <?php echo $row['morada']."<br>";?>
        <?php echo $row['telefone']."<br>";?>
        <a href="http://<?php echo $row['site'];?>" target="_blank">
          <?php echo $row['site'];?>
        </a>
      </div>
      <div class="seta">
        <img id="trigger" src="imagens/expand.png" onclick="abreInfo(event, <?php echo $id; ?>)">
      </div>
    </div>
    <div class="expand" id="<?php echo $id; ?>">
      <div class="video">
        <iframe src="<?php echo $row['video']; ?>" allowfullscreen=1 frameBorder=0></iframe>
      </div>
      <div class="galeria">
        <div><img src="<?php echo $row['img1'] ?>"></div>
        <div><img src="<?php echo $row['img2'] ?>"></div>
        <div><img src="<?php echo $row['img3'] ?>"></div>
        <div><img src="<?php echo $row['img4'] ?>"></div>
        <div><img src="<?php echo $row['img5'] ?>"></div>
        <div><img src="<?php echo $row['img6'] ?>"></div>
      </div>
      <div class="fundo_expand">
        <div class="texto_expand">
          <h1><?php echo $row['nome']."<br>";?></h1>
          <?php echo $row['descricao']."<br>";?>
          <?php echo $row['morada']."<br>";?>
          <?php echo $row['telefone']."<br>";?>
          <a href="http://<?php echo $row['site'];?>" target="_blank"><?php echo $row['site']."<br><br>";?></a>
        </div>
        <div class="seta_expand">
          <img id="trigger_expand" src="imagens/encolher.png" onclick="abreInfo(event, <?php echo $id; ?>)">
        </div>
      </div>
    </div>
    <?php }
       } else {
          echo "Sem resultados disponíveis!";
       }
    ?>
</div>

JS

function abreInfo(event, id) {
  event.preventDefault();
  $("#" + id).toggle("slow");
}
$(document).ready(function() {
  $("#trigger").click(function() {
    $("#" + id2).css("display", "none");
  });
  $("#trigger_expand").click(function() {
    $("#" + id2).css("display", "block");
  });
});
11
  • 1
    Podes colocar a parte relevante do código. HTML + JS/JQUERY? no codepen não dá para ver
    – Miguel
    Commented 6/06/2016 às 8:42
  • Atualizado. Obrigado desde já pela ajuda Commented 6/06/2016 às 8:54
  • Possível duplicata de Ocultar div ao Clicar em outra
    – pmargreff
    Commented 6/06/2016 às 8:56
  • Esse id2 é o quê?
    – Miguel
    Commented 6/06/2016 às 8:58
  • É a variável que utilizei para atribuir o id da base de dados ao conteúdo cima, porque id estava atribuido à div expand Commented 6/06/2016 às 9:00

2 Respostas 2

2

Podes fazer assim:

<div class="conteudo_cima" id="<?php echo $id2; ?>">
<img id="trigger_expand" data-show="<?php echo $id2; ?>" src="imagens/encolher.png">

Depois fica assim:

$(".trigger").click(function() {
  $('.conteudo_cima').hide();
});
$(".trigger_expand").click(function() {
  var divShow = $(this).data('show'); // id_da_bd
  $('.conteudo_cima').hide();
  $('#' +divShow).show(); // id_da_bd aparece
});
.conteudo_cima {
  display:none;  
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="trigger">trigger1</div>
<div class="trigger_expand" data-show="id_da_bd">trigger expand1</div>

<div class="conteudo_cima" id="id_da_bd">caixa 1</div>

Caso precises do $id2 para outras coisas, no js faz:

var id2 = $('.conteudo_cima').prop('id');
4
  • Pois, isso eu consegui fazer, o que eu não consigo é que a div que tem o trigger desapareça e volte a aparecer quando carrego no trigger expand Commented 6/06/2016 às 9:11
  • Editei @JoãoRodrigoCastro
    – Miguel
    Commented 6/06/2016 às 9:17
  • Não é isso. Acho que só preciso de passar o valor do id2 para o js. Como posso fazer? Obrigado pela ajuda Commented 6/06/2016 às 9:26
  • Acho que percebi. Editei lá em cima como tens de fazer para imprimires o $id2 no html, e depois como o vais buscar no js
    – Miguel
    Commented 6/06/2016 às 10:50
-1

Penso que o problema esteja no facto de não inicializares a variável id2 no javascript.

while($row = $result->fetch_assoc()) {
        $id = $row['idr'];
        $strid = (string)$id;
        $id2 = '_'.$strid."cima";
?>
<script>
    var id2 = <?php echo $id2 ?>
</script>

E altera o click de .click() para

$('body').on('click','#trigger',function(){
    $("#" + id2).css("display", "none");
})
8
  • Não resultou. O id2 neste caso serve apenas para identificar qual a div conteudo_cima que quero esconder. Tenho várias porque crio uma para cada entrada da base de dados Commented 6/06/2016 às 9:04
  • Mas o id2 (no javascript) é inicializado em algum lado? Não é perceptível no código que enviaste. A Ferramenta de Programador não deu erro?
    – FabioP
    Commented 6/06/2016 às 9:22
  • Pois, o id2 não está inicializado no js. Como posso passar o valor do $id2 do php no js? Commented 6/06/2016 às 9:25
  • Não aconselho muito a estruturação do código, no entanto para resolver podes fazer como está em cima editado
    – FabioP
    Commented 6/06/2016 às 9:27
  • Assim não a passo para a minha função de js. Posso usar o $ no js? Commented 6/06/2016 às 9:30

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 .