What is wrong with this Jquery function, help
-
19-09-2019 - |
Question
$(function() {
$("table.section thead").click(function() {
if ($(this).next("table.section tbody").style.display == "block"){
$(this).next("table.section tbody").slideUp("slow");
}
if ($(this).next("table.section tbody").style.display == "none"){
$(this).next("table.section tbody").slideDown("slow");
}
});
});
I dont know how to achieve this, any help would be very much appreciated.
UPDATE:
I was trying to use the following function.
$(function() {
$("table.section thead").click(function() {
$(this).next("table.section tbody").slideToggle("slow");
});
});
Which it giving me a problem, (when thead it collapse and you click on it, it expands and then collapse again, so it would always be collapse). That is why I am trying to get the function at the top.
Solution
Use the visible selector in this case:
$(function() {
$("table.section thead").click(function() {
var body = $(this).next("table.section tbody");
if (body.is(":visible"))
body.slideUp("slow");
else
body.slideDown("slow");
});
});
But probably much simpler just use .slideToggle()
like this:
$(function() {
$("table.section thead").click(function() {
$(this).next("table.section tbody").slideToggle("slow");
});
});
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow