Question

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.

Answer 1

There appears to be an “invisible” character at the end of this code:

$(".select a").click(function(event){
    event.preventDefault();
    $(".about_txt").hide('slow');
    var toShow = $(this).attr('href');
    $(toShow).show('slow');
});​  //<= There's an invisible character here, 
     //    you can try pressing backspace once at the end of the semicolon

For quick fix, delete the invisible character OR copy&paste the following code and replace yours:

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

Edit: A bit of investigation shows that the invisible character is ZERO WIDTH SPACE (U+200B)