jQuery toggleClass targeting correct element

Question

Trying to learn jQuery, and toggleClass specifically.

Goal: load a div with a set height and hide the overflow... click an element to show the entire div. Like an accordion, but the top part of the content shows... clicking reveals the rest.

Here's the jQuery (jQuery not $ since I'm working in WPress)...

jQuery('.openup').click(function() {
    jQuery('.clip').toggle();
    jQuery(this).toggleClass('clipactive');
    return false;
});

Here's my Fiddle

I need help understanding two things:

Why is the class 'clipactive' getting added to the clicked element? Doesn't 'this' refer to 'clip' in the line above it? How do I get it to target? Sibling()>?
Why does 'clip' get an inline style 'display:none' when I toggle the class?

Is that related to 'this' not being targeted correctly?

jQuery(this) refers to jQuery('.openup'), the element that was clicked. — j08691
– j08691, Commented Jun 26, 2015 at 14:44
this refers to the element you bound the click handler to, in this case that would be .openup. clip gets display: none; because you're calling toggle() on it — billyonecan
– billyonecan, Commented Jun 26, 2015 at 14:45

Katrina · Accepted Answer · 2015-06-26 14:51:23Z

1

As stated in the comments, jQuery(this) refers to the clicked element.
The jQuery('.clip').toggle(); will toggle the .clip class, which means it will display or hide the element, whichever one it isn't. So, it will change from display:none; to hide it, and display:block; to show it.

I think this is the code you want:

jQuery('.openup').click(function() {
    jQuery('.clip').toggle();
    jQuery('.clip').toggleClass('clipactive');
    return false;
});

answered Jun 26, 2015 at 14:51

Katrina

1,9352 gold badges26 silver badges45 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Web Guy Over a year ago

Thanks for the response. Once I removed the toggle() I got what I needed.

subhaze Over a year ago

"The jQuery('.clip').toggle(); will toggle the .clip class" This statement isn't quiet correct, it toggles the display of the element it's triggered on. Basically it toggles display:none.

Katrina Over a year ago

@subhaze Yes, you are correct it won't toggle the class, but I think I cleared it up when I said it will display or hide the element. I should have said "will toggle the elements with the .clip class", but I think he go the point.

subhaze Over a year ago

Definitely, was just suggesting you might edit that part is all.

subhaze · Accepted Answer · 2015-06-26 15:20:27Z

Why is the class 'clipactive' getting added to the clicked element? Doesn't 'this' refer to 'clip' in the line above it? How do I get it to target? Sibling()>?

this refers to the element that click was bound to.

I say 'bound to' because you could have a <span> as a child of .openup that was clicked, but this would not refer to the <span>, it would refer to .openup since that's what you bound the event to. A bit more info on event handling can be found at https://learn.jquery.com/events/inside-event-handling-function/

You could get reference to .clip a few different ways, below I'll show code to use a data- so you can define a selector to what element you want to target:

HTML:

<div class="openup" data-target=".clip">Lorem Ipsum </div>
<div class="clip">...</div>

JS:

jQuery('.openup').click(function() {
    var target = $($(this).data('target'));
    target.toggleClass('clipactive');
    return false;
});

$(this).data('target') (this refers to the element clicked) grab the value of data-target which is the class we're wanting to target and then we wrap it with $() so that jQuery will grab the element by the selector provided $($(this).data('target')); and we can now toggle the class.

Why does 'clip' get an inline style 'display:none' when I toggle the class?

This isn't because of toggleClass, it's because you're toggling the element in and out of view jQuery('.clip').toggle(); that line is not the same as toggleClass

updated jsfiddle https://jsfiddle.net/b5u141gL/1/

.toggle() http://api.jquery.com/toggle/

Display or hide the matched elements.

.data() https://api.jquery.com/data/

Store arbitrary data associated with the matched elements or return the value at the named data store for the first element in the set of matched elements.

Thanks not only for your answer, but for all the extra info! One of my problems was not noticing the toggle vs. toggleClass difference.

Collectives™ on Stack Overflow

jQuery toggleClass targeting correct element

2 Answers 2

4 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related