Skip welcome & menu and move to editor
Welcome to JS Bin
Load cached copy from
 
<section id="advanced">
    Advanced Stuff
</section>
<a href="#advanced">Advanced</a>
<section id="home">
    Home Things
</section>
<a href="#home">Home</a>
 
body {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    margin: 0;
    padding: 0;
    min-height: 100vh;
    outline: 1px solid green;
    background-color: lime;
    align-content: flex-start;
    
    >a {
        padding: 10px;
        margin: 0 5px;
        order: -1;
        flex-grow: 0;
        border: solid gray;
        border-width: 1px 1px 0 1px;
        &:last-of-type {
            order: -2;
        }
    }
}   
section {
    width: 100%;
    background-color: cornsilk;
    display: none;
    border-top: 1px solid grey;
    &:last-of-type {
        display: flex;
    }
}
a {
    font-weight: normal;
    &:last-of-type {
        font-weight: bold;
    }
}
:target {
    display: flex;
    
    ~section {
        display: none;
    }
    ~a {
        font-weight: normal;
    }
    +a {
        font-weight: bold;
    }
}
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
togakangaroopro
0viewers