Question 42921 in Html Question posted in
Some basic documentation can be found here.

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

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

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    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.


  2. 0

    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.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search