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");
});
});
id2
é o quê?