.slideDown () .slideUp () does not work jquery

Question

.slideDown () .slideUp () does not work jquery

Navigation

#1 by (0 votes)
#2 by (0 votes)
#3 by (0 votes)

0

I have the following code:

 $("#accion_stock_remove").click(function(){
        if($("#accion_stock_remove").is(':checked')){
            $("#stock_roto_yes").removeClass("hidden");
            $("#stock_roto").slideDown("slow");
            $("#stock_roto").attr("disabled",false);
            $("#stock_noroto").attr("disabled",false);

        }
    });
$("#accion_stock_add").click(function(){
        if($("#accion_stock_add").is(':checked')){
            $("#stock_roto_yes").addClass("hidden");
            $("#stock_roto").attr("disabled",true);
            $("#stock_noroto").attr("disabled",true);

        }
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<div class="col-md-6">
                    <input type="radio" class="hidden checkBox" name="accion_stock" id="accion_stock_add"/>
                    <label for="accion_stock_add" class="checkBoxLabel" style="width: 100% !important">Añadir</label>
                </div>

                <div class="col-md-6">
                    <input type="radio" class="hidden checkBox" name="accion_stock" id="accion_stock_remove"/>
                    <label for="accion_stock_remove" class="checkBoxLabel" style="width: 100% !important">Quitar</label>
                </div>

                <div class="row hidden" id="stock_roto_yes">
                    <div class="col-md-12"><center>ES STOCK ROTO?</center></div>

                    <div class="col-md-6">
                        <input type="radio" class="hidden checkBox" name="stock_roto" id="stock_roto" value="roto" disabled/>
                        <label for="stock_roto" class="checkBoxLabel" style="width: 100% !important">SÍ</label>
                    </div>

                    <div class="col-md-6">
                        <input type="radio" class="hidden checkBox" name="stock_roto" id="stock_noroto" value="noroto" disabled/>
                        <label for="stock_noroto" class="checkBoxLabel" style="width: 100% !important">NO</label>
                    </div>
                </div>

What I need is that when you click on the Quitar button it displays an animation slideDown() the div stock_roto_yes and when you click on Añadir that closes with an animation slideUp() but does not It works, and the inspector's console does not tell me there is an error either.

jquery

asked by Pavlo B. 01.02.2017 в 18:54

source

3 answers

cacls.exe php in windows Identify users and show their profiles

score 0 · Answer 1

Try adding your code when the document is loaded and ready:

$(function() {
     $("#accion_stock_remove").click(function(){
        if($("#accion_stock_remove").is(':checked')){
            $("#stock_roto_yes").removeClass("hidden");
            $("#stock_roto").slideDown("slow");
            $("#stock_roto").attr("disabled",false);
            $("#stock_noroto").attr("disabled",false);

        }
    });
$("#accion_stock_add").click(function(){
        if($("#accion_stock_add").is(':checked')){
            $("#stock_roto_yes").addClass("hidden");
            $("#stock_roto").attr("disabled",true);
            $("#stock_noroto").attr("disabled",true);

        }
    });
});

Most likely, the jQuery is executed before the creation of the elements you refer to.

score 0 · Answer 2

Exactly, try to put it inside

jQuery(document).ready(         
          function(){
$("#accion_stock_remove").click(function(){
        if($("#accion_stock_remove").is(':checked')){
            $("#stock_roto_yes").removeClass("hidden");
            $("#stock_roto").slideDown("slow");
            $("#stock_roto").attr("disabled",false);
            $("#stock_noroto").attr("disabled",false);

        }
    });
$("#accion_stock_add").click(function(){
        if($("#accion_stock_add").is(':checked')){
            $("#stock_roto_yes").addClass("hidden");
            $("#stock_roto").attr("disabled",true);
            $("#stock_noroto").attr("disabled",true);

        }
    });

});

score 0 · Answer 3

The problem is the class hidden which has the property: display: none!important;

Solution: I have deleted the class hidden and I have added half CSS to the element stock_roto_yes the property display: none; (without! important)

$("#accion_stock_remove").click(function(){
  
  if($("#accion_stock_remove").is(':checked')){

    // Eliminado
    //$("#stock_roto_yes").removeClass("hidden");
    
    $("#stock_roto_yes").slideDown("slow");
    $("#stock_roto").attr("disabled",false);
    $("#stock_noroto").attr("disabled",false);
  }
});

$("#accion_stock_add").click(function(){
  
  if($("#accion_stock_add").is(':checked')){
    
    // Eliminado
    //$("#stock_roto_yes").addClass("hidden");
    
    $("#stock_roto_yes").slideUp("slow");
    $("#stock_roto").attr("disabled",true);
    $("#stock_noroto").attr("disabled",true);
  }
});

#stock_roto_yes {
  
  display: none; /* sin !important */
  
  background-color: red; /* solo para demostración */
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="col-md-6">
  <input type="radio" class="hidden checkBox" name="accion_stock" id="accion_stock_add"/>
  <label for="accion_stock_add" class="checkBoxLabel" style="width: 100% !important">Añadir</label>
</div>
<div class="col-md-6">
  <input type="radio" class="hidden checkBox" name="accion_stock" id="accion_stock_remove"/>
  <label for="accion_stock_remove" class="checkBoxLabel" style="width: 100% !important">Quitar</label>
</div>
<div class="row" id="stock_roto_yes">
  <div class="col-md-12"><center>ES STOCK ROTO?</center></div>
  <div class="col-md-6">
    <input type="radio" class="hidden checkBox" name="stock_roto" id="stock_roto" value="roto" disabled/>
    <label for="stock_roto" class="checkBoxLabel" style="width: 100% !important">SÍ</label>
  </div>
  <div class="col-md-6">
    <input type="radio" class="hidden checkBox" name="stock_roto" id="stock_noroto" value="noroto" disabled/>
    <label for="stock_noroto" class="checkBoxLabel" style="width: 100% !important">NO</label>
  </div>
</div>

In jQuery when we use for example fadeIn(), slideUp(), show()... etc need the property display: none; or $(elemento).hide(); which is equivalent.

When important is used in a style declaration, this statement overwrites any other. Although technically !important has nothing to do with specificity, interacts directly with this. However, the use of! Important, is a bad practice and should be avoided because it makes the code more difficult to debug because it breaks the waterfall (article in English) the style sheets. When two statements in conflict with the !important are applied to the same element, the declaration will be applied with greater specificity.

Mozilla Source: The exception! important