Combining four functions for toggling gallery displays

Question

Here is my HTML:

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

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');
        });
    });

Answer 1

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.

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


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



   $('.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