Tenho o seguinte 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>
Até o presente, funciona 100% como deve funcionar. O seguinte jQuery faz o load que eu preciso:
// 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);
});
});
Minha dúvida é: Como eu faço que, ao clicar novamente na div visualizar_mensagem, ele feche a div aberta? Ou ao clicar em outra div (de baixo por exemplo, ele feche a anterior)?