MyBB Community Forums

I'm trying to use this very simple script on my site. I realise jquery causes conflict and so I've added the conflict script, however the tab script simply won't work. Here are my headerinclude and index templates:

<link rel="alternate" type="application/rss+xml" title="{$lang->latest_threads} (RSS 2.0)" href="{$mybb->settings['bburl']}/syndication.php" />
<link rel="alternate" type="application/atom+xml" title="{$lang->latest_threads} (Atom 1.0)" href="{$mybb->settings['bburl']}/syndication.php?type=atom1.0" />
<meta http-equiv="Content-Type" content="text/html; charset={$charset}" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<script type="text/javascript" src="{$mybb->settings['bburl']}/jscripts/prototype.js?ver=1603"></script>
<script type="text/javascript" src="{$mybb->settings['bburl']}/jscripts/general.js?ver=1603"></script>
<script type="text/javascript" src="{$mybb->settings['bburl']}/jscripts/popup_menu.js?ver=1600"></script>
{$stylesheets}
<script type="text/javascript">
<!--
	var cookieDomain = "{$mybb->settings['cookiedomain']}";
	var cookiePath = "{$mybb->settings['cookiepath']}";
	var cookiePrefix = "{$mybb->settings['cookieprefix']}";
	var deleteevent_confirm = "{$lang->deleteevent_confirm}";
	var removeattach_confirm = "{$lang->removeattach_confirm}";
	var loading_text = '{$lang->ajax_loading}';
	var saving_changes = '{$lang->saving_changes}';
	var use_xmlhttprequest = "{$mybb->settings['use_xmlhttprequest']}";
	var my_post_key = "{$mybb->post_code}";
	var imagepath = "{$theme['imgdir']}";
// -->
</script>
{$newpmmsg}

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script>
    jQuery.noConflict();
</script>


<script type='text/javascript'>
/* code written by kismet of RPG-Directory.com */
$(function(){ function selectTab(tab){ var i=1; while($('#tab'+i).length){ if(tab.attr('id')!=='tab'+i){ $('#tab'+i).removeClass('highlight'); $('#tab'+i+'-content').hide(); } else { tab.addClass('highlight'); $('#tab'+i+'-content').show(); } i++; }} $('#tab1').addClass('highlight'); $('.clickable').each(function(){ $(this).click(function(){ selectTab($(this)); });});});</script>

<html>
<head>


<title>{$mybb->settings['bbname']}</title>
{$headerinclude}
<script type="text/javascript">
<!--
	lang.no_new_posts = "{$lang->no_new_posts}";
	lang.click_mark_read = "{$lang->click_mark_read}";
// -->
</script>
</head>
<body>
{$header}


<ul id='tab-strip'>
<li id='tab1' class='clickable'>Tab 1</li>
<li id='tab2' class='clickable'>Tab 2</li>
<li id='tab3' class='clickable'>Tab 3</li>
<li id='tab4' class='clickable'>Tab 4</li>
<li id='tab5' class='clickable'>Tab 5</li>
</ul>
<div id='tab1-content' class='tab-content'>Hi from tab 1</div>
<div id='tab2-content' class='tab-content'>Hi from tab 2</div>
<div id='tab3-content' class='tab-content'>Hi from tab 3</div>
<div id='tab4-content' class='tab-content'>Hi from tab 4</div>
<div id='tab5-content' class='tab-content'>Hi from tab 5</div>


{$forums}
{$boardstats}

{$footer}
</body>
</html>

Any help would be much appreciated! I just can't seem to figure out why this isn't working ;l

Earl Grey