Question

I have a function that remains pretty much constant except for the changing class names. I was hoping to make the code a little less text heavy. How may I go about making it just a small function instead of repeating it n times. My concern is also about removing the active class for the last li that was clicked. I’ve provided only 2 instances here, but this code is repeated n number of times.Any ideas would be much appreciated.

        $('a.app1-preview').click(function() {
            //remove last active classes
                    $(".app2").removeClass('active');
                    $(".app2-preview").removeClass('active');
                    //Add active class for this 
            $(this).parent().addClass('active');
            $(this).addClass('active');
            $('.app-preview-2').fadeOut("slow", function () {
                $('.app-preview-1').fadeIn("slow");

            });        
        });

        $('a.app2-preview').click(function() {
            //remove last active classes
                    $(".app1").removeClass('active');
                    $(".app1-preview").removeClass('active');
                    //Add active class for this 
                    $(this).parent().addClass('active');
            $(this).addClass('active');
            $('.app-preview-1').fadeOut("slow", function () {
                $('.app-preview-2').fadeIn("slow");
            });        
        });

HTML code:

 <div class="app-container">
                <ul class="apps">
                  <li class="app1"> 
                      <a title href="#" class="app1-preview blocklink">
                            <span>ANOTHER<br /> APP</span>
                      </a> 
                  </li>
                  <li class="app2"> 
                      <a title href="#" class="app2-preview blocklink">
                            <span>SECOND<br /> APP</span>
                      </a> 
                  </li>
</div>

Answer 1

Try to exploit the fact that you have .active class. 😉 Preview – http://jsfiddle.net/evSqF/1/

js:

<script>
    $('a.blocklink').click(function() {
        var self = $(this);

        $('.active').fadeOut('slow', function(){
            $(this).removeClass('active');

            self.fadeIn('slow');
            self.addClass('active');
        });
    });
</script>

html:

<div class="app-container">
    <ul class="apps">
        <li class="app1">
            <a title href="#" class="app1-preview blocklink">
                <span>ANOTHER<br /> APP</span>
            </a>
            <div class="app-preview active">App1 preview</div>
        </li>
        <li class="app2"> 
            <a title href="#" class="app2-preview blocklink">
                <span>SECOND<br /> APP</span>
            </a>
            <div class="app-preview">App2 preview</div>
        </li>
    </ul>
</div>