Combining four functions for toggling gallery displays Here is my HTML:

    &lt;section id="artists"&gt;
        &lt;div class="artists-home" style="display: block;"&gt;
            &lt;a class="artist-ken" href="#"&gt;Ken&lt;/a&gt;
            &lt;a class="artist-kina" href="#"&gt;Kina&lt;/a&gt;
        &lt;/div&gt;
        &lt;div class="ken-gallery" style="display: none;"&gt;
            &lt;a class="gallery-home" href="#"&gt;&lt;img src="img/rewind.png" alt="Back to main gallery" width="50"&gt;&lt;/a&gt;
        &lt;/div&gt;
        &lt;div class="kina-gallery" style="display: none;"&gt;
            &lt;a class="gallery-home" href="#"&gt;&lt;img src="img/rewind.png" alt="Back to main gallery" width="50"&gt;&lt;/a&gt;
        &lt;/div&gt;
    &lt;/section&gt;


This is some jQuery I set up to have the divs fadeIn/FadeOut. Is there a way to combine all of these together or a more elegant way of writing it? I feel I'm repeating things too much.

    $('.ken-gallery .gallery-home').click(function( e ){
        e.preventDefault();
        $('.ken-gallery').fadeOut(function() {
            $('.artists-home').fadeIn('slow');
        });
    });

    $('.kina-gallery .gallery-home').click(function( e ){
        e.preventDefault();
        $('.kina-gallery').fadeOut(function() {
            $('.artists-home').fadeIn('slow');
        });
    });

    $('.artist-ken').click(function( e ){
        e.preventDefault();
        $('.artists-home').fadeOut(function() {
            $('.ken-gallery').fadeIn('slow');
        });
    });

    $('.artist-kina').click(function( e ){
        e.preventDefault();
        $('.artists-home').fadeOut(function() {
            $('.kina-gallery').fadeIn('slow');
        });
    });
The way I have read the code, it looks like you can see 1 gallery at a time or the home links but not both.

It's not much of a saving in code, but you could simplify it a little and assume that if artists-home is clicked that all galleries fade out.

  &lt;section id="artists"&gt;
        &lt;div class="artists-home" style="display: block;"&gt;
            &lt;a class="artist" data-artist="ken" href="#"&gt;Ken&lt;/a&gt;
            &lt;a class="artist" data-artist="kina" href="#"&gt;Kina&lt;/a&gt;
        &lt;/div&gt;


            &lt;div class="gallery" data-artist="ken" style="display: none;"&gt;
                &lt;a class="gallery-home" href="#"&gt;&lt;img src="img/rewind.png" alt="Back to main gallery" width="50"&gt;&lt;/a&gt;
              &lt;/div&gt;
            &lt;div class="gallery" data-artist-"kina" style="display: none;"&gt;
                &lt;a class="gallery-home" href="#"&gt;&lt;img src="img/rewind.png" alt="Back to main gallery" width="50"&gt;&lt;/a&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/section&gt;



   $('.gallery-home').click(function( e ){
        e.preventDefault();
        $('.gallery').fadeOut(function() {
            $('.artists-home').fadeIn('slow');
        });
    });


Then for showing the gallery we could use a data tag instead of class names to identify the links and galleries, then you could easily extend the code to include more galleries, with no extra js

$('.artist').click(function( e ){
    e.preventDefault();

    var artist = $(this).data('artist');

    $('.artists-home').fadeOut(function() {
        $('.gallery[data-artist' + artist + ']).fadeIn('slow');
    });
});


Please note, this code is not tested, I might have missed something