Fade in/out text in same div by clicking link

I'm trying to have different sets of text fade in/out in the same div by clicking various links.

Diagram:
http://i.imgur.com/wsBLs.jpg

This is my code so far:

JS:

Code:

<script type="text/javascript"> $(document).ready(function() { $('.m1').click(function() { displayNone(); setTimeout(showWindow("text1"), 2000); } ); $('.m2').click(function() { displayNone(); setTimeout(showWindow("text2"), 2000); } ); ... ... $('.m10').click(function() { displayNone(); setTimeout(showWindow("text3"), 2000); } ); function displayNone() { $('#text1').fadeOut(); $('#text2').fadeOut(); ... ... $('#text10').fadeOut(); } function showWindow(name) { $('#' + name).fadeIn(); } }); </script>

HTML:

Code:

... ... <div class="pagecontainer">  <div id="links"> <div class="m1">text1</div> <div class="m2">text2</div> ... ... <div class="m10">text10</div> </div>  <div id="textarea"> <div id="text1">text1</div> <div id="text2">text2</div> ... ... <div id="text10">text10</div> </div> </div>

CSS:

Code:

.pagecontainer { overflow-y:auto; overflow-x:hidden; margin-top:30px; margin-bottom:300px; width:800px; height:400px; margin: 0 auto; display: block; font-size:12px; } #text1,#text2,#text3,#text4,#text5,#text6,#text7,#text8,#text9,#text10 { display:none; position:relative; } /*SCROLLABLE*/ #links { display:none; margin-top:50px; padding-left:50px; width: 350px; position:relative; } /*FIXED TO pagecontainer div*/ #textarea { display:none; position:absolute; margin-top:100px; padding-left:400px; width: 400px; height: 200px; font-size:25px; text-align:center; }

The catch is the links are actually songs on a playlist in JPlayer (music player using JQuery), where each item in the playlist is assigned a class (.m1, .m2, etc), so it functions exactly like the ordinary <div class="m1">text1</div>.

Using this code many things mess up:
- About half of the links become unclickable, the remaining half functions normally, I have no idea what determines which ones become unclickable or why
- The moment I hover mouse over any of the unclickable links, the page freezes, this is fixed when I hover mouse over a clickable link (weird??)
- The text (text1, text2 etc) does not show up at all

Any help is appreciated, thanks.

If you want to use only just fade effect why not try to use jquery.animate

http://api.jquery.com/animate/

You try fade in/fade out effect from the examples of Chapter 8 from the below link.

http://www.codersyard.com/dashboard/ebooks.html?file=JS_Examples.zip

For some reason I can't edit my first post?
Anyways here is an update of my question, please read this one as it's clearer and with updated code.

=======================================================================

I'm trying to have different sets of text fade in/out in the same div by clicking various song names in a playlist in JPlayer (JQuery based audio player). JPlayer link: http://jplayer.org/

Diagram:
http://i.imgur.com/wsBLs.jpg

This is my code so far:

JPlayer:

Code:

<head> ... ...  <script type="text/javascript"> //<![CDATA[ $(document).ready(function(){ new jPlayerPlaylist({ jPlayer: "#jquery_jplayer_1", cssSelectorAncestor: "#jp_container_1" }, [ { title:"<span class='bold white m3'>Song 3</span>", mp3:"___", oga:"___" }, { title:"<span class='bold white m2'>Song 2</span>", mp3:"___", oga:"___" }, { title:"<span class='bold white m1'>Song 1</span>", mp3:"___", oga:"___" } ], { swfPath: "../js", solution:"html,flash", supplied: "oga, mp3", wmode: "window" }); }); //]]> </script> ... </head>

Each playlist item has a class "m1" "m2" etc.

JS:

Code:

<script type="text/javascript"> $(document).ready(function() { $('.m1').click(function() { displayNone(); showWindow("text1"); } ); $('.m2').click(function() { displayNone(); showWindow("text2"); } ); $('.m3').click(function() { displayNone(); showWindow("text3"); } ); function displayNone() { $('#text1,#text2,#text3').fadeOut(); } function showWindow(name) { $('#' + name).fadeIn(); } }); </script>

HTML:

Code:

... ... <div class="pagecontainer">  <div id="musicplayer">   <div id="legend"> <div id="text1">text1</div> <div id="text2">text2</div> <div id="text10">text3</div> </div> </div>

CSS:

Code:

.pagecontainer { overflow-y:auto; overflow-x:hidden; margin-top:30px; margin-bottom:300px; width:800px; height:400px; margin: 0 auto; display: block; font-size:12px; } #text1,#text2,#text3 { display:none; position:relative; } /*SCROLLABLE*/ #musicplayer { margin-top:50px; padding-left:50px; width: 350px; position:relative; } /*FIXED TO pagecontainer div*/ #legend { display:none; position:absolute; margin-top:100px; padding-left:400px; width: 400px; height: 200px; font-size:25px; text-align:center; }

Apparently the song names in a playlist in JPlayer are really special as they don't register as classes or identifiers, so I can't find a way to target them in a function. I've tried to register them as

Code:

title:"<span class='bold white m1' data-link='1'>Song 1</span>",

like previous written. Strangely "bold" and "white" both works (bold just has css property of making font thicker, white is just a css property to change text color to white), but "m1" is not registered, as calling it in click functions does not work, ie:

Code:

$('.m1').on('click', function(){ /*do some stuff*/ }

It can't find what ".m1" is and thus won't do anything. Basically css properties will register, but javascript won't. Very weird...

Any help is appreciated, thanks.