Hi all,

I have a question which I'm hoping you guys will be able to help me with. I am currently looking at coding a website, where the background is a picture of the night sky. There are stars in the sky, and I'm hoping to make these into the navigation buttons of the site.

When you click the stars, rather than taking you to another page of content, I want an expanding box of content to fade onto the page. I have an example of what I want to achieve below, however, this is just a rough example of what I want, as obviously I don't want the red box with the text in it. Imagine the '+' button is one of my stars, and when clicked, it fades in the content box, just like when you click the '+' button on the example below.

I hope someone can help!

Code:
<html> 
<head> 
   <title>Example of Side-Scroller</title> 
    <style type="text/css"> 
      body,html { 
         margin:0px; 
         padding:0px; 
         background:#000000; 
         color:#000000; 
         font:normal 14px verdana, sans-serif;} 
      #wrapper { 
         width:800px; 
         height:300px; 
         margin:0px auto; 
         border:3px outset #FFFFFF; 
         border-top:0px; 
         background:#990000;} 
      #banner { 
         width:800px; 
         height:50px; 
         text-align:center; 
         background:#999999; 
         font:bold 20px verdana, sans-serif;} 
      #content { 
         margin:10px auto; 
         width:774px; 
         height:225px; 
         overflow:hidden; 
         background:#FFFFFF; 
         border:3px outset #000000;} 
      #sideButton { 
         cursor:pointer; 
         font:bold 20px verdana, sans-serif; 
         background:#FF0000; 
         border:3px outset #FFFFFF; 
         border-left:0px; 
         width:25px; 
         height:28px; 
         position:fixed; 
         top:100px; 
         left:1086px;} 
      #sideButton:hover { 
         background:#666666; 
         color:#FF0000;} 
      #mask { 
         z-index:1000; 
         height:100%; 
         width:100%; 
         background:#000000; 
         position:fixed; 
         top:0px; 
         filter:alpha(opacity=75); 
         opacity:0.75;} 
      #popUp { 
         z-index:1001; 
         margin:0px auto; 
         text-align:center; 
         width:400px; 
         height:300px 
         border:3px outset #FFFFFF; 
         background-color:#999999; 
         color:#000000; 
         position:absolute; 
         top:25%; 
         left:35%;} 
      #text { 
         z-index:1002; 
         text-align:left; 
         margin:10px auto; 
         width:380px; 
         height:270px; 
         overflow:auto;} 
    </style> 
   <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script> 
   <script type="text/javascript"> 
      $(document).ready(function() { 
         // Grab the text holder 
         var content=$('#content'); 
         // Grab the mask 
         var mask=$('#mask'); 
         // Grab the pop-up 
         var pop=$('#popUp'); 
         // Grab the span that holds the data 
         var span=$('#text'); 
         // Define the button that will do the magic 
         var button=$('#sideButton'); 
         button.click(function() { 
            mask.fadeIn('slow'); 
            pop.fadeIn('slow'); 
            span.html(content.html());}); 
         // Define the close button 
         var close=$('#close'); 
         close.click(function() { 
            mask.fadeOut('slow'); 
            pop.fadeOut('slow');}); 
         }); 
   </script> 
</head> 
<body> 
<div id="mask" style="display:none;"></div> 
<div id="popUp" style="display:none;"> 
   <div id="text"> 
   </div> 
   <input type="button" id="close" value="Close" /> 
</div> 
<div id="wrapper"> 
   <div id="banner"> 
      This is just an Example.... 
   </div> 
   <div id="content"> 
   This is some test text... This is some test text... This is some test text... This is some test text... This is some test text... This is some test text... This is some test text... This is some test text... This is some test text... This is some test text... This is some test text... This is some test text... This is some test text... This is some test text... This is some test text... This is some test text... This is some test text... This is some test text... This is some test text... This is some test text... This is some test text... This is some test text... This is some test text... This is some test text... This is some test text... This is some test text... This is some test text... This is some test text... This is some test text... This is some test text... This is some test text... This is some test text... This is some test text... This is some test text... This is some test text... This is some test text... This is some test text... This is some test text... This is some test text... This is some test text... This is some test text... This is some test text... This is some test text... This is some test text... This is some test text... This is some test text... This is some test text... This is some test text... This is some test text... This is some test text... This is some test text... This is some test text... This is some test text... This is some test text... This is some test text... This is some test text... This is some test text... This is some test text... This is some test text... This is some test text... This is some test text... This is some test text... This is some test text... This is some test text... This is some test text... This is some test text... This is some test text... This is some test text... This is some test text... This is some test text... This is some test text... This is some test text... This is some test text... This is some test text... This is some test text... This is some test text... This is some test text... This is some test text... This is some test text... This is some test text... This is some test text... This is some test text... This is some test text... This is some test text... This is some test text... This is some test text... This is some test text... This is some test text... This is some test text... This is some test text... This is some test text... This is some test text... This is some test text... 
   </div> 
</div> 
<div id="sideButton">+</div> 
</body> 
</html>