Как скрыть div, когда его щелкнули и показать другое?

Question

У меня есть этот запрос клик функции:

<script type="text/javascript"> 
$(document).ready(function() { 

    $('.show_hide').click(function() { 
     $(".box").fadeIn(400); 
     //$(".box").fadeOut(2500); 
    }); 
}); 
</script> 

<div class="show_hide">Click Here</div> 

    <div class="box" style="display:none;"> 
    <div class="success_message"> 
     <span class="yes">Yes</span> 
     <span class="no">No</span> 
    </div> 
</div> 

После «Нажмите здесь» нажата, я хочу, чтобы скрыть нажмите здесь опцию и показать, да и нет. Но когда щелкнут любой из этих параметров (да или нет), я хочу скрыть их и показать здесь. Как я могу это сделать?

Как я могу это достичь?

Answer 1

Demo -->http://jsfiddle.net/52a4n/1/

$('.show_hide').click(function() { 
    $(this).fadeOut(); 
    $(".box").fadeIn(400); 
}); 

$('.yes,.no').click(function() { 
    $(".box").fadeOut(250,function(){ 
     $('.show_hide').fadeIn(); 
    }); 
}); 

Answer 2

У вас был правильный подход до сих пор, вам просто нужно было пройти немного дальше. Это должно заставить вас, где вы хотите, чтобы идти до тех пор, пока у вас есть дивы коробка сразу после коробки дивы

$(document).ready(function() { 
    $('.show_hide').click(function() { 
     $(this).hide().next().fadeIn(400); 
    }); 

    $('.box .success_message span').click(function() { 
     $(this).parents('.box:first').hide().prev().fadeIn(400); 
    }); 
}); 

Answer 3

Check this fiddle

$(document).ready(function() { 
    $('.show_hide').click(function() { 
     $(this).fadeOut(400, function() { 
      $(".box").fadeIn(400); 
     }); 

    }); 

    $('.success_message span').click(function() { 
     $(".box").fadeOut(400, function() { 
      $('.show_hide').fadeIn(400); 
     }); 
    }) 
});