CODEWITHSUNDEEP
csstabs
Krishnam
Krishnam

Reputation: 29

Pure CSS Tabs - First tab panel should open on load

I am using the below to create Pure CSS tabs;

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>

<style type="text/css">



*::-moz-selection {
    background: none repeat scroll 0 0 #F26D5E;
    color: white;
}

#bar {
    position: fixed;
    width: 100%;
    top: 0;
}

#content > p {
    font-size: 12px;
    line-height: 24px;
    text-align: left;
    color: #416C80;
    font-family:Arial, "Trebuchet MS", Calibri;
}

li div p {
    font-size: 14px;
    line-height: 24px;
    text-align: left;
    color: #888888;
    font-family:Arial, "Trebuchet MS", Calibri;
}

a {
    color: #888888;
    text-decoration: none;
    outline: none;
}

#tabs-content {
    position: relative;
    clear: both;
}

li div {
    -webkit-transition: all 0.5s ease 0s;
    -moz-transition: all 0.5s ease 0s;
    -o-transition: all 0.5s ease 0s;
    -ms-transition: all 0.5s ease 0s;
    transition: all 0.5s ease 0s;
    border: 1px solid #888888;
    float: left;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    opacity: 0;
    padding: 0 15px;
    position: absolute;
    visibility: hidden;
    width: 473px;
    left: 0;
    margin-top:0px;


}

#tabs {
}

ul {
    float: left;
    margin: 0;
    padding: 0;
    position: relative;
}

#tabs li {
    float:left;
    list-style-type: none;
}

#tabs li a {

    border: 1px solid #662381;
    margin: 0 0 0 0;
    padding: 6px 25px;
    position: relative;
    z-index: 1;
    font-size: 10px;
background-color:#662381;
        color: #FFFFFF;

    font-family:Arial, "Trebuchet MS", Calibri;

    display: block;
    top: 1px;
}

#tabs li a:hover {

    background-color:#red;


}

#tabs-content div p {
    position: relative;
    text-align: justify;
}

#One:target a,#Two:target a,#Three:target a, #Four:target a {
    color: #FFFFFF;
    border-bottom: none;
    padding-top: 7px;
    background-color:#0186e1;

}

#One:target div,#Two:target div,#Three:target div, #Four:target div {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: alpha(opacity=100);
    opacity: 1;
    visibility: visible;    
}

#prel:target div
{
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: alpha(opacity=100);
    opacity: 1;
    visibility: visible;    

}

i {
    -webkit-transition: all 0.5s ease 0s;
    -moz-transition: all 0.5s ease 0s;
    -o-transition: all 0.5s ease 0s;
    -ms-transition: all 0.5s ease 0s;
    transition: all 0.5s ease 0s;
}

i:hover {
    background: none repeat scroll 0 0 #F26D5E;
    color: #FFFFFF;
}
</style>

</head>

<body>


        <div id="tabs">
            <ul>
                <li id="One"><a href="#One" id="first">&nbsp;&nbsp;DESCRIPTION&nbsp;&nbsp;</a>
                    <div>
                        <p>Some stuff</p>
                    </div>
                </li>
                <li id="Two"><a href="#Two" id="sec">&nbsp;&nbsp;&nbsp;&nbsp;CREDITS&nbsp;&nbsp;&nbsp;&nbsp;</a>
                    <div>
                        <p>More stuff</p>
                    </div>
                </li>
                <li id="Three"><a href="#Three" id="third">&nbsp;&nbsp;FEATURES&nbsp;&nbsp;</a>
                    <div>
                        <p>You guessed it: more stuff again.</p>
                    </div>
                </li>
                <li id="Four"><a href="#Four" id="four">&nbsp;&nbsp;ITEM SPECIFICS&nbsp;</a>
                    <div>
                        <p>ITEMS</p>
                    </div>
                </li>
            </ul>
        </div>



</body>
</html>

Everything works fine but the first Tab panel doesn't load/visible unless I click the first tab i.e. Description.

Is there a way to show the first tab panel on load/visible just by using CSS (without any javascript or other events)?

Upvotes: 1

Views: 2133

Answers (3)

Danield
Danield

Reputation: 125433

Generally you would/should do this with javascript, however there is actually a pure css solution for this...

Use radio inputs where the first radio input has attribute checked

<input type="radio" id="rad1" name="radioTabs" checked />

FIDDLE

1) Hide the input elements themselves, and trigger them via the label (=tab)

2) The tab content will initially be display:none;

3) Then use the :checked selector to show the content of the necessary tab

input[type="radio"]:checked ~ .tab {
    display: block;
}


li div p {
  font-size: 14px;
  line-height: 24px;
  text-align: left;
  color: #888888;
  font-family: Arial, "Trebuchet MS", Calibri;
}
ul {
  float: left;
  margin: 0;
  padding: 0;
  position: relative;
}
#tabs li {
  float: left;
  list-style-type: none;
}
input[type="radio"] {
  display: none;
}
.tab {
  display: none;
  position: absolute;
  top: 27px;
  -webkit-transition: all 0.5s ease 0s;
  -moz-transition: all 0.5s ease 0s;
  -o-transition: all 0.5s ease 0s;
  -ms-transition: all 0.5s ease 0s;
  transition: all 0.5s ease 0s;
  border: 1px solid #888888;
  float: left;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: alpha(opacity=0);
  padding: 0 15px;
  position: absolute;
  width: 456px;
  left: 0;
  box-sizing: border-box;
}
input[type="radio"]:checked ~ .tab {
  display: block;
}
input[type="radio"]:checked ~ label {
  background-color: tomato;
}
label {
  cursor: pointer;
  border: 1px solid #662381;
  margin: 0 0 0 0;
  padding: 6px 25px;
  position: relative;
  z-index: 1;
  font-size: 10px;
  background-color: #662381;
  color: #FFFFFF;
  font-family: Arial, "Trebuchet MS", Calibri;
  display: inline-block;
  top: 1px;
}
label:hover {
  background-color: tomato;
}
#tabs-content div p {
  position: relative;
  text-align: justify;
}
i {
  -webkit-transition: all 0.5s ease 0s;
  -moz-transition: all 0.5s ease 0s;
  -o-transition: all 0.5s ease 0s;
  -ms-transition: all 0.5s ease 0s;
  transition: all 0.5s ease 0s;
}
i:hover {
  background: none repeat scroll 0 0 #F26D5E;
  color: #FFFFFF;
}
<div id="tabs">
  <ul>
    <li>
      <input type="radio" id="rad1" name="radioTabs" checked />
      <label for="rad1">DESCRIPTION</label>
      <div class="tab">
        <p>Some stuff</p>
      </div>
    </li>
    <li>
      <input type="radio" id="rad2" name="radioTabs" />
      <label for="rad2">CREDITS</label>
      <div class="tab">
        <p>You guessed it: more stuff again.</p>
      </div>
    </li>
    <li>
      <input type="radio" id="rad3" name="radioTabs" />
      <label for="rad3">FEATURES</label>
      <div class="tab">
        <p>Some stuff</p>
      </div>
    </li>
    <li>
      <input type="radio" id="rad4" name="radioTabs" />
      <label for="rad4">ITEM SPECIFICS</label>
      <div class="tab">
        <p>ITEMS</p>
      </div>
    </li>

  </ul>
</div>

Upvotes: 1

dfsq
dfsq

Reputation: 193261

This is really tricky with your current HTML structure. I'm not even sure it's possible with this layout. The optimal I think is simply execute these lines of code on document ready event:

$(function() {
    if (!location.hash) {
        location.hash = 'One';
    }
});

Upvotes: 0

tomaoq
tomaoq

Reputation: 3056

Wow I didn't even know that that was possible, pure css tabs.

As the :target CSS selector triggers when you click an anchor, why not just pass the anchor in the url ?

http://yoursite.com/purecsstabs.html#One

By doing that, you can easily change the default tab without changing much code (just change the url).

http://yoursite.com/purecsstabs.html#Two
http://yoursite.com/purecsstabs.html#Three

Upvotes: 0

Related Questions