JQuery toggle is hiding the div element

Question

I\'m having some trouble with developing an expand-shrink toggle div.

My goal is to click the div and make it bigger, clicking it again and get it back to the original h

Answer 1

jQuery toggle shows or hides an element, it doesn't toggle a function.

To toggle height like you would like to, it would probably be best to introduce a new CSS class into your CSS file and use jQuery toggleClass to either add or remove the class. So:

JS changes to this:

$(document).ready(function () {
    $(".noticia").toggleClass('large');
});

CSS addition of class:

.noticia.large {
    height: 600px;
}

Answer 2

toggle() (Event) event is deprecated in jQuery 1.8 and removed in jQuery 1.9.

Current .toggle() function changes the state of the element.

---

$(document).ready(function () {
    $(".noticia").click(function(){
        $(this).css('height', $(this).css('height') == "420px" ? "600px" : "420px");
    });
});