This code shows frm01:
$(document).ready(function() {
$("#reg").click(function () {
$("#frm01").show("slide", { direction: "down" }, 1000);
});
});
But I want to hide frm01 if it is allready visible, and vice versa. How could I do this, please ?
Add a comment
|
4 Answers
Try jQuery's toggle() method:
$(function() {
$("#reg").click(function () {
$("#frm01").toggle(1000);
});
});
You don't need jQuery to use if-else statements; Javascript implements those natively...
$(function() {
$("#reg").click(function () {
if ($("#frm01").is(":visible"))
$("#frm01").slideUp(1000);
else
$("#frm01").slideDown(1000);
});
});
Comments
try this:
$(document).ready(function() {
$("#reg").click(function () {
if ($("#frm01").is(':hidden')) {
$("#frm01").show("slide", { direction: "down" }, 1000);
} else {
$("#frm01").hide(1000);
}
});
});
Comments
$("#reg").on('click', function () {
$("#frm01:hidden").show("slide", { direction: "down" }, 1000);
$("#frm01:visible").hide("slide", { direction: "up" }, 1000);
});
or
$("#reg").toggle(
function () {
$("#frm01").show("slide", { direction: "down" }, 1000);
},
function(){
$("#frm01").hide("slide", { direction: "up" }, 1000);
}
);
should also work
Comments
You can use $.toggle() method to show and hide. Some time need to identify whether elements are hide or show.
$("#reg").click(function () {
if($("#frm01").hasClass('fram1-slide-on')){
$("#frm01").hide();
$("#frm01").removeClass('fram1-slide-on');
} else {
$("#frm01").show("slide", { direction: "down" }, 1000);
$("#frm01").addClass('fram1-slide-on');
}
});
Comments
