I'm not very experience with JavaScript and jQuery and I'm really needing help to think something through. I'm trying to display information to the user in a similar way to the Metro UI interface in Windows 8.

In essence I've got a page fulled with tiles of different sizes (just like Metro/Modern UI) and a tiny bit of information on each tile such as the date of a post. I'd like to be able to click the tile and for a text popup to appear with the information relevant to the tile that was clicked on.

I figure this would be an easy task if the content was static, but since I'm building the tiles based on a Facebook RSS feed, I'm having quite a bit of difficulty even figuring out how I would store and display the main text of the tile. To get my point across I've done an extremely simple sample of a box, and what I'd like.

    

        
Date
        
Basic synopsis
            

                
This is the body text that I want hidden to start with, but visible in the pop-up.
            
    

Now, I don't have a problem with creating tiles and populating them with the date and any other information, but I have no clue how to make the text inside the body-text div not visible inside the tile, but only when clicked and seen in a pop-up.

Honestly I don't even know if I should be storing the text inside the tile like that at all, but it's the only way I can think of organizing my data. If you may remember, I'll have up to 25 of these tiles going down the screen and I need to be able to access each one. As well, the reason I'm thinking like this in the first place is because I previously used jQuery UI Accordion which had the text it displayed hidden, then shown when clicked.

At this point, even if you can't help me with any working code samples or snippets and help or push in the right direction would be really appreciated.