Hi,

Im currently constructing a website but im having trouble with my tabs and content.

http://www.gamesgeneration.co.uk/deadisland-ps3.php

I would like videos and certain content to show up only in my product info tab and not the other.

So far ive managed to hide the video in the summary tab when the page loads and when i click the product info tab the script shows the video but when i click back to the summary tab, the video stays on the page when i would like it to hidden again?

here is the java im using

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

//When page loads...
$(".trailer").hide();

//On Click Event
$("ul.tabs li").click(function() {
$(".trailer").show(); //Hide all tab content

});

});
</script>

here is the html

<div id="game-tabcontainer">
<ul class="tabs">
<li><a href="#tab1">Summary</a></li>
<li><a href="#tab2">Product Information</a></li>
</ul>

<div class="tab_container">
<div id="tab1" class="tab_content">
<strong>Welcome to the beautiful island of Banoi.</strong><p>

This little slice of heaven becomes a living hell when a Zombie outbreak hits, trapping the surviving inhabitants of the Royal Palms Resort with no way to communicate with the outside world: welcome to Dead Island!<br />
<div class="dev-info"><strong>Developer:</strong> Techland<br />
<strong>Publisher:</strong> Koch Media
</div><!-- end of dev-info-->
</div>
<div id="tab2" class="tab_content">
Terror. Violence. Madness. Bedlam. A holiday paradise gone mad. A tropical island turns into total chaos after a mysterious zombie outbreak. Cut off from the rest of the world, the player’s only chance to survive is to fight to the death and find a way to escape from the island.<p>
Dead Island combines first-person action with a heavy focus on melee combat, character development and customization of a vast array of weapons. All of these gameplay features are presented in a dark story inspired by classic zombie movies with a gritty and engrossing campaign that can be played with up to 4 players in co-op mode.
<p>
<strong>Dead Island Features:
<ul>
<li>First-person melee combat</li>
<li>4-player coop</li>
<li>Weapon customization</li>
<li>Set on an gorgeous open world tropical island</li>
<li>RPG elements for character development</li>
<li>Hordes of gruesome zombies</li></strong></ul>
</div><!-- end of dev-info-->

<div class="trailer" align="center">
<iframe width="560" height="349" src="http://www.youtube.com/embed/lZqrG1bdGtg?hd=1" frameborder="0" allowfullscreen></iframe>
</div>
</div>

</div>
</div><!-- game-tabcontainer-->

and here is the css
#game-tabcontainer {
float:left;
padding-top:5px;
padding-left:5px;
width:752px;
}

ul.tabs {
margin: 0;
padding: 0;
float: left;
list-style: none;
height: 32px; /*--Set height of tabs--*/
border-bottom: 1px solid #999;
border-left: 1px solid #999;
width:752px;
}

ul.tabs li {
float: left;
margin: 0;
padding: 0;
height: 31px; /*--Subtract 1px from the height of the unordered list--*/
line-height: 31px; /*--Vertically aligns the text within the tab--*/
border: 1px solid #999;
border-left: none;
margin-bottom: -1px; /*--Pull the list item down 1px--*/
overflow: hidden;
position: relative;
background: #e0e0e0;
}
ul.tabs li a {
text-decoration: none;
display: block;
font-family: century-gothic, helvetica, arial, sans-serif;
font-weight: bold;
font-size: 13px;
color: #000;
padding: 0 20px;
border: 1px solid #fff; /*--Gives the bevel look with a 1px white border inside the list item--*/
outline: none;
}
ul.tabs li a:hover {
background: #ccc;
}
html ul.tabs li.active, html ul.tabs li.active a:hover { /*--Makes sure that the active tab does not listen to the hover properties--*/
background: #fff;
border-bottom: 1px solid #fff; /*--Makes the active tab look like it's connected with its content--*/
}
.tab_container {
width:752px;
border: 1px solid #999;
border-top: none;
overflow: hidden;
float: left;
background: #fff;
}

.tab_content {
width:732px;
padding: 20px;
font-family: century-gothic, arial, helvetica, sans-serif;
font-weight: normal;
font-size: 12px;
line-height: 1.5em;
color: #000;
}

ul.tabs li a:active {
color: #009933;
}

.dev-info {
padding-left:15px;
padding-top:5px;
}

.trailer {
width:732px;
display:block;
}

Any help would be greatly appreciated.

Thanks Rob