CODEWITHSUNDEEP
cssvisibility
Nintendraw
Nintendraw

Reputation: 147

Hide parent, display child if parent lacks specific class

On my website, I have a fullscreen header with a navigation bar inside. Both contain a mix of text, icons, etc., and appear above a "main content" section. I can add a class .p-X to either #splash or #nav (X = page number, e.g. .p-1 for page 1 (URL INDEX/page/1) and .p-2 for page 2 (URL INDEX/page/2)) in order to display both #splash and #nav on page 1, but hide #splash and still display #nav on pages 2+. What is the most efficient way to do this? CSS and jQuery solutions okay. I've tried the visibility answer here and JJJ's selector here (might've misapplied the latter though). Thanks!

EDIT: The current accepted answer would not allow me to preserve the curved edge on #nav (there'd be white space between #splash's image and #nav's top edge). I can live with it removed, but I wonder if there's a way to preserve it.

#splash {
    width: 100%;
    height: 100vh;
    background:#e00;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.icon {
    width: 128px;
    height: 128px;
    background: #ddd;
    margin: auto 0 0.5rem 0;
}

#splash .info {
    max-width: 700px;
    margin: 0 auto auto auto;
    background: #ddd;
}

#nav {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    justify-content: space-evenly;
    width: 100%;
    height: 40px;
    background: #000;
    color: #fff;
    z-index: 5;
    border-radius: 30% 30% 0% 0%; /* curved top if #splash is shown; curved bottom if not */
}

#content {
    height: 100vh;
    overflow-x: hidden:
    overflow-y: auto;
    background: #ccc;
}
    <section id="splash" class="p-X">
    hide this on pages not 1
        <div class="icon">hide this on pages not 1</div>
        <div class="info">hide this on pages not 1</div>
        <section id="nav">
            sticks to top via JS when #splash is scrolled out/not displayed; display this on every page
        </section>
    </section>
    <section id="content">
        scrollable main content; display new content on different pages
    </section>

Upvotes: 1

Views: 449

Answers (2)

Michael Zeta
Michael Zeta

Reputation: 42

It's not possible to display a child of an element when the parent is hidden.

Try moving the #nav out of the #splash so it's no longer a child of #nav. Then to achieve the same look, place #nav after the #splash in the markup and use #nav { background-color: transparent } so you can see the main content underneath, and also use #splash {height: calc(100vh - HEIGHTOF#NAV)} to make the #nav stick to the bottom.

Set your scroll position rules in JS to act on the #nav instead of #splash.

Now you're free to hide or show the #splash section without if affecting the #nav

Upvotes: 1

Dan Mullin
Dan Mullin

Reputation: 4435

Set it up so that the #splash is hidden by default. Then, if it's on page one, make #splash a block element.

#splash {
    display: none;
}
.p1 #splash {
    display: block;
}

Upvotes: 0

Related Questions