Close <li> by clicking on the next

Question

I have the following ul > li

<ul class="list-group no-radius no-border" id="mails-list">
    <?php foreach($lista as $valor){ ?>
    <!-- mail in mails -->
    <li class="list-group-item <?php if($valor->men_status==0){ echo "b-default"; } ?> visualizar_mensagem" data-id="<?php echo $valor->men_id; ?>" <?php if($valor->men_status > 0){ ?>style="border-left: 3px solid #CCCCCC;"<?php } ?>>
        <div class="media">
            <div class="pull-left">
                <div class="controls">
                    <?php if($valor->men_resposta=='1'){ ?> <a href="javascript:;" title="Esta mensagem requer resposta!" class="reply_<?php echo $valor->men_id; ?>" <?php if($valor->total_respostas > 0){ ?>style="color:#F5F5F5;" <?php } ?> data-toggle="active"><i class="fa fa-reply"></i></a><?php } ?>
                    <label class="checkbox checkbox-custom-alt checkbox-custom-sm m-0 mail-select"><input type="checkbox"><i></i></label>
                </div>
                <div class="thumb thumb-sm">
                    <div class="img-circle bg-greensea"><?php echo substr($valor->usu_id, 0, 1); ?></div>
                </div>
            </div>
            <div class="media-body">
                <div class="media-heading m-0">
                    <strong><?php echo $valor->usu_id; ?></strong> - <?php echo $valor->set_assunto; ?>

                    <span class="pull-right text-sm text-muted">
                      <span class="hidden-xs"><strong><?php echo date("d/m/ H:i", strtotime($valor->men_data)); ?></strong></span>
                    </span>
                </div>
                <small><?php echo $valor->men_mensagem; ?></small><br>
            </div>
        </div>                              
    </li> 
    <div class="resposta_<?php echo $valor->men_id; ?>"></div>
    <?php } ?>
</ul>

So far, it works 100% as it should. The following jQuery does the load I need:

// caixa de entrada - responder (visualizar)
$(".visualizar_mensagem").click(function(){     
    $(this).css("background","#F5F5F5");
    var id_mensagem = $(this).attr('data-id');          
    var url = '<? echo base_url("ajax/mensagens_responder"); ?>/'+id_mensagem;
    $(".resposta_"+id_mensagem).css("display", "block");
    $.get(url, function(dataReturn) {
        $(".resposta_"+id_mensagem).load(url);
    }); 

    // contagem de nao lidas
    var url_nao_lida = '<? echo base_url("ajax/contar_mensagens"); ?>/';
    $.get(url_nao_lida, function(dataReturnMSG) {
        $(".total_nao_lida").html(dataReturnMSG);
    });             
});

My question is: How do I, when clicking again on the display div, close the open div? Or by clicking on another div (from the bottom for example, it closes the previous)?

Answer 1

You can go through all the ".visualizar_mensagem" and check if the ID is the same as the clicked one. It would be better if you gave a class to what is open, so the close selector could be more effective.

$(".visualizar_mensagem").click(function(){
    // aqui percorres todas as mensagens
    $(".visualizar_mensagem").css("background","none"); // ou o valor inicial
    $("div[class*=' resposta_']").css("display", "none"); // "class*=" procura por classes que contenham uma dada string

    // etc
    $(this).css("background","#F5F5F5");
    var id_mensagem = $(this).attr('data-id');  

But if you gave a class to the open elements you could use it as a selector.