I am ready to pull my hair out trying to debug this code. I have a page that needs to show numerous sub-posts in the same page without going to another page, however I cannot get the code to work but I cannot find anything wrong. I have even deleted it completely and re-wrote it from scratch to try to find the error but nothing and as always javascript is horrible in pointing the error out to me. I have tried firebug, jslint and made the same structure in jsfiddle but I cannot find the problem. I will say that the same code worked fine in jsfiddle but nowhere else. I see that the page is loading jquery correctly so the api is not the issue. Please help, I do not know what else to do!

Here is the code structure:

HTML-Post Nav

<ul id="sub_select"> <li class="select"> <a href="#post1">Post 1</a> </li> <li class="select"> <a href="#post2">Post 2</a> </li> </ul>

HTML-Posts

<div id="post1" class="about_txt"> <div class="title"> <h1>Post 1</h1> </div> <div class="desc"> <p>The post itself</p> </div> </div> <div id="post2" class="about_txt" style="display: none;"> <div class="title"> <h1>Post 2</h1> </div> <div class="desc"> <p>The post itself</p> </div> </div>

jQuery script :(

$(document).ready(function() { $(".select a").click(function(event){ event.preventDefault(); $(".about_txt").hide('slow'); var toShow = $(this).attr('href'); $(toShow).show('slow'); });​ });

UPDATE: I've added the $ that I apparently forgot to copy, but thanks for pointing this out. I still have the issue though.