Question

HTML:

<div class="container-fluid">
<div class="sidebar">
    <ul class="pills">  
        <li id="l1"><a id="link1">Lesson 1</a></li> <hr>
        <li id="l2"><a href="#" >Lesson 2</a></li> <hr>
        <li id="l3"><a href="#" >Lesson 3</a></li> <hr> 
    </ul>
   <div class="span16" id="target">
</div>

Javascript:

$('#l1').click(function(){
    $('#target').fadeOut('fast', function(){
        $('#target').load("lesson/lesson1.html", function(){
                $('#target').fadeIn('slow');

                });
            });

        });

I have 5 links within my webpage, I was wondering if there was anyway to make this one piece of code instead of copy + pasting it multiple times.

Answer 1

$('a.AjaxLink').click(function(){
    var url = this.href;

    $('#target').fadeOut('fast')
                .load(url, function(){ $(this).stop(true, false).fadeIn('slow'); });
    });

    return false;
});

This code handles the click event for all <a>s with a class of AjaxLink.

In the click handler, it grabs the href, fades out your #target, and performs the AJAX load.

When the AJAX load finishes, it stops the animation (in case the AJAX was faster than the fade), then fades it back in.

Finally, it tells the browser not to take the default action (navigating to the page) by returning false.