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>