CODEWITHSUNDEEP
jquerycss
abcid d
abcid d

Reputation: 2953

JQuery Slide Down Not Pull All the Contain Down

I plan to to make a slide down NOT to pull the below container down, but it doesn't do so. I try to set the slide down layer on the top of the below container, so that when it is slide down, it will cover the below container, but some how it doesn't work.

Please give me a hand. Thank you!

Live Code

JS

$('#open').click(
        function()
            {
                $('#login form').slideToggle(600);
                $(this).toggleClass('close');
            }

    ) //end click

CSS

#login .close {

    background-color: rgb(110,138,195); 
}

#open:hover {
    color: rgb(0,0,0);
    background-color: rgb(110,138,195); 
}

#login form {
    padding: 10px 10px 10px 10px;
    display: none;  
    background-color: rgb(255,255,255);
}
#login label {
    display: inline-block;
    width: 100px;
    text-align:right;
    margin: 0 15px 0 0;
    color: rgb(58,80,123);
}
#login input {
    font-size: 14px;    
}
#login #button {
    margin-left: 50px;  
}
#open{color: red}
form{z-index:100}
.below{z-index:1}

HTML

<p></p>
<div id="login">
<p id="open">Login</p>
<form>
    <p>
        <label for="username">Username:</label>
        <input type="text" name="username" id="username">
    </p>
    <p>
        <label for="password">Password: </label>
        <input type="text" name="password" id="password">
    </p>
    <p>
        <input type="submit" name="button" id="button" value="Submit" >
    </p>
</form>
</div>
<p class="below">
    I remember writing a story about Halle Berry in college that included a mention of her abusive marriage. “Leave smoke” running away, she said at the time recounting her mother’s advice on handling men who mistreat women. For whatever reason, that quote always stuck with me especially as I learned of friends dealing with unhealthy relationships. Back then, I wondered why they stayed. But as I got older I began to understand, especially when I became one of those women who stayed waaaay past a relationship’s expiration date. And like many other women, I made excuses and didn’t know when enough was enough. Over time and with the help of friends and family who’ve been through similar situations, I learned the major deal breakers to look out for. Yes, we’re talking MAJOR. </p>

Upvotes: 2

Views: 91

Answers (3)

Fallenreaper
Fallenreaper

Reputation: 10682

You need do do like i had in this update: http://jsfiddle.net/ogv7fqmy/7/

I added in the css: div#login form { position: absolute;}

Upvotes: 1

Dhaval Marthak
Dhaval Marthak

Reputation: 17366

You need to set position css rule for form to make it stable. Try this

Demo

#login form {
    padding: 10px 10px 10px 10px; /* Remove */
    display: none;  
    background-color: rgb(255,255,255);
    position:absolute;  /* Added */
    left:0; /* Added */
    width:100%; /* Added */
}

Upvotes: 2

Mohamed-Yousef
Mohamed-Yousef

Reputation: 24001

you need to set your form to absolute position like so in css

#thisform{
    position:absolute;
}

see DEMO

Upvotes: 1

Related Questions