Question

So basically I have a navigation bar on the left. When the user clicks an option it should fade in the content associated with it. When the user clicks another option, it should fade out the current content and fade in the next. I know how to take care of the logic for that but for some reason the fadein is not working. Here’s my html

<div id="Hotel" class="Information"  style="display:none;">
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
</div>

Here’s my jquery:

$(document).ready(function(e) {
    $("ul.navigation > li").click(function(e) {
        $sel = $(this).val();
        if($sel == 0)
            $("#schedule").show();
        else if($sel == 1) {
            $('#Hotel').show();
            $('#Hotel').fadeIn('slow');
        }
    });
});

When I click the hotel link on the navigation bar, the content just appears without any fading. What is the problem with my code?

Answer 1

Try like this

$(document).ready(function(e) {
$("ul.navigation > li").click(function(e) {
    $sel = $(this).val();
    if($sel == 0)
        $("#schedule").show();
    else if($sel == 1) {
        $('#Hotel').fadeIn('slow');
    }
  });
});

remove the show() function from your code and edit like this