OK, In summery, this is what I came up with...(I know this code might be ugly, but it works and its my first complete code!)
For the color change. Each color had to have its own class in the CSS. the script went as follows:
__________________________________________
<body>
<div id="logoHole1"></div>
<div class="mainTitle01" id="expus">EXPERIENCE US</div>
<div class="cont01" id="expusCont1">
I love this city!</div>
<script>
$('#expus').hover(function() {
$(this).toggleClass('changeColor1');
});
</script>
<div class="mainTitle02" id="create">CREATE</div>
<div class="cont02" id="createCont1">
I love to create!</div>
<script>
$('#create').hover(function() {
$(this).toggleClass('changeColor2');
});
</script>
<div class="mainTitle03" id="innov">INNOVATIVE</div>
<div class="cont03" id="innovCont1">
I love to innovate!</div>
<script>
$('#innov').hover(function() {
$(this).toggleClass('changeColor3');
});
</script>
<div class="mainTitle04" id="engage">ENGAGE</div>
<div class="cont04" id="engageCont1">
I love to engage!</div>
<script>
$('#engage').hover(function() {
$(this).toggleClass('changeColor4');
});
</script>
<div class="mainTitle05" id="huheard">HAVE YOU HEARD</div>
<div class="cont05" id="huheardCont1">
I love to hear!</div>
<script>
$('#huheard').hover(function() {
$(this).toggleClass('changeColor5');
});
</script>
<div class="mainTitle06" id="connect">CONNECT</div>
<div class="cont06" id="connectCont1">
I love to connect!</div>
<script>
$('#connect').hover(function() {
$(this).toggleClass('changeColor6');
});
</script>
___________________________________
Next I needed to have the the content divs appear when the title divs were clicked, but only have 1 open at a time. I had achieved this by telling the opening div that if there is any other open content div, to hide it. And to spice it all up, I added a 1sec animation to the .hide() & .show().
I hope this helps somebody.
Here is the code for the animated content divs:
___________________________________
<script src="http://jquery.com/src/jquery-latest.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('div.cont01').hide();
$('div.cont02').hide();
$('div.cont03').hide();
$('div.cont04').hide();
$('div.cont05').hide();
$('div.cont06').hide();
$('div.mainTitle01').click(function() {
$('#expusCont1').show(1000);
if(".cont02,.cont03,.cont04,.cont05,.cont06 = .show");
{$(".cont02,.cont03,.cont04,.cont05,.cont06").hide(1000)};
});
$('div.mainTitle02').click(function() {
$('#createCont1').show(1000);
if(".cont01,.cont03,.cont04,.cont05,.cont06 = .show");
{$(".cont01,.cont03,.cont04,.cont05,.cont06").hide(1000)};
});
$('div.mainTitle03').click(function() {
$('#innovCont1').show(1000);
if(".cont01,.cont02,.cont04,.cont05,.cont06 = .show");
{$(".cont01,.cont02,.cont04,.cont05,.cont06").hide(1000)};
});
$('div.mainTitle04').click(function() {
$('#engageCont1').show(1000);
if(".cont01,.cont02,.cont03,.cont05,.cont06 = .show");
{$(".cont01,.cont02,.cont03,.cont05,.cont06").hide(1000)};
});
$('div.mainTitle05').click(function() {
$('#huheardCont1').show(1000);
if(".cont01,.cont02,.cont03,.cont04,.cont06 = .show");
{$(".cont01,.cont02,.cont03,.cont04,.cont06").hide(1000)};
});
$('div.mainTitle06').click(function() {
$('#connectCont1').show(1000);
if(".cont01,.cont02,.cont03,.cont04,.cont05 = .show");
{$(".cont01,.cont02,.cont03,.cont04,.cont05").hide(1000)};
});
});
</script>