I'm trying to make one button that has two functions whether it has class in it or not when clicked. So I tried to make javascript code using if else statement. I don't see what the problem is, but the button is not working..
$(document).ready(function() {
$(".btn-ctrl").click(function() {
if ($(".btn-ctrl > span").hasClass("close")) {
function popDown() {
$("#banner").slideDown(400);
$(".btn-ctrl > span").removeClass("close");
}
} else {
function popUp() {
$("#banner").slideUp(400);
$(".btn-ctrl > span").addClass("close");
}
}
})
})
.btn-ctrl is class name for my button and I'm changing the button's design by adding and removing class="close" in span tag. I can't figure out what is causing problem
You create functions inside the condition instead of calling them. Blame functions outside the condition block and then call them or remove them altogether. And before you write anything, read the syntax of the language.
$(document).ready(function() {
$(".btn-ctrl").click(function() {
console.log('click')
if ($(".btn-ctrl > span").hasClass("close")) {
$("#banner").slideDown(400);
$(".btn-ctrl > span").removeClass("close");
} else {
$("#banner").slideUp(400);
$(".btn-ctrl > span").addClass("close");
}
})
})
or
function popDown() {
$("#banner").slideDown(400);
$(".btn-ctrl > span").removeClass("close");
}
function popUp() {
$("#banner").slideUp(400);
$(".btn-ctrl > span").addClass("close");
}
$(document).ready(function() {
$(".btn-ctrl").click(function() {
console.log('click')
if ($(".btn-ctrl > span").hasClass("close")) {
popDown();
} else {
popUp();
}
})
})