CODEWITHSUNDEEP
jquery
good_evening
good_evening

Reputation: 21739

Jquery. Why this works?

Can you explain why this http://www.sebastiansulinski.co.uk/demos/jquery_show_hide/ works? There is all classes the same, but when you click open, opens only one text. Why?

Upvotes: 0

Views: 190

Answers (6)

Tatu Ulmanen
Tatu Ulmanen

Reputation: 124768

When you click a div with class trigger, it will open up the element next to the trigger using next(). The class names don't matter as it operates on $(this), which is the clicked element.

After it has opened the following div, it assigns itself a class 'open' so that it can act differently when the user clicks on it the next time.

The code for that page goes like this:

$('div.trigger').click(function() {
    if ($(this).hasClass('open')) {
        $(this).removeClass('open');
        $(this).addClass('close');
        $(this).next().slideDown(100);
        return false;
    } else {
        $(this).removeClass('close');
        $(this).addClass('open');
        $(this).next().slideUp(100);
        return false;
    }            
});

Which, translated to english, goes like this:

/*
When .trigger is clicked:
    If it has a class named 'open':
        Remove that class,
        and add a class named 'close'.
        Slide down the element next to this element in 100 milliseconds.
        Prevent other actions from taking place.
    If it hasn't got a class named 'open':
        Remove class 'close',
        and add class 'open'.
        Slide up the element next to this element in 100 milliseconds.
        Prevent other actions from taking place.

Upvotes: 6

Sampson
Sampson

Reputation: 268344

Some inline commentary might explain this clearly:

#If we have divs with the class 'trigger'
if($('div.trigger').length > 0) {
  # Attach logic to the click event of each
  $('div.trigger').click(function() {
    # If this has the class 'open' already
    if ($(this).hasClass('open')) {
      # Remove the class 'open'
      $(this).removeClass('open');
      # Add the class 'close'
      $(this).addClass('close');
      # And slide down the next div
      $(this).next().slideDown(100);
      # Return False
      return false;
    } else {
      # If this didn't have 'open', remove 'close'
      $(this).removeClass('close');
      # Add the class 'open'
      $(this).addClass('open');
      # And slide up the next div
      $(this).next().slideUp(100);
      # Return false
      return false;
    }           
  });
}

Upvotes: 2

BalusC
BalusC

Reputation: 1108682

The $(document).ready() function in the source code attaches a new click function to every $('div.trigger') element:

$('div.trigger').click(function() {
    // ...
});

In the function the individual (current) div is denoted by $(this).

if ($(this).hasClass('open')) {
    // ...
}

In a nutshell, each div has the same function assigned and the function code is written in the perspective of the current (clicked) div.

Upvotes: 0

digitalsanctum
digitalsanctum

Reputation: 3299

This is because you are operating with $(this) which translates to the button you click.

Upvotes: 0

Corey Ballou
Corey Ballou

Reputation: 43457

It only opens one text container because the click event is bound to each individual element matching div.trigger. When you click on one of the matching elements, you are only clicking on one matching element, not all 3 in the example. Usage of $(this) inside the click callback function only references the clicked element.

The code can also be cleaned up a little bit by simply chaining calls together:

$('div.trigger').click(function() {
    if ($(this).hasClass('open')) {
        $(this).removeClass('open').addClass('close').next().slideDown(100);
    } else {
        $(this).removeClass('close').addClass('open').next().slideUp(100);
    }
    return false;
});

Upvotes: 6

Isaac
Isaac

Reputation: 16372

$('div.trigger').click(function()...this... Means that when you click on a trigger class element, the function is applied to only this, being the element you clicked on. When you click on it, it gets a new class, open, which gives it new properties.

Upvotes: 0

Related Questions