Hide and show a div not working, the element changes its property When I use console.log() but not showing

jquery
javascript check if element is visible in viewport
javascript check if element is visible on screen
javascript check if element is display:none
check if element is hidden javascript
jquery addattr
angular check if element is visible on screen
jquery migrate

I'm using ASP.NetCore 2.0 got a view and I'm trying to show and hide an element when the user uses a toggle button but I really don't know what's happening

My HTML:

<div class="row" id="ToggleClasificarIVA">
                        <div class="col-md-12 col-sm-12 col-xs-12">
                            <div class="form-check has-success">
                                <label class="control-label">Clasificar Impuesto al valor agregado</label>
                                <div class="switch">
                                    <label>
                                        <input type="checkbox" id="ClasificarIvaToggle" ><span class="lever"></span>
                                    </label>
                                </div>
                            </div>

                        </div>
                    </div>



                    <div class="row" id="CodigoActividadDropdown" style="display:none">
                        <div class="col-md-12 col-sm-12 col-xs-12">
                            <div class="form-group has-success">
                                <label class="control-label">Codigo de Actividad</label>
                                <select class="form-control custom-select">
                                    <option value="0">---Seleccione---</option>
                                    <option value="1">Cedula Fisica</option>
                                    <option value="2">Cedula Juridica</option>
                                    <option value="3">Dimex</option>
                                    <option value="4">Nite</option>
                                </select>
                            </div>
                        </div>
                    </div>

And my JS:

$('#ClasificarIvaToggle').click(function () {
    if (this.checked) {
        $('#CodigoActividadDropdown').css("display", "block");
        alert("Checekado")
        console.log(document.getElementById("CodigoActividadDropdown"))
    }
    else {
        $('#CodigoActividadDropdown').css("display", "none");
        alert("UnChecekado")
        console.log(document.getElementById("CodigoActividadDropdown"))

    }
});

I've tryed to use :

$('#ClasificarIvaToggle').click(function () {
if (this.checked) {
    $('#CodigoActividadDropdown').css("display", "block");
    alert("Checekado")
}
else {
    $('#CodigoActividadDropdown').css("display", "none");
    alert("UnChecekado")

}
});

Also:

$('#ClasificarIvaToggle').change(function () {
if (this.checked) {
    $('#CodigoActividadDropdown').fadeIn('slow');
}
else {
    $('#CodigoActividadDropdown').fadeOut('slow');
}

});

Even with js only:

document.getElementById("ClasificarIvaToggle").onclick = function () {
    if (this.checked) {
        document.getElementById("CodigoActividadDropdown").style.display = "block";
    }
    else {
        document.getElementById("CodigoActividadDropdown").style.display = "none";
    }
}

When I log the element with console.log(getElementByID("")), I can see the element changing the display property but it's not showing in my document.

Try this one:

    $(document).ready(function() {
       $('#ClasificarIvaToggle'). change(function () {
         if (this.checked) {
             $('#CodigoActividadDropdown').hide();

           }
           else {
                 $('#CodigoActividadDropdown').show();
           }
           });
      });

How To Find Out if an Element is Hidden, Reference HTML Color Reference HTML Attribute Reference HTML Canvas Reference HTML SVG Reference If the <div> element is hidden, do something: function myFunction() { Try it Yourself �. Note: When an element is hidden with display:none (like in the example above), the element will not take up any space. To hide an element, set the style display property to “none”. document.getElementById("element").style.display = "none"; To show an element, set the style display property to “block”. document.getElementById("element").style.display = "block"; Steps to show the working of style display property: Create some div and assign them an id or

I used exactly what you provided and it works on JSfiddle. https://jsfiddle.net/fnchz375/

$('#ClasificarIvaToggle').click(function () {
if (this.checked) {
    $('#CodigoActividadDropdown').css("display", "block");
    alert("Checekado")
    console.log(document.getElementById("CodigoActividadDropdown"))
}
else {
    $('#CodigoActividadDropdown').css("display", "none");
    alert("UnChecekado")
    console.log(document.getElementById("CodigoActividadDropdown"))

}

});

Could you provide any logs/error from console you are getting. Also, feel free to try example on jsfiddle.

.removeAttr(), removeAttr() method uses the JavaScript removeAttribute() function, but it has the advantage of being console.log( "onclick property: ", $element[ 0 ].onclick );� Fullscreen Video Modal Boxes Delete Modal Timeline Scroll Indicator Progress Bars Skill Bar Range Sliders Tooltips Display Element Hover Popups Collapsible Calendar HTML Includes To Do List Loaders Star Rating User Rating Overlay Effect Contact Chips Cards Flip Card Profile Card Product Card Alerts Callout Notes Labels Circles Style HR Coupon

Try this once, this should not be failed :)

jQuery('body').on('change','#ClasificarIvaToggle',function(){

    if(jQuery(this).is(":checked"))
    {
        jQuery(this).parents("#ToggleClasificarIVA").find("#CodigoActividadDropdown").show();
    }
    else
    {
        jQuery(this).parents("#ToggleClasificarIVA").find("#CodigoActividadDropdown").hide();
    }
});

jQuery Core 3.0 Upgrade Guide, Breaking change: .show(), .hide(), and .toggle() methods now respect more Version 3.0 of the jQuery Migrate Plugin does not warn about or restore the Migrate plugin includes console log output to warn when specific deprecated Deprecated: This feature or API is still present in jQuery 3.0, but its use is discouraged. A simple if-else condition in your JS code will do the trick. In the above example, I am changing the element’s display property on button click.. You can further simplify the above code using a ternary operator.

3.0, Changing the text and the style properties of fields. In ProcessMaker 3, however, Dynaforms are built using DIVs that can have up to 12 columns. It is NOT recommended use the DOM object because some DOM methods such as code is to use the window.console.log() method to display variables and messages in� Hide and Show Element Using jQuery focus. focus event is use on some input HTML element that notify the HTML input gains focus .you can also handle focus event using CSS. I am using focus jQuery event to hide and show element.You can use show help information whenever user focus element and hide information if not user focus element.

A Guide to Console Commands, If there are differences in the properties of the console object from one browser to Chrome console showing debug, error, info, log, and warn For example, console.debug() is not color-coded and console.info() has an is that the browsers provide filtering options to show or hide each type as you wish. The display Property. The display property specifies if/how an element is displayed. Every HTML element has a default display value depending on what type of element it is. The default display value for most elements is block or inline. Click to show panel

Magnific Popup Documentation, 1) Create a HTML element that you wish to display in popup and add it somewhere. Class mfp-hide is required to hide the popup from the page. <div id= "test� One such useful event is on show or hide of an element. Lets say we want to add a handler when a particular DIV is shown. Although this is not implicitly present in JQuery, we can still achieve this by writing a custom code that triggers the show/hide event when a DIV visibility is changed.

Comments
  • Was it working before and it is not working now? Or is it just not working and you need some debugging?
  • It never worked :(, need some debugging I've been on this issue for two hours
  • It didn't work, but I appreciate it a lot, thanks!!