CODEWITHSUNDEEP
jqueryhtml
Suliman Sharif
Suliman Sharif

Reputation: 607

JQuery "Show more" function

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

<main id="jdom">
    <h1>Murach's JavaScript and DOM Scripting</h1>
    <h2>Book description</h2>
    <div>
        <p>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.</p>
    </div>
    <div class="hide">
        <p>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.</p>
    </div>
    <a href="#">Show more</a>

Here is the Jquery I am working with 

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

   });

});

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!

Upvotes: 1

Views: 1611

Answers (2)

glutengo
glutengo

Reputation: 387

The main problem is that you are performing some of your jquery operations inside the clickhandler on $(this). Calling $(this) inside another jquery function always refers to the element it was initially called on.

So when you call $(this).toggleClass("hide") you toggle the hide class on the a element. I assume that you actually wanted to toggle the class on the div with additional content. To achieve this in the closest way possible to what you did in your provided code, you should call $(this).prev().toggleClass("hide").

You should also replace your .next() calls with .previous() because the div you want to show/hide is the previous DOM element (in relation to the a element) and not the next one.

Here is a working fiddle with some slight alterations to your provided code: https://jsfiddle.net/49b9mL2q/

and here is one with a little more simplification: https://jsfiddle.net/2w48cg1x/

Good luck learning jQuery and keep going!

Upvotes: 1

Brett
Brett

Reputation: 4269

You are referencing the wrong element to hide. It's a common mistake, but I think you may be a little confused on what this refers to. Inside the click event function, this refers to the <a> element clicked on. So, referencing $(this) and toggling the .hide class is not what you want to do.

I assume you want to hide the element that already has the .hide class. So, you need to select it inside your event handler. You can utilize the relationship between the clicked <a> element, $(this), and its siblings to select the correct <div>. You could have more than one book description with a .hide class, so, you only want to show the related one, not all of them.

$('a').click(function() {
  var $element = $(this).siblings('div.hide');
  $element.show();
});

A few questions I have that are unclear:

  • Is it necessary to remove the hide class from the element? It's unclear if CSS rules hide the element or if jQuery does.
  • Say I wanted to re-hide the element, but the hide class was removed. How would you select it easily? Maybe removing the class is not the way to go.

Upvotes: 1

Related Questions