Only CSS and HTML tab component

Question

Based on this example, using React: [https://codepen.io/flkt-crnpio/pen/WxROwy/?editors=1100][1]

The problem: Tabs content remains always visible after click, which of course I do not want when the other tab is clicked. Contents should interchange. But currently, when I click on second Tab, both contents appear overlapt on screen.

The html:

 <div className="tabs">
                            <div
                                className="tab-2"
                                onClick={(e) => {
                                    this.toogleOptionChild(e)
                                }}
                                role="button"
                            >
                                <label htmlFor="adult">Für mich</label>
                                <input id="adult" name="adult" type="radio" checked="checked" />

                                <div>
                                    <h4>Erwachsenentarif</h4>
                                </div>
                            </div>
                            <div
                                className="tab-2"
                                onClick={(e) => {
                                    this.toogleOptionChild(e)
                                }}
                                role="button"
                            >
                                <label htmlFor="child">Für mein Kind</label>
                                <input id="child" name="child" type="radio" />

                                <div>
                                    <h4>Kindertarif</h4>
                                </div>
                            </div>
                        </div>

The CSS:

    h1 {
        font-size: 40px;
        line-height: 1em;
        color: #696969;
    }

    button:focus,
    input:focus,
    textarea:focus,
    select:focus {
        outline: none;
    }

    .tabs {
        display: block;
        display: -webkit-flex;
        display: -moz-flex;
        display: flex;
        -webkit-flex-wrap: wrap;
        -moz-flex-wrap: wrap;
        flex-wrap: wrap;
        margin: 0;
        overflow: hidden;
    }
    .tabs [class^='tab'] label,
    .tabs [class*=' tab'] label {
        color: #696969;
        cursor: pointer;
        display: block;
        font-size: 1.1em;
        font-weight: 300;
        line-height: 1em;
        padding: 2rem 0;
        text-align: center;
    }
    .tabs [class^='tab'] [type='radio'],
    .tabs [class*=' tab'] [type='radio'] {
        border-bottom: 1px solid rgba(239, 237, 239, 0.5);
        cursor: pointer;
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        display: block;
        width: 100%;
        -webkit-transition: all 0.3s ease-in-out;
        -moz-transition: all 0.3s ease-in-out;
        -o-transition: all 0.3s ease-in-out;
        transition: all 0.3s ease-in-out;
    }
    .tabs [class^='tab'] [type='radio']:hover,
    .tabs [class^='tab'] [type='radio']:focus,
    .tabs [class*=' tab'] [type='radio']:hover,
    .tabs [class*=' tab'] [type='radio']:focus {
        border-bottom: 1px solid $cerulean;
    }
    .tabs [class^='tab'] [type='radio']:checked,
    .tabs [class*=' tab'] [type='radio']:checked {
        border-bottom: 2px solid $cerulean;
    }
    .tabs [class^='tab'] [type='radio']:checked + div,
    .tabs [class*=' tab'] [type='radio']:checked + div {
        opacity: 1;
    }
    .tabs [class^='tab'] [type='radio'] + div,
    .tabs [class*=' tab'] [type='radio'] + div {
        display: block;
        opacity: 0;
        padding: 2rem 0;
        width: 90%;
        -webkit-transition: all 0.3s ease-in-out;
        -moz-transition: all 0.3s ease-in-out;
        -o-transition: all 0.3s ease-in-out;
        transition: all 0.3s ease-in-out;
    }
    .tabs .tab-2 {
        width: 50%;
    }
    .tabs .tab-2 [type='radio'] + div {
        width: 200%;
        margin-left: 200%;
    }
    .tabs .tab-2 [type='radio']:checked + div {
        margin-left: 0;
    }
    .tabs .tab-2:last-child [type='radio'] + div {
        margin-left: 100%;
    }
    .tabs .tab-2:last-child [type='radio']:checked + div {
        margin-left: -100%;
    }

I appreciate if anyone could tell me what I am doing wrong. thx! [1]: https://codepen.io/flkt-crnpio/pen/WxROwy/?editors=1100

Answer 1

You have done too much before realizing that it did not work.

• radio button cannot be styled the way you tried, but can be hidden
• to toggle selection in between radio , but keep only one checked, they need to have the same name value ( meaning that they are a group where only one can be checked) and have a different id
• + selector is fine, but opacity :0; keeps elements in the flow, (why not, but only one can be seen and your radio can be bothed checked :( )
• negative margin can be a way to mind the height of every tabs, but it is clumsy somehow. lucky we are nowdays with grid, many children can share the same cell without the use of absolute.
• inputs ahead the container to hide/show is just fine for the selector +, but you also got the ~ selector that might allow you to group your inputs together (readability of the code ) but like you did is also fine and reduce the selector to use to a single one.grouping the inputs ahead befor the label could allow to style the labels too

for example what you could have done with the same name value for inputs but differents id and grid something working (not highlighting the current label ):

.tabs {
    display:grid;
    grid-template-columns:repeat(2,1fr); 
} 
.tab-2 {
    grid-row:2;
    grid-column:1 / 3;
} 
input[name="group"] {display:none;}
input[name="group"] +  div { 
    opacity:0; 
    background:white;
}
 
input[name="group"]:checked + div {
    opacity:1;
    z-index:1;
}

/* any extra style you need */
.tabs { 
    border:solid;
}
label {
    text-align:center;
    border-bottom:solid;
    cursor:pointer
}  
input[name="group"] +  div {  
    transition:0.5s;
    position:relative;
    z-index:-1; 
}
  

<div class="tabs">
    <label For="adult">Für mich</label>
    <label For="child">Für mein Kind</label>
    <div class="tab-2">
        <input id="adult" name="group" id="adult" type="radio" checked="checked" />
        <div>
            <h4>Erwachsenentarif</h4>
        </div>
    </div>
    <div class="tab-2">
        <input id="child" name="group" id="child" type="radio" />
        <div>
            <h4>Kindertarif</h4>
            <h4>Kindertarif</h4>
            <h4>Kindertarif</h4>
            <h4>Kindertarif</h4>
            <h4>Kindertarif</h4>
        </div>
    </div>
</div>