Expand a div on click

jquery asp.net html css

13,795

something like this. jsfiddle: http://jsfiddle.net/4L5fw/2/

html:

<div class="wrapper">
    <div class="black"></div>
    <div class="blue "></div>
    <div class="red"></div>
    <div class="green"></div>
</div>

css:

.wrapper{
    width: 500px;
    height: 500px;
}
.black{
    width: 250px;
    height: 50px;
    background: black;
}
.blue{
    width: 250px;
    height: 250px;
    background: blue;
}

.red{
    width: 250px;
    height: 250px;
    background: red;
}
.green{
    width: 250px;
    height: 250px;
    background: green;
}

div{
    float: left;
}


.active{
    height: 100%;
    width: 100%;
}

.hide{
    display: none;
}

jquery:

$(document).ready(function(){
    $('.wrapper div').click(function() {
        $(this).toggleClass('active');
        $(this).siblings().not(this).toggleClass('hide');
    });
});

13,795

Author by

writeToBhuwan

I am a nerd from India. Languages: Javascript, ASP.net,Node.js, C#

Updated on June 18, 2022

Comments

writeToBhuwan almost 2 years

My problem is fairly simple for many of you. I want to expand the div(onClick) to fit the outer div and it should completely cover all the other three divs.(not fullscreen)

I am trying to do this using the following code but the entire structure of page gets disturbed when i try to do this.

<head runat="server">
<title>Untitled Page</title>
<link href="css/jquery-ui.css" rel="stylesheet" type="text/css" />

<script src="js/jquery-1.8.1.min.js" type="text/javascript"></script>

<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js" type="text/javascript"></script>

<style type="text/css">
    .toggler
    {
        max-width: 500px;
        max-height: 270px;
        position: relative;
    }
    .newClass
    {
        height: 500px;
        width: 290px;
        display: inline-block;
        z-index: 10000px;
        float: left;

    }

    .divClass
    {
        float: left;
        vertical-align: middle;
        height: 50px;
        width: 500px;
    }
</style>

<script type="text/javascript">
$(document).ready(function(){
    $('#div1').click(function() {
    $('#div1').toggleClass('newClass');
    });
    });
</script>

</head>
<body>
<form id="form1" runat="server">
<table width="100%">
    <tr style="height: 100%;">
        <td style="width: 30%; height: 500px;">
        </td>
        <td style="width: 70%; height: 500px;">
            <div style="width: 100%; height: 500px;">
                <table style="height: 500px; width: 100%;">
                    <tr>
                        <td class="toggler">
                            <div id="div1" style="background-color: Black;">
                                Hello World!
                            </div>
                        </td>
                        <td style="width: 50%" class="toggler">
                            <div id="div2" style="background-color: Blue; width: 100%; height: 100%;">
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td style="width: 50%" class="toggler">
                            <div id="div3" style="background-color: Red; width: 100%; height: 100%;">
                            </div>
                        </td>
                        <td style="width: 50%" class="toggler">
                            <div id="div4" style="background-color: Maroon; width: 100%; height: 100%;">
                            </div>
                        </td>
                    </tr>
                </table>
            </div>
        </td>
    </tr>
</table>
</form>

What exactly is the problem with my code???? please help..

Note: I've also tried addClass and removeClass methods.. No good results...

Sven Bieder over 11 years

When you use jQuery, why don't you simply use .toggle() instead of making it unneeded complicated by changing a class back and forth?
writeToBhuwan over 11 years

How can i use that? Without changing the class?? actually, i didnt really get you! :(
writeToBhuwan over 11 years

and @malkassem... the whole table structure gets disturbed when i click on the div.. i dont want that.. i want to resize the smaller div to full size div.. covering all other three divs..
writeToBhuwan over 11 years

Thank you man.. The best and the most optimised code I've ever seen..! Thank a lot..!