CODEWITHSUNDEEP
css
Atif Azad
Atif Azad

Reputation: 527

How to display first tab by default in css?

I have css based tab menu its working fine for me but by default it is not displaying first tab i want my first tab to be active by default

here is my fiddle

Upvotes: 2

Views: 1729

Answers (2)

m0bi5
m0bi5

Reputation: 9452

Add a new CSS for the elements with class display:

I gave the <a> an id = "no" in tab1

<li id="item-1"> <a  href="#item-1">Tab 1</a>
      <div class="display" id ="no">
        <p>Tab Content 1</p>
          <p>Tab Content 1</p>
          <p>Tab Content 1</p>
      </div>
</li>

Then added an id = "remove1prop" to <a> of tab2 and tab3

<li id="item-2"> <a id = "remove1prop" href="#item-2">Tab 2</a>
   <div>
     <p>Tab Content 2</p>
   </div>
</li>
<li id="item-3"> <a id ="remove1prop" href="#item-3">Tab 3</a>
   <div>
     <p>Tab Content 3</p>
   </div>
</li>

Wrapped all your tabs in a div with id = "test"

Then added the following javascript:

var test = document.getElementById("test");
var elem = document.getElementById("no");
elem.style.display = "block";
function whatClicked(evt) {
    if(evt.target.id == "remove1prop")
        elem.style.display="none";
    else
        elem.style.display="block";
}
test.addEventListener("click", whatClicked, false);

NOTE: Remove the css I had given you before from the css style sheet

Working example:http://jsfiddle.net/5452wxfy/6/

Upvotes: 2

arnoudhgz
arnoudhgz

Reputation: 1284

Add this piece: 

.css-tabs ul.menu li > div.display {
    display: block;
}

After:

.css-tabs ul.menu li > div {
    display:none;
    position:absolute;
    width:100%;
    left:0;
    margin:-1px 0 0 0;
    z-index:-1;
    text-align:left;
    padding:0;
}

jsfiddle: http://jsfiddle.net/5452wxfy/2/

Upvotes: 0

Related Questions