JQuery "Show more" function
<p>So I am having a little trouble understanding JQuery and how to perform the "Show more" function. Here is my HTML File I am working which is from the Murach JQuery Book</p>

<pre><code>&lt;main id="jdom"&gt;
    &lt;h1&gt;Murach's JavaScript and DOM Scripting&lt;/h1&gt;
    &lt;h2&gt;Book description&lt;/h2&gt;
    &lt;div&gt;
        &lt;p&gt;You can read other JavaScript books from start to finish and still not
        know how to develop dynamic websites like you want to. That's because 
        it's DOM scripting that lets you do things like run slide shows, handle image
        rollovers, rotate headlines, provide animation, and more. And it's a subject 
        that's glossed over or ignored in most other books.&lt;/p&gt;
    &lt;/div&gt;
    &lt;div class="hide"&gt;
        &lt;p&gt;But now, you can go from JavaScript beginner to DOM scripting expert in a 
        single book! Fast-paced, professional, and packed with expert practices, our 
        new JavaScript book guides you through each step as you learn how to program 
        sites that enhance the user experience and ensure browser compatibility.&lt;/p&gt;
    &lt;/div&gt;
    &lt;a href="#"&gt;Show more&lt;/a&gt;
</code></pre>

<p>Here is the Jquery I am working with </p>

<pre><code>$(document).ready(function() {
   $("a").click(function() {
      $(this).toggleClass("hide");
       if ($(this).attr("class") != "hide") {
            $(this).next().hide();
       }
       else {
           $(this).next().show();
       }

   });

});
</code></pre>

<p>So I am having a little trouble spotting the bug with the code. Of if I am incorrectly pulling the class hide into the classToggle method. Any help with a little more insight into where I am going wrong would be greatly appreciated!</p>