Hide/fadeOut a div in table

Hide/fadeOut a div in table

Hi there,

I'm using the following code for my tab navigation (which works really well):

<script type="text/javascript">
    $(document).ready(function () {

        //When page loads...
        $(".tab_content").hide(); //Hide all content
        $("ul.tabs li:first").addClass("active").show(); //Activate first tab
        $(".tab_content:first").show(); //Show first tab content


        //On Click Event
        $("ul.tabs li").click(function () {

            $("ul.tabs li").removeClass("active"); //Remove any "active" class
            $(this).addClass("active"); //Add "active" class to selected tab
            $(".tab_content").hide(); //Hide all tab content

            var activeTab = $(this).find("a").attr("href"); //Find the href attribute value to identify the active tab + content
            $(activeTab).fadeIn(); //Fade in the active ID content

            $("#Heading").html($(this).find("a").attr("id"));

            return false;
        });

    });
</script>

In these tabs are somes tables and divs. Now, I wanted to hide or fadeOut a div, which is placed in a table. The div itself also contains a table. I came up with the following code:

<script type="text/javascript">
    $(document).ready(function () {

         $("a.divimg").click(function () {
            var divContainer = $(this).attr("href");
            $(divContainer).fadeOut();

        });

    });
</script>

But this doesn't work. The value of divContainer is exactly the id of the div with a # in front (example: #div1). I have to do it this way (dynamically), because the HTML is generated by ASP.Net code.

Do you guys have a clue, why this is not working?

Thanks and best regards,

Mark