CODEWITHSUNDEEP
javascriptjquery
Sebastian
Sebastian

Reputation: 3628

Some child elements not hiding on $('#div').hide()

Here is my div with lots of child elements:

<div class="text-center welcome">
    <!--<p class="lead">You haven't added any feeds. Click <a href=#>here</a> to browse them.</p>-->
    <h1 id="welcome">Welcome to Shopaholic</h1>
        <!-- Sign up container -->
        <div class="signup-container">
            <div id="output"></div>
                <div class="form-box">
                    <form id="signup-form" action="" method="POST">
                        <input name="signupEmail" type="email" class="form-control" id="signupEmail" placeholder="Email address">
                        <input name="signupPassword" type="password" class="form-control" id="signupPassword" placeholder="Password">
                        <input name="signupPassword2" type="password" class="form-control" id="signupPassword2" placeholder="Password">
                        <select name="signupCountry" id="signupCountry" class="selectpicker">
                            <option value="0">Country</option>
                            <option value="United States">United States</option>
                            <option value="United Kingdom">United Kingdom</option>
                            <option>Canada</option>
                        </select>
                        <select name="signupGender" id="signupGender" class="selectpicker">
                            <option value="0">Gender</option>
                            <option value="f">Female</option>
                            <option value="m">Male</option>
                        </select>
                        <button id="signup" class="btn btn-success btn-block signup" type="submit">Sign up</button>
                    </form>
                    <p class="response-text" id="signup-response"></p>
                </div>
            </div>
        </div>
        <!-- Login container -->
        <div class="login-container">
            <div id="output"></div>
                <div class="form-box">
                    <form id="login-form" action="" method="">
                        <input type="email" class="form-control" name="loginEmail" id="loginEmail" placeholder="Email address">
                        <input type="password" class="form-control" name="loginPassword" id="loginPassword" placeholder="Password">
                        <button id="login" type="submit" class="btn btn-info btn-block login">Log in</button>
                    </form>
                    <p class="response-text" id="login-response"></p>
                </div>
            </div>
        </div>
    <p class="text-center"><a id="login_link" href=#>Already registered?</a><a id="signup_link" href=#>New user?</a></p>
    <p class="text-center" id="forgotten"><a href=#>Forgot your password?</a></p>
</div>

However, when I run $('.welcome').hide();, everything after the line that says <!-- Login container --> still shows. Any idea why that might be?

Upvotes: 0

Views: 129

Answers (1)

zeantsoi
zeantsoi

Reputation: 26193

Remove the closing </div> immediately preceding <!-- Login container -->; you're prematurely closing your <div> content. I looks like you've accidentally indented your code following the <h1> tag on line 2.

Correctly indented, you code should look like this:

<div class="text-center welcome">
    <h1 id="welcome">Welcome to Shopaholic</h1>
    <!-- Sign up container -->
    <div class="signup-container">
        <div id="output"></div>
        <div class="form-box">
            <form id="signup-form" action="" method="POST">
                <input name="signupEmail" type="email" class="form-control" id="signupEmail" placeholder="Email address">
                <input name="signupPassword" type="password" class="form-control" id="signupPassword" placeholder="Password">
                <input name="signupPassword2" type="password" class="form-control" id="signupPassword2" placeholder="Password">
                <select name="signupCountry" id="signupCountry" class="selectpicker">
                    <option value="0">Country</option>
                    <option value="United States">United States</option>
                    <option value="United Kingdom">United Kingdom</option>
                    <option>Canada</option>
                </select>
                <select name="signupGender" id="signupGender" class="selectpicker">
                    <option value="0">Gender</option>
                    <option value="f">Female</option>
                    <option value="m">Male</option>
                </select>
                <button id="signup" class="btn btn-success btn-block signup" type="submit">Sign up</button>
            </form>
            <p class="response-text" id="signup-response"></p>
        </div>
    </div>
    <!-- Login container -->
    <div class="login-container">
        <div id="output"></div>
        <div class="form-box">
            <form id="login-form" action="" method="">
                <input type="email" class="form-control" name="loginEmail" id="loginEmail" placeholder="Email address">
                <input type="password" class="form-control" name="loginPassword" id="loginPassword" placeholder="Password">
                <button id="login" type="submit" class="btn btn-info btn-block login">Log in</button>
            </form>
            <p class="response-text" id="login-response"></p>
        </div>
    </div>
    <p class="text-center"><a id="login_link" href=#>Already registered?</a><a id="signup_link" href=#>New user?</a></p>
    <p class="text-center" id="forgotten"><a href=#>Forgot your password?</a></p>
</div>

Upvotes: 1

Related Questions