Keep Showing the content of the tabs when user Click on it

Question

I'm working with a tab built in css, some codes not working since I'm new in css.

Here's the CSS:

input#ckTab{display: none;}
.tabs{width: 100%;}
button{position:relative;height:60px;background:#fff;cursor:pointer;}
.ct-box {text-align:left;}
.ct-box > div {display: none;}
.lblUk-a:focus-within ~ .ct-box .ct-a {display: block;}
.lblUk-b:focus-within ~ .ct-box .ct-b {display: block;}
.lblUk-c:focus-within ~ .ct-box .ct-c {display: block;}
.lblUk-d:focus-within ~ .ct-box .ct-d {display: block;}
.lblUk-e:focus-within ~ .ct-box .ct-e {display: block;}

And, HTML:

<div class="container">
  <input type="checkbox" id="ckTab" name="ckTab" checked />
  <div class="tabs">
    <div class="lblUk">
      <button class="lblUk-a">M/25</button>
      <button class="lblUk-b">S/40</button>
      <button class="lblUk-c">X/21</button>
      <button class="lblUk-d">L/45</button>
      <button class="lblUk-e">XL/50</button>
      <div class="ct-box">
        <div class="ct-a">a ct</div>
        <div class="ct-b">b ct</div>
        <div class="ct-c">c ct</div>
        <div class="ct-d">d ct</div>
        <div class="ct-e">e ct</div>
      </div>
    </div>
  </div>
</div>

What I want is: when I click a tab (e.g M/25, etc) the content of each tabs appear (this is working), but when I click the label or the content of the opened tab, it hides. I want it keep showing.

The content of each of the tabs keep showing when I CLICK it. Here's the fiddle: JsFiddle

@dalelandry, I'm learning how css works. I would use it next time. — Andrea Saturnus, Apr 08 '23 at 21:28
Have a look at this question... https://stackoverflow.com/a/18752327/1533592 — dale landry, Apr 08 '23 at 21:46
@dalelandry, **SOLVED!** I find difficult for my current work Except using JS. But your suggestion to use the **link** (using checkbox to manipulate my code can **WORK** as I wish). — Andrea Saturnus, Apr 09 '23 at 16:38
Does this answer your question? [Reveal and hide a div on checkbox condition with css](https://stackoverflow.com/questions/18752134/reveal-and-hide-a-div-on-checkbox-condition-with-css) — dale landry, Apr 09 '23 at 19:01
The same case but different of how to manipulate the tab (in my opinion). — Andrea Saturnus, Apr 09 '23 at 21:30

score 1 · Answer 1 · answered Apr 08 '23 at 19:00

1

adding the line below to you code will keep you tab if your mouse stays on it after clicking but moving outside of tab will hide it.

.ct-a:hover, .ct-b:hover, .ct-c:hover, .ct-d:hover , .ct-e:hover {display: block}

to do it correctly, you should either use javascript or try leveraging invisible checkboxes in your codes if you wanna stay with pure css.

answered Apr 08 '23 at 19:00

fevid

723
6
18

This is nice, but, can you give it another since I need it keep showing when mouse lost focus (or click en empty area out of the container/div) – Andrea Saturnus Apr 08 '23 at 21:27
how can `checkboxes` do that, please? – Andrea Saturnus Apr 08 '23 at 21:36
@PaijoPapuastoros you can position checkbox inputs inside your buttons using `position: absolute` and giving it same size as the button with no opacity, so when you click on the button it actually will trigger the checkbox and you can use `:checked` selector to make the tabs visible – fevid Apr 09 '23 at 17:36

Andrea Saturnus · Accepted Answer · 2023-04-09T16:47:42.887

With the code in my question, I got difficult to get it work as I wish. You, dale, then suggest to use checkbox.

function check(element){
    if(element.checked){
      var checkboxes = document.getElementsByClassName('ckbox');
        for(var i=0;i<checkboxes.length;i++){
           if(checkboxes[i]!=element)
             checkboxes[i].checked = false;
        }
    }
}

.tabs{width:100%;}
label{z-index:10;position:relative;height:30px;background:#fff;cursor:pointer;padding:5px 10px;border:1px solid #dedede;}
.ct-box {text-align:left;}
.ct-a,.ct-b,.ct-c,.ct-d,.ckbox{display:none;}
.ck_m25:checked ~ .ct-box .ct-a{display:block;}
.ck_s40:checked ~ .ct-box .ct-b{display:block;}
.ck_x21:checked ~ .ct-box .ct-c{display:block;}
.ck_l45:checked ~ .ct-box .ct-d{display:block;}

<div class="container">
  <div class="tabs">
    <div class="lblUk">
    <label for="m25" class="lblUk-a uks uk1">M/25</label>
    <input type="checkbox" class="ckbox ck_m25" id="m25" onchange='check(this)'/>
      
     <label for="s40" class="lblUk-b uks uk2">S/40</label>
     <input type="checkbox" class="ckbox ck_s40" id="s40" onchange='check(this)'/> 
      
    <label for="x21" class="lblUk-c uks uk3">X/21</label>
    <input type="checkbox" class="ckbox ck_x21" id="x21" onchange='check(this)'/>
      
    <label for="l45" class="lblUk-d uks uk4">L/45</label>
    <input type="checkbox" class="ckbox ck_l45" id="l45" onchange='check(this)'/>
      <div class="ct-box">
        <div class="ct-a">a ct</div>
        <div class="ct-b">b ct</div>
        <div class="ct-c">c ct</div>
        <div class="ct-d">d ct</div>
      </div>
    </div>
  </div>
</div>

Here's the fiddle: Jsfiddle

Note: I use JS to make it awesome.

Keep Showing the content of the tabs when user Click on it

2 Answers2