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:

1. 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()>?

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

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

Answer 1

1. 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.

2. 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.

Answer 2

1. As stated in the comments, jQuery(this) refers to the clicked element.

2. 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;
});