Jquery add and remove attribute not working

Question

Jquery add and remove attribute not working

Navigation

#1 by (1 votes)

0

I'm trying to create a way to minimize and maximize a DIV. Minimize works, but maximize does not.

What am I doing wrong?

$("#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><scriptsrc="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>

javascript html jquery html5 script

asked by anonymous 25.07.2017 / 23:17

1 answer

Retrofit JSON - Error Expected BEGIN_ARRAY but was BEGIN_OBJECT [duplicate] banner image is on the right side

score 1 · Answer 1

The correct way to modify the css through Jquery is to use the css function.

Logo to minimize:

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

If you want to re-maximize the logic with the same button, you can use if for this purpose by testing the value you currently have, which means you only need one button:

$("#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
    }
});