DIV clicks using JQuery

Question

I am facing a problem with DIV clicks using JQuery. Need advise on this issue.

I have three DIV elements in my html as follows,

<html>
<body>
<div id="overviewContainer">
    <div id="firstContainer"></div>
    <div id="secondContainer"></div>
</div>
</body>
</html>

My requirement is,

1)When I click on firstContainer, the secondContainer must disappear and my firstContainer should expand and occupy the space of the secondContainer.

2)When I again click on firstContainer, the secondContainer must appear and my firstContainer should shrink to the original position and leave space for secondContainer.

For this, I have written the following jQuery code

$(function() {
        var firstContainerMaximized = false;
        alert("Jquery invoked");    
            $('#firstContainer').click(function(e) {
                //var firstContainerMaximized = firstContainerMaximized;
                        alert("fist container clicked");
                        if( firstContainerMaximized == false ) {
                            alert("maximizing clicked");
                            firstContainerMaximized = true;
                            $('#secondContainer').hide(); //hide the 2nd container.
                            $(this).css({ //modify the 1st container
                                "right":"1%"                    
                            });
                        } else if( firstContainerMaximized == true ) {
                            alert("minimizing clicked");
                            firstContainerMaximized == false;
                            $('#secondContainer').show(); //show the 2nd container.
                            $(this).css({ //modify the 1st container
                                "right":"49%"                   
                            });
                        }
            });

            $('#secondContainer').click(function(e) {  
                        alert("second container clicked");
                });
        });

The logic works for first 2 clicks. That is, when I first click my firstContainer, the variable firstContainerMaximized was set to FALSE and my firstContainer expands as expected.

When I click on firstContainer 2nd time, the variable firstContainerMaximized was set to TRUE and my firstContainer shrinks as expected.

But when I click on firstContainer from 3rd time onwards, the variable firstContainerMaximized always set to TRUE. It is not expanding again as expected.

Kindly advise where I am going wrong here?

Is there any alternative design available to meet my requirement??

in the else if: check the second "firstContainerMaximized == false;" it's a conditional, not setting a value — KellyCode
– KellyCode, Commented Oct 4, 2014 at 11:11
@kellycode well, you've got sharp eyes. I missed it out.. Why don't you answer? — Amit Joki
– Amit Joki, Commented Oct 4, 2014 at 11:12

leandroxbr · Accepted Answer · 2014-10-04 14:24:30Z

It will be easier and cleaner if you use jQuery .bind() and control the 'expanded content' by adding and removing a .class

So you would end up with something like this

HTML

<body>
<div id="overviewContainer">
    <div id="firstContainer">first container</div>
    <div id="secondContainer">second container</div>
</div>
</body>

CSS

#firstContainer{
    background: orange;
    padding: 20px;
    height: 50%;
}
#secondContainer{
    background: green;
    padding:20px;
    height: 50%;
}
#overviewContainer{
    background: red;
    height: 200px;
}
#firstContainer.maximized{
    height:100%;
}

JAVASCRIPT

$('#firstContainer').bind('click',function(e) {
    var $firstContainer = $(this);
    var $secondContainer = $('#secondContainer');
    var $firstContainerMaximized = $('#firstContainer.maximized');
    if( $firstContainerMaximized.length == 0 ) {                        
        $secondContainer.hide(); //hide the 2nd container.
        $firstContainer.addClass('maximized');
    } else {
        $secondContainer.show(); //show the 2nd container.
        $firstContainer.removeClass('maximized');
    }
});
$('#secondContainer').click(function(e) {  
    alert("second container clicked");
});

Here's also a link with a fiddle working code. I decided to add some css to make it easier to see.

ps: The Javascript can still be simplified.

I hope it helps :)

Amit Joki · Accepted Answer · 2014-10-04 11:19:32Z

0

As pointed by @kellycode, you are not using the assignment operator = instead you're using conditional operator ==, which evaluates to true or false

So, change that firstContainerMaximized == false; to firstContainerMaximized = false;

answered Oct 4, 2014 at 11:19

Amit Joki

59.4k7 gold badges80 silver badges96 bronze badges

Comments

Shikhar · Accepted Answer · 2014-10-04 11:46:29Z

0

That's because you are not setting the firstContainerMaximized variable properly. Correct that and it'll work.

Problem: firstContainerMaximized == false;
Solution: firstContainerMaximized = false;

edited Oct 4, 2014 at 11:46

answered Oct 4, 2014 at 11:41

Shikhar

1,4411 gold badge12 silver badges17 bronze badges

Collectives™ on Stack Overflow

DIV clicks using JQuery

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related