Question

I’m trying to get this code to work but I must be wrong somewhere.
I have a menu with several buttons. Each Button have a proper ID and different var.

If you click on a button, its var are sent to my “ChangePage” function

in my ChangePage function, there are several conditions, and if they match
then it launches animations on my page.

That’s the structure.

so I’m testing the thing now :

I have 2 buttons.

$(function() {


//This button triggers the slider   
$('#AddSliderButton').click(function() {
        var AddSlider = 1;
        $(this).click(PageChange);
    });

//This button removes the slider
$('#RemSliderButton').click(function() {
        var AddSlider = 0;
        $(this).click(PageChange);
    });


function PageChange() {
var Slider = 0;   //the slider is not opened by default

if (Slider == 1 && AddSlider == 0) { 
    //Remove slider
    $(".donotshow").fadeOut("slow");
    $("#slider").animate( {"height": "0%"}, "slow");
    $("#wrap-slider").css({"display": "inline"});
    var Slider = 0;
} 
else if (Slider == 0 && AddSlider == 1) {
    //Trigger Slider
    $("#wrap-slider").css({"display": "inline"});
    $(".donotshow").fadeIn("slow");
    $("#slider").animate( {"height": "100%"}, "slow");
    var Slider = 1;
}
else {
    //Do Nothing
    var Slider = 0;
}
}
});

I am wondering why my buttons do not call the PageChange function ?
Thanks a lot

Answer 1

You can define both AddSlider & Slider as global variable.

$(function() {

var AddSlider;
var Slider = 0;

//This button triggers the slider   
$('#AddSliderButton').click(function() {
        AddSlider = 1;
        PageChange();
    });

//This button removes the slider
$('#RemSliderButton').click(function() {
        AddSlider = 0;
        PageChange();
    });


function PageChange() {

   if (Slider == 1 && AddSlider == 0) { 
    //Remove slider
    $(".donotshow").fadeOut("slow");
    $("#slider").animate( {"height": "0%"}, "slow");
    $("#wrap-slider").css({"display": "inline"});
    Slider = 0;
   } 
   else if (Slider == 0 && AddSlider == 1) {
    //Trigger Slider
    $("#wrap-slider").css({"display": "inline"});
    $(".donotshow").fadeIn("slow");
    $("#slider").animate( {"height": "100%"}, "slow");
    Slider = 1;
   }
   else {
    //Do Nothing
    Slider = 0;
   }
 }
});