Is there a neater way than to repeat a function 3 times for 3 same actions?
<p>Basically I am doing something similar to this:</p>

<p><a href="http://jsfiddle.net/3XwZv/71/" rel="nofollow">http://jsfiddle.net/3XwZv/71/</a></p>

<p>Except I have 3 instances of these, all with the same function required for each button. And there's no back button/link to return it to its normal state.</p>

<p>So i've labeled each insance with its own unique id's for the relavant parts and the following jquery:</p>

<pre><code>    $('#btn0').click(function(e){    
            $('#btn0').fadeOut('slow', function(){
                $('#reveal0').fadeIn('slow');
            });
        });
        $('#btn1').click(function(e){    
            $('#btn1').fadeOut('slow', function(){
                $('#reveal1').fadeIn('slow');
            });
        });
        $('#btn2').click(function(e){    
            $('#btn2').fadeOut('slow', function(){
                $('#reveal2').fadeIn('slow');
            });
        });
</code></pre>

<p>It just seems a bit clunky this way and was wandering if theres neater syntax to do this? I've tried .each and listing them all in one function but they all fade together then which isn't what i want. Thanks</p>
