CODEWITHSUNDEEP
javascriptjquerycss
4thSpace
4thSpace

Reputation: 44312

What is wrong with this tab JS?

I am using a tab script from here http://www.sunsean.com/idTabs/#advanced. It is under the "Usual" tab. The jsfiddle below also calls jquery.idTabs.min.js. You will see it under "External Resources". Can anyone see what I am doing wrong - why the tabs aren't rendering?

http://jsfiddle.net/PM3zG/

 <div id="usual1" class="usual"> 
  <ul> 
    <li><a href="#tab1" class="selected">Tab 1</a></li> 
    <li><a href="#tab2">Tab 2</a></li> 
    <li><a href="#tab3">Tab 3</a></li> 
  </ul> 
  <div id="tab1" style="display: block; ">This is tab 1.</div> 
  <div id="tab2" style="display: none; ">More content in tab 2.</div> 
  <div id="tab3" style="display: none; ">Tab 3 is always last!</div> 
</div>

Upvotes: 0

Views: 170

Answers (4)

Ranjit Singh
Ranjit Singh

Reputation: 3735

There is no mistake in your code you just need to add correct resource. please add latest jquery.min.js and css for tabs.

Here is the jsfiddle

`http://jsfiddle.net/PM3zG/7/`

Upvotes: 1

Adil Shaikh
Adil Shaikh

Reputation: 44740

jsFiddle Demo

You need to have css styles for your tab's.

I just included this css http://www.sunsean.com/idTabs/main.css in your fiddle and now that seem's to work as required.

And as other's have already pointed out - jquery was not included in your fiddle.

Upvotes: 0

Alfred Xing
Alfred Xing

Reputation: 4632

You didn't include jQuery; idTabs requires it to run.

<script src="jquery.min.js"></script>

http://jsfiddle.net/PM3zG/4/

To show 'tabs', you'll need CSS styling: http://jsfiddle.net/PM3zG/5/

Upvotes: 1

Daniel Dykszak
Daniel Dykszak

Reputation: 276

You need to warp $("#usual1 ul").idTabs(); inside document ready event try :

$(document).ready(function(){
    $("#usual1 ul").idTabs(); 
});

Upvotes: 1

Related Questions