Jquery add and remove attribute not working

Asked

Viewed 478 times

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>
<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>

javascript jquery html html5 script

  • $("#chat").css("height", "45px");

  • Try to change .click(...) for .on("click", ...).

  • There is a difference between attribute and property. It is rarely necessary to change the value of an attribute.

  • Thanks for the tip, but the problem is when you click minimize. When the window is open and you click minimize, it’s changing the field ID to chatMaximize, but this not recognizing this in the ID.

  • Not even the simple Alert I put to test runs.

  • You can help me @bfavaretto?

  • Can you help me @Andersoncarloswoss?

Show 2 more comments

1 answer

1

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

Soon to minimize:

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

If you want to make the logic of re-maximizing by the same button you can use a if for this purpose by testing the value it has at the moment, which makes it only need a 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
    }
});

Browser other questions tagged javascript jquery html html5 script

You are not signed in. Login or sign up in order to post.