jquery show / hide div on click?

Question

I'm trying to use jquery to show and hide a div onclick, and, although I'm not getting any errors, it's not showing or hiding anything either.

*EDIT - UPDATED * $(document).ready(function() {

        $("#nav-inner a").click(function() {
            var type = $(this).attr("class");
                $("div.v1 > div").not("." + type).stop().hide().end().filter("." + type).stop().show();
                return false;
    });

});

Here's the jquery:

$(document).ready(function() {
        if($("#nav-inner")) {
                $("#nav-inner ul li a").click(function(evt) {
                        var type = $(this).attr("class");
                        var rowcount = 0;
                        $('div.v1 .vc').each(function(idx,el) {
                                if(type == 'typea') {
                                    if($(el).hasClass('typea')) {
                                                $(el).show();
                                        } else {
                                                $(el).hide();
                                        }
                                } 
                        });
                    });
    }
});

And here's the markup:

<div id="page">
    <div id="header">
        <div id="nav">
            <div id="nav-inner">
                <ul class="nav-inner-li">
                    <li>
                        <a class="typea" href="#"><img src="/images/typea.png"></a>
                        <a class="typea" href="#">Type A</a>
                    </li>
                </ul>
            </div>
        </div>
    </div>

    <div id="content">
        <div id="content-content">
            <div id="content-left">
                <div class="v1">
                    <div class="vc">
                        <div class="typea">
                            <div class="title"> Title </div>
                            <div class="body"> Body </div>
                        </div>

                        <div class="typeb">
                            <div class="title"> Title 2 </div>
                            <div class="body"> Body 2 </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Answer 1

This can be made much simpler.

$(function() {
  $("#nav-inner a").click(function() {
    var type = $(this).attr("class");
    $("div.vc > div").not("." + type).stop().hide()
      .end().filter("." + type).stop().show();
    return false;
  });
});

Your first error was #nav-inner ul where #nav-inner is actually the ul element. The above grabs the class from the clicked link and then selects the child of div.v1 with that class and toggles it (shows it if hidden, hides it if not).