.Show( ) / .Hide( ) moving div position !

.Show( ) / .Hide( ) moving div position !

Hey guys, new here and I am not sure if this is a CSS issue or a JQuery issue so apologies if this is in the wrong section or forum entirely.

Ill get straight to it.

I have a website coded in asp.net. This site is simple in terms of functionality. A admin user is able to login to an admin section and add thier own content.

Content, is defined as a div with the class of .contentFrame and an id named after the DataBound items 'Title' property. Each content frame contains a <h6> For a title, a <p> for the content text and an <asp:Img> So the user can define an image to go in the content box. As the Home.aspx page loads, a database is quieried to get all the content frames that have been defined and an <asp:Repeater> sorts this data into its divs. A second <asp:Repeater> is also running to create a menu bar down the side of the page. For each .contentFrame div, there is a <asp:Hyperlink> with the text being the 'Title' of a .contentFrame.

With .js disabled, all of these .contentFrame divs, line up vertically down the page and when a hyperlink in the menu frame is clicked, its subject text is used to bring the div with a matching id name to the hyperlink text into view. This works fine.

However, with .js enabled, i would like only a single .contentFrame to be visible at any one time and when a hyperlink is clicked, for it to hide the currently shown div, and slowly show the new contentFrame. To do this, i have written the following JQuery code:

Please note, as i was not able to access the <asp:Hyperlink>'s Text property using $(this).attr('Text') or $(this).attr('id'), i simply created my own Hyperlink attribute called "myLinkTitle" and that is set according to
<%# DataBinder.Eval(Container.DataItem,"Title")%>


$(document).ready(function()
{   
    $('.link').click(function(event)                               
    {
        event.preventDefault(); // Prevent postback
        var sectionTitle = $(this).attr("myLinkTitle");

        $('.contentFrame').hide();
        $('.contentFrame').each(function(index){
                                                    if($(this).attr("id") == sectionTitle)
                                                    {
                                         
                                                        $(this).show('slow');
                                                    }
                                              });
        return false;
    });
});


In terms of function, this code works fine. It hides all the divs, then shows the correct div. However, each time a div is shown, the div's position moves further and further down the page. What i want is for the .contentFrame div to ALWAYS be level with the menu frame, the menu's frame CSS positioning is set to absolute.

I have not made a technical post on a forum before so if i have left out any obvious, vital information please say and i can edit it in.


Thank you for your time.