Jquery tabs not hiding unselected tabs

StackOverflow https://stackoverflow.com/questions/22330561

Question

I've got a jquery tabs set up on IE9, code looks like this.

<head>

<!-- jquery includes -->
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.js"></script>

<!-- tabs stuff-->
<script>
    $(function(){
        $( "#tabs" ).tabs();
    });
</script>

</head>

<body>
    <div id= "tabs">
        <ul>
            <li><a href="#tabs-1">Search</a></li>
            <li><a href="#tabs-2">Add/Modify</a></li>
        </ul>
        <div id= "tabs-1">
            <form name= "search_form" method= "post" action= "/" onSubmit="return validate(this);">
                <input id="name" type= "text"/>
                <label> Search </label> <input type= "checkbox" id= "option" name= "option"/>
                <input type= "submit" value= "Search" id= "search"/>
            </form>
        </div>
        <div id= "tabs-2">
            <p> This is getting shown, even though tab-2 is not selected </p>
        </div>
    </div> <!-- end of tabs container-->

<!-- right now, I've got the 'validate' function down here, but didn't feel like I needed
    to include it to illustrate the problem I am having -->

</body>

I think that is all the relevant html/code, can anyone see a reason why my second tab's content is showing up, regardless of whether the tab2 is selected or not? As of now, clicking on the tab does nothing for me.

Was it helpful?

Solution

The problem is you can not use the latest version of jQuery with that version of jQuery ui. 

src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.js"></script>
                                                   ^^^^^

update it to the current version like the CSS file you are using

OTHER TIPS

There's probably because of your jQuery UI version is not compatible with lastest jQuery version, you can use version 1.10.4 instead:

<!-- jquery includes -->
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>

Fiddle Demo

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top