jQuery hide div, show div with new content

Question

I am trying to retract my div, then show it with new content based on which link they clicked.

HTML:

          <div id="menu">
    <ul>
                <a href="#" title="content_1" alt="about" class="menu"><li>about</li></a>
                <a href="#" title="content_2" alt="contact" class="menu"><li>contact</li></a>
                <a href="#" title="content_3" alt="cv" class="menu"><li>cv</li></a>
            </ul>
        </div>

       <div class="content">
            test
        <div id="content_1" class="content">
            content1
        </div>
        <div id="content_2" class="content">
            content2
        </div>
        <div id="content_3" class="content">
            content3
        </div>
    </div>

JS:

<script type="text/javascript">
        $(document).ready(function(){
            $("a.menu").click(function() {
                var clicked = $(this).attr('title');
                $(".content").hide('slide', {direction: 'right'}, 1000);
                $("#"+clicked).show('slide', {direction: 'left'}, 1000);
            });
        });
    </script>

CSS:

.content {
position: absolute;

left:303px;
top: 200px;
width: 100%;

margin-top: 200px;
background: #6c7373;

 }

#content_1, #content_2, #content_3 {
display: none;
 }

What happens is: the div retracts, but does not reappear at all, what is going wrong here?

Thanks.

Answer 1

First, notice that the container for all of the potential DIVs has the content class so it's being hidden as well. Since the container is hidden, it won't matter if you "show" one of the contained elements. Second, note that the "hide" statement and the "show" statement will have a race condition since they will both apply to the element that's being hidden. It would be better to show the item in the callback to the hide operation or exclude it from being hidden.

<div class="content_wrapper"> <!-- give it a different class -->
        test
    <div id="content_1" class="content">
        content1
    </div>
    <div id="content_2" class="content">
        content2
    </div>
    <div id="content_3" class="content">
        content3
    </div>
</div>

<script type="text/javascript">
    $(document).ready(function(){
        $("a.menu").click(function() {
            var clickedID = '#' + $(this).attr('title');
            $(".content:not(" + clickedID +")").hide('slide', {direction: 'right'}, 1000);
            $(clickedID).show('slide', {direction: 'left'}, 1000);
        });
    });
</script>

Answer 2

将外部.content更改为.content-wrapper 。

Answer 3

Show and hide are both working at the same time. To avoid the conflict (and not hide then show the content that's visible if the user clicks the same item twice), show the one you want and hide the others by selecting them using siblings()

Working demo

$("a.menu").click(function() {
    var clicked = $(this).attr('title');
    $("#"+clicked).show(1000).siblings().hide(1000);
});

This will also solve the problem you have that you have given the wrapper div the class of .content too.

Also your ul li structure is wrong. You need the a tags inside the li. li must come directly after ul.