Question

I tried the following in order to create Jquery tabs:

    <div id="tabs">
    <ul>
      <li><a href="#tabs-1">First</a></li>
      <li><a href="#tabs-2">Second</a></li>
      <li><a href="#tabs-3">Third</a></li>
    </ul>
    <div id="tabs-1">
      <p>Tab 1 content</p>
    </div>
    <div id="tabs-2">
      <p>Tab 2 content</p>
    </div>
    <div id="tabs-3">
     <p>Tab 3 content</p>
    </div>
    </div>  

    <script type="text/javascript" language="javascript">
    $(document).ready(function () {

        $("#tabs").tabs();

    });
    </script>

What I show is the following:

First
Second
Third

Tab 1 content

Tab 2 content

Tab 3 content

Am I missing the necessary jquery library? Which one should I be using?

Answer 1

Have you included jQuery UI css and js file? You can add it from CDN like this.

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/themes/base/jquery-ui.css" type="text/css" media="all" /> 
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.2.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js" type="text/javascript"></script>