Jquery toggle an element

toggle is a method which is used to show and hide the selected class. if select element is hidden then on toggle it will show element.
If element is not hidden on toggle it will hide the element.

<div class="description">

<h1>Photography</h1>

    
Photography is the science, art and practice of creating durable images by recording light or other electromagnetic radiation, either electronically by means of an image sensor, or chemically by means of a light-sensitive material such as photographic film.
</div>

<input type="submit" value="Toggle" id="toggle">

<h1>Photography</h1>

Photography is the science, art and practice of creating durable images by recording light or other electromagnetic radiation, either electronically by means of an image sensor, or chemically by means of a light-sensitive material such as photographic film.

</div>

$(document).ready(function () {
    $(document).on('click', '#toggle', function (event) {
        $(".description").toggle();
    });
});

$(document).ready(function () {

$(document).on('click', '#toggle', function (event) {

$(".description").toggle();

});

Output

We can also specify the toggle time and function to perform task of toggle done

$(document).ready(function () {
    $(document).on('click', '#toggle', function (event) {
        $(".description").toggle(2000,function (event) {
            alert("toggle done");
        });
    });
});

$(document).ready(function () {

$(document).on('click', '#toggle', function (event) {

$(".description").toggle(2000,function (event) {

alert("toggle done");

});

Output