当另一个切换时使 div 消失

Question

I have a div that appears once you click an image, it uses toggle for this. Now I also want the initial div to disappear when the second toggles, for this I used the .css function in js. The problem is it only applies to the first case, and since it receives info from the database I want this to happen in every entry. How can I apply to all?

<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 = 3";
                        }
                            $result = $conn->query($sql);

                            if ($result->num_rows > 0) {
                                // output data of each row
                                while($row = $result->fetch_assoc()) {
                                    $id = $row['idr']; ?>
                                    <div class="conteudo_cima" id="conteudo_cima">
                                        <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="<?= $row['img1'] ?>" ></div>
                                            <div><img src="<?= $row['img2'] ?>" ></div>
                                            <div><img src="<?= $row['img3'] ?>" ></div>
                                            <div><img src="<?= $row['img4'] ?>" ></div>
                                            <div><img src="<?= $row['img5'] ?>" ></div>
                                            <div><img src="<?= $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>

<script>
    function abreInfo(event, id){
        event.preventDefault();
        $("#"+id).toggle("slow");
    }
    $(document).ready(function(){
        $("#trigger").click(function(){
            $("#conteudo_cima").css("display", "none");
        });
    });
    $(document).ready(function(){
        $("#trigger_expand").click(function(){
            $("#conteudo_cima").css("display", "block");
        });
    });
</script>
<script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript" src="slick/slick.min.js"></script>
<script type="text/javascript">
    $('.galeria').slick({
        dots: true,
        infinite: true,
        speed: 1000,
        autoplay:true,
        autoplaySpeed: 1200,
        arrows:true,
        slidesToShow: 1,
        slidesToScroll: 1
    });
</script>

.left_corpo .bottom_left_corpo{
    background-color: rgba(0,0,0,0.3);
    height: 75%;
    width: 100%;
    margin-top: 1%;
}
.bottom_left_corpo .div_grande{
    position: relative;
    height: 100%;
    width: 100%;
    overflow-y: scroll;
}
.div_grande .conteudo_cima{
    text-transform: uppercase;
    color: white;
    font-size: 1vw;
    position: relative;
    height: 30%;
    width: 98%;
    margin-left: 1%;
    margin-top: 1%;
    white-space: nowrap;
    display: block;
}
.conteudo_cima .img_cima{
    position: relative;
    display: inline-block;
    height: 100%;
    width: 20%;
}
.conteudo_cima .texto{
    /*background-color: red;*/
    position: absolute;
    display: inline-block;
    height: 100%;
    width: 70%;
    margin-left: 0;
    margin-top: 0;
    text-shadow: 1px 1px 1px #000;
    overflow:hidden;
}
.conteudo_cima h1{
    font-size: 1.5vw;
    margin-top: 0;
}
.conteudo_cima .seta{
    /*background-color: blue;*/
    position: absolute;
    display: inline-block;
    height: 100%;
    width: 10%;
    margin-left: 70%;
}
.conteudo_cima .seta #trigger{
    height: 30%;
    width: 50%;
    margin-top: 50%;
    margin-left: 20%;
    cursor: pointer;
}
.expand{
    text-transform: uppercase;
    color: white;
    font-size: 1vw;
    position: relative;
    width: 98%;
    margin-left: 1%;
    display: none;
    white-space: nowrap;
}
.expand .video{
    position: relative;
    height: 100%;
    width: 40%;
    margin-top: 1%;
    display: inline-block;
}
.expand .video iframe{
    height: 200px;
    width: 100%;
}
.expand .galeria{
    position: relative;
    height: 100%;
    width: 40%;
    display: inline-block;
    margin-left: 15%;
}
.expand .galeria img{
    height: 200px;
    width: 80%;
    margin-left: 10%;
}
.expand .fundo_expand{
    position: relative;
    width: 100%;
    white-space: nowrap;
}
.expand .texto_expand{
    position: relative;
    height: 100%;
    width: 90%;
    margin-left: 0;
    text-shadow: 2px 2px 2px #000;
    overflow:hidden;
    display: inline-block;
}
.expand h1{
    font-size: 1.5vw;
    margin-top: 0;
}
.expand .seta_expand{
    position: relative;
    display: inline-block;
    height: 100%;
    width: 10%;
}
.expand .seta_expand #trigger_expand{
    height: 30%;
    width: 50%;
    margin-top: 40%;
    margin-left: 11%;
    cursor: pointer;
}

http://codepen.io/Ryuh/pen/vKYVWY

When div closed

Answer 1

Edit the click event:

$("#trigger").click(function(){
      $("#conteudo_cima").css("display", "none");
      //add here hiding of any other div etc...
      // i.e. 
      // $("#THE_OTHER_DIV_ID").css("display", "none");
});

Answer 2

Don't call exactly the same function, with exactly the same id.

You need to make the function calls more specific in some way.

It's hard to tell exactly what you mean, but you could give an identifier to the div called the first time, and and identifier to the div called the second time. Then you could make the call open and close these two different divs.