Hide a div when showing another

Question

I’m having a problem hiding one div when I show another. If I use .conteudo_up instead of the id2 I can do this effect, but it does for everyone at the same time and I want for each one individually.

How do I do that? 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");
  });
});

Answer 1

You can do it like this:

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

Then it gets like this:

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

In case you need the $id2 for other things, no js does:

var id2 = $('.conteudo_cima').prop('id');

Answer 2

I think the problem is that you do not initialize the id2 variable in javascript.

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

And change the click from . click() to

$('body').on('click','#trigger',function(){
    $("#" + id2).css("display", "none");
})