Getting animate and fadeIn events to work

Getting animate and fadeIn events to work

Hi Guys,

l just started using jQuery a few days ago and l ran into a couple of issues l'm trying to solve.
Here is what l need to do:
1) A user clicks on a link
      a - A heading fades in Then
      b) a paragraph/details animate up, to just below the heading

2) The user clicks another link and the same thing as above happens but for a different heading and details.
      a - The previous heading and details disappear.

I have this partly working, 1) works but 2) fails and l want to make sure l am using the best practices and that the code is extensible.
The other thing is that it didn't seem to work in i.e.8

Please help, here is the code so far:

  1. <!DOCTYPE HTML>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Untitled Document</title>
    </head>

    <body>
    <a id="background" href="#">Background</a><br>
    <a id="plays" href="#">Plays</a><br>


    <h2 class="background" >Background</h2>
    <pre class="backgroundA" style="position:absolute; top:300px; opacity:0" >
    This a paragraph of content. - background
    This a paragraph of content. - background
    This a paragraph of content. - background
    This a paragraph of content. - background
    This a paragraph of content. - background
    This a paragraph of content. - background
    This a paragraph of content. - background
    This a paragraph of content. - background
    </pre>
    <h2 class="plays">Plays</h2>
    <pre class="plays" style="position:absolute; top:600px; opacity:0" >
    This a paragraph of content. - Plays
    This a paragraph of content. - Plays
    This a paragraph of content. - Plays
    This a paragraph of content. - Plays
    This a paragraph of content. - Plays
    This a paragraph of content. - Plays
    This a paragraph of content. - Plays
    This a paragraph of content. - Plays
    </pre>
    <script type="text/javascript"  src="js/jquery-1.8.2.min.js"></script>
    <script>
    $(function(){
       

        $('.background').hide();
        $('.plays').hide();
       
        var paragraphName = $('pre').attr('class');
        var headingName = $('h2').attr('class');

        $('a').click(function(e) {
            var linkName = $(this).attr('id');

           
            $('h2').each(function(index) {
                if($(this).attr('class') == linkName ){

                    $(this).attr('id',linkName).fadeIn("slow");
                    ($(this).next('pre')).animate({top:'100px', opacity:'1'},"slow");

                }else{
                    $(this).hide();
                    ($(this).next('pre')).hide();
                }
            });
           
           


        })
                .css('cursor','pointer');
    });
    </script>
    </body>
    </html>