FadeIn function only works once

Question

I've seen similar posts about this, but none quite solve the problem. I have a series of divs that I need to fadeIn/fadeOut depending on what the user clicks. Long story short. I can get it to work the first time but after that if I click the element the div fades out but nothing fades in.

<section class="row margin-top-20">
    <div class="col-xs-12">
        <section class='find1 transparent-cheese'><!--find1-->
            <h3 class='review-title'>What's the occasion?</h3>
            <section class='row'>
                <div class='col-xs-3 margin-top-20'>
                    <div id='party'></div>
                        <p class='text-center find'>Party/ <br />
                            Entertainment
                        </p>
                </div>
                 <div class='col-xs-3 margin-top-20'>
                    <div id='cooking'></div>
                    <p class='text-center find'>Cooking
                    </p>
                </div>
                 <div class='col-xs-3 margin-top-20'>
                    <div id='treat'></div>
                        <p class='text-center find'>Treat Yourself
                        </p>
                </div>
                 <div class='col-xs-3 margin-top-20'>
                    <div id='not-sure'></div>
                        <p class='text-center find'>Not Sure
                        </p>
                </div>
            </section>
        </section> <!--end find1-->
    </div>
</section>
<section class='row 2nd-level'>
    <div class='col-xs-12'>
        <section class='find2a transparent-cheese'><!--find2a-->
            <img class='start-over-arrow' src="<?php echo get_stylesheet_directory_uri(); ?>/images/start-over-arrow.png"><p class='start-over'> start over</p>
            <h3 class='review-title'>What kind of party?</h3>
            <section class='row'>
                <div class='col-xs-3 margin-top-20'>
                    <div id='dinner'></div>
                        <p class='text-center find'>Dinner Party <br /> with Guests
                        </p>
                </div>
                <div class='col-xs-3 margin-top-20'>
                    <div id='kid-party'></div>
                        <p class='text-center find'>Kid's Party
                        </p>
                </div>
                <div class='col-xs-3 margin-top-20'>
                    <div id='foodie'></div>
                        <p class='text-center find'>Foodie Friends
                        </p>
                </div>
            </section>
        </section><!--end find2a-->
        <section class='find2b transparent-cheese'><!--find2b-->
            <img class='start-over-arrow' src="<?php echo get_stylesheet_directory_uri(); ?>/images/start-over-arrow.png"><p class='start-over'> start over</p>
             <h3 class='review-title'>What are you making?</h3>
             <section class='row'>
                <div class='col-xs-3 margin-top-20'>
                    <div id='fondue'></div>
                        <p class='text-center find'>Fondue
                        </p>
                </div>
                <div class='col-xs-3 margin-top-20'>
                    <div id='grilled-cheese'></div>
                        <p class='text-center find'>Grilled Cheese
                        </p>
                </div>
                <div class='col-xs-3 margin-top-20'>
                    <div id='pasta'></div>
                        <p class='text-center find'>Pasta/ <br />
                            Baked Foods
                        </p>
                </div>
                <div class='col-xs-3 margin-top-20'>
                    <div id='salad-toppers'></div>
                        <p class='text-center find'>Salad Toppers
                        </p>
                </div>
            </section>
        </section><!--end find2b-->

This is the jQuery code that works once, for the record I've tried fadeToggle and show()/hide(). I know there is way to accomplish this with a switch statement or if/else but I'm pretty certain it's possible without.

$('#party').click(function(){
    $('.find1').fadeOut(function(){
      $('.find2a').fadeIn(1000);
    });
});

 $('.start-over').click(function(){
    $('.2nd-level').fadeOut(function(){
   $('.find1').fadeIn(1000);
    });
});

Answer 1

This is the answer that worked for my page. I have several more with different classes but they all follow this basic concept.

$('#party').click(function(){
    $('.find1').fadeOut(function(){
      $('.find2a').fadeIn(1000);
    });
});

$('#cooking').click(function(){
    $('.find1').fadeOut(function(){
      $('.find2b').fadeIn(1000);
    });
});

 $('.start-over').click(function(){
    $(this).parent().fadeOut(function(){
   $('.find1').fadeIn(1000);
    });
});

Answer 2

In your example, after clicking .start-over you're attempting to fadeOut .2nd-level, but fading in .find2a (a child element of the .2nd-level element) after clicking #party.

.find2a won't reappear because its parent, .2nd-level, is transparent after fadeOut. If you want any of its child elements to reappear, you need to fade .2nd-level back in, not .find2a. You may wish to hide other child elements at that point to achieve the desired effect.

$('#party').click(function(){
    $('.find1').fadeOut(function(){
      $('.2nd-level').fadeIn(1000);
    });
});

 $('.start-over').click(function(){
    $('.2nd-level').fadeOut(function(){
   $('.find1').fadeIn(1000);
    });
});

Working example - I added some CSS to hide the 2nd-level class and wrapped the Party/Entertainment option in a div with id party:

http://jsfiddle.net/LbMff/