0

Estou tentando criar uma forma de minimizar e maximizar uma DIV. Minimizar funciona, mas o maximizar não.

O que estou fazendo de errado?

$("#chatMinimizar").click(function() {
  $("#chat").attr("style", "height: 45px;");
  $("#chatMinimizar").attr("id", "chatMaximizar");
});

$("#chatMaximizar").click(function() {
  alert("oi");
  $("#chat").removeAttr("style", "height: 45px;");
  $("#chatMaximizar").attr("id", "chatMinimizar");
});
.chat{
    width: 270px;
    height: 400px;
    float: right;
    border: 1px solid #4c4d4d;
    margin-right: 10px;
}
.chat .titulo{
    background-color: #1f2836;
    padding: 7px;
    color: white;
}
#chatEscrita{
    border-top:1px solid black;
    border-left: 0px;
    border-bottom: 0px;
    border-right: 0px;
    background-color: #e4e4e4;
    font-size: 15px;
    padding: 5px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://use.fontawesome.com/785bf17c00.js"></script>

<div class="fixed-bottom">
  <div id="chat" class="col chat rounded-top">
    <div id="chatTitulo" class="row titulo">
      <div style="margin-right: auto">Cliente</div>
      <div><i id="chatMinimizar" class="fa fa-minus" style="cursor:pointer; margin: 9px 7px 0px 0px;" aria-hidden="true"></i></div>
      <div><i id="chatFechar" class="fa fa-times" style="cursor:pointer;" aria-hidden="true"></i></div>
    </div>

    <div class="row" id="chatMsg" style="height: 305px;"></div>

    <div class="row">
      <input id="chatEscrita" name="msg" class="bg-cinza" style="width: 100%; height: 50px;" autocomplete="off">
      <input type="hidden" id="de" value="2">
      <input type="hidden" id="para" value="1">
    </div>
  </div>
</div>

7
  • Tente trocar .click(...) por .on("click", ...).
    – Woss
    25/07/2017 às 21:26
  • $("#chat").css("height", "45px");
    – bfavaretto
    25/07/2017 às 21:26
  • Existe uma diferença entre atributo e propriedade. Raramente é preciso alterar o valor de um atributo.
    – bfavaretto
    25/07/2017 às 21:27
  • Obrigado pela dica, mas o problema é quando clica no minimizar. Quando a janela esta aberta e clica em minimizar, é mudando o ID do campo para chatMaximizar, mas não esta reconhecendo esse no ID.
    – Tiago
    25/07/2017 às 21:41
  • Nem o simples alert que coloquei para testar executa.
    – Tiago
    25/07/2017 às 21:43

1 Resposta 1

1

A forma correta de modificar o css através de Jquery é utilizando a função css.

Logo para minimizar:

$("#chatMinimizar").click(function() {
    $("#chat").css("height", "45px"); //colocar a altura a 45px
}

Se quiser fazer a lógica de voltar a maximizar pelo mesmo botão pode utilizar um if para esse efeito, testando o valor que tem no momento, o que faz com que necessite apenas de um botão:

$("#chatMinimizar").click(function() {
    if ($("#chat").css("height") == "45px"){ //se está minimizado
        $("#chat").css("height", ""); //retira o que tinha, voltando ao inicial
    }
    else { //se maximizado
        $("#chat").css("height", "45px"); //minimiza aplicando 45px
    }
});

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .