I have some basic jquery code sitting in the header of the header file

Question

0

Asked: June 5, 20262026-06-05T22:18:47+00:00 2026-06-05T22:18:47+00:00

I have some basic jquery code sitting in the header of the header file

0

I have some basic jquery code sitting in the header of the header file for WordPress. It was working until the client I handed it to added several plugins which I would prefer not to turn off yet if possible as that may cause issues within itself.

I am trying to determine if there is an easy way to work out what could possibly be interfering with the code (as a relatively new javascript developer I am still getting used to the console). A solution that works not just for this case, but for any other similar situations as well would be great!

When I say it doens’t work, it just displays all the divs that should be hidden (as per the code). No errors appear in the console.

The code from the site is the following:

<script type="text/javascript">
$(document).ready(function(){
    $("ul.tabs").tabs("div.panes", {tabs:'li'});
    });

</script>

I tested this in a basic HTML file earlier and it works fine;

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="http://cdn.jquerytools.org/1.2.7/full/jquery.tools.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    $("ul.tabs").tabs("div.panes", {tabs:'li'});
    });
</script>
</head>
<body>
<div class="tab_nav">
    <ul class="tabs">
        <li><a href="#">Most Recent</a></li>
        <li><a href="#">Most Viewed</a></li>
        <li><a href="#">Most Comments</a></li>
    </ul>
    <div class="clear"></div>
</div>
<div class="tab_content panes">
CONTENT ONE
</div>
<div class="tab_content panes">
CONTENT TWO
</div>
<div class="tab_content panes">
CONTENT THREE
</div>
</body>
</html>