views:

68

answers:

4

How do I do the following pseudo code in JQuery?

$(document).ready(function(){
    $(".btn-slide").click(function(){
        $("#divToSlide").slideToggle("fast");
        if ($(this).isToggled) {  // <---- DOESN'T WORK -------
            // do something when toggled
        } else {
            // do something different when not toggled
        }
    });  
});
A: 
$(document).ready(function(){
    $(".btn-slide").click(function(){
        if ('#divToSlide').is(':visible')) {
            // do something when toggled
        } else {
            // do something different when not toggled
        }
    });  
});
jAndy
missing a ")" ... and the ELSE statement doesn't work
Timj
I also tried *"if ($("#divToSlide").is(':visible')) {"* ... and the ELSE statement still doesn't work. Any ideas?
Timj
`$(this)` is referring to `$(".btn-slide")`.... hmmm...
Reigel
edited to #divToSlide
jAndy
That lacks the toggle part of the code though doesn't it?
SeanJA
Question: "How do I determine if a slideToggle has been toggled?"That is the answer to your original question, check the visible state of that element. done.
jAndy
But it is an animation, when will it be done?
SeanJA
you can also say, if ('#divToSlide').is(':animated')
jAndy
+1  A: 

Or you could just use the toggle function: http://api.jquery.com/toggle/

$('#target').toggle(function() {
    alert('First handler for .toggle() called.');
}, function() {
    alert('Second handler for .toggle() called.');
});

Note: You can have as many toggles as you want, just add more functions:

$('#target').toggle(function() {
    alert('1 handler for .toggle() called.');
}, function() {
    alert('2 handler for .toggle() called.');
}, function() {
    alert('3 handler for .toggle() called.');
}, function() {
    alert('4 handler for .toggle() called.');
}, function() {
    alert('5 handler for .toggle() called.');
});

[EDIT]

$('a.toggleButton').toggle(function() {
    $("#divToSlide").slideDown("fast");
    // do something when toggled
}, function() {
    $("#divToSlide").slideUp("fast");
    // do something when toggled    });
});
SeanJA
with due respect, but that was not the question. Or, it is completly missleading.
jAndy
How do I use your code since I'm using a SlideToggle on a click event?
Timj
toggle 1 would be slide down, and toggle 2 would be slide up in the first case.
SeanJA
I'm doing a SlideToggle, so wouldn't this be different than just a Toggle?
Timj
@jAndy: Fair enough, but he was looking for toggle functionality which this provides, so I believe that this would solve the problem that he is having
SeanJA
@jAndy , it seems that @Reigel agrees with me.
SeanJA
@SeanJA may I ask how did you know it was me?
Reigel
@Reigel I was commenting that your answer was similar to mine actually
SeanJA
+1  A: 

try:

$(document).ready(function(){
    $(".btn-slide").click(function(){
        $("#divToSlide").toggle(
        function() {  
            // do something when toggled
            $(this).slideUp();
        },
        function(){
            // do something different when not toggled
            $(this).slideDown();
        }
    );  
});
Reigel
this looks promising but I think some of the "}" and ")" are misplaced near the end
Timj
+1  A: 

Try using a callback function for slideToggle

$(document).ready(function(){
    $(".btn-slide").click(function(){
        $("#divToSlide").slideToggle("fast", function(){
            if ($(this).is(":visible")) {  // <---- DOESN'T WORK -------
            // do something when toggled
            }
            else {
            // do something different when not toggled
            }
        });
    });            
 });  
rahul