Question

I’m having (a probably unnecessary) amount of trouble with a simple bit of code. I have 3 images, that when clicked open one of three divs below. I simply want to be able to cancel the toggle on any previously opened divs so that only one can be open at any given time.

At the moment, the problem is that when one of the buttons is clicked a second time, nothing happens as it is cancelling out the toggle, rather than opening the div. As you can probably tell from my terrible wording, I’m fairly new to this, so be kind!

The css is set so that the divs have a height and opacity of 0 to begin with.

Code:

$(document).ready(function() {
    $("#picone").toggle(function() {
        $("#divone").animate({
            height: 400,
            opacity: 1
        }, 500);
        $("#divtwo, #divthree").animate({
            height: 0,
            opacity: 0
        }, 500);
    }, function() {
        $("#divone").animate({
            height: 0,
            opacity: 0
        }, 500);
        $("#divtwo, #divthree").animate({
            height: 0,
            opacity: 0
        }, 500);
    });
});

$(document).ready(function() {
    $("#pictwo").toggle(function() {
        $("#divtwo").animate({
            height: 400,
            opacity: 1
        }, 500);
        $("#divone, #divthree").animate({
            height: 0,
            opacity: 0
        }, 500);
    }, function() {
        $("#divtwo").animate({
            height: 0,
            opacity: 0
        }, 500);
        $("#divone, #divthree").animate({
            height: 0,
            opacity: 0
        }, 500);
    });
});

$(document).ready(function() {
    $("#picthree").toggle(function() {
        $("#divthree").animate({
            height: 400,
            opacity: 1
        }, 500);
        $("#divone, #divtwo").animate({
            height: 0,
            opacity: 0
        }, 500);
    }, function() {
        $("#divthree").animate({
            height: 0,
            opacity: 0
        }, 500);
        $("#divone, #divtwo").animate({
            height: 0,
            opacity: 0
        }, 500);
    });
});

Thanks 🙂

Answer 1

Thanks for the feedback guys.

As it turns out, the toggle feature wasn’t what I wanted anyway. I removed the extra

$(document).ready(function(){

like @hsalama suggested, and binned the

.toggle

event like @François Wahl suggested.

Here’s how it ended up:

$(document).ready(function(){
    $("#picone").click(function() {
        $("#divone").animate(
            {height:300, opacity:1}, 500
        );
        $("#divtwo, #divthree").animate(
            {height:0, opacity:0}, 500
        );
    });

    $("#pictwo").click(function() {
        $("#divtwo").animate(
            {height:300, opacity:1}, 500
        );
        $("#divone, #divthree").animate(
            {height:0, opacity:0}, 500
        );
    });

    $("#picthree").click(function() {
        $("#divthree").animate(
            {height:300, opacity:1}, 500
        );
        $("#divone, #divtwo").animate(
            {height:0, opacity:0}, 500
        );
    });
});

Thanks guys 🙂