So I have this HTML:

<div class="tip-box">
    <div class="tip-title" onclick="toggleTip()">
        <h2>Tip 1</h2>
    </div>
    <div class="tip-content hidden">
        <p>Tip 1 content</p>
    </div>
</div>

And this Javascript:

function toggleTip() {
    $(this).siblings(".tip-content").toggleClass("hidden");
}

Hopefully it's obvious what this is supposed to do, but it doesn't work. Using .siblings() just doesn't seem to work in this way.

What's the correct solution for this? To get the next sibling of a certain type or with a certain class and then hide/show it?

So I have this HTML:

<div class="tip-box">
    <div class="tip-title" onclick="toggleTip()">
        <h2>Tip 1</h2>
    </div>
    <div class="tip-content hidden">
        <p>Tip 1 content</p>
    </div>
</div>

And this Javascript:

function toggleTip() {
    $(this).siblings(".tip-content").toggleClass("hidden");
}

Hopefully it's obvious what this is supposed to do, but it doesn't work. Using .siblings() just doesn't seem to work in this way.

What's the correct solution for this? To get the next sibling of a certain type or with a certain class and then hide/show it?

• javascript
• jquery
• html

• 2 Like this? – Josh Crozier Commented Jan 10, 2015 at 2:41
• 2 The problem is this isn't what you expect. – nnnnnn Commented Jan 10, 2015 at 2:41
• @JoshCrozier has the right idea here. You just forgot to pass the context of the click to the function. – stewart715 Commented Jan 10, 2015 at 2:42
• @JoshCrozier ha yeah I was talking to OP, saying you did it correctly :) – stewart715 Commented Jan 10, 2015 at 2:44
• You would like to get only one sibling or siblings with class name .tip-content? – Suman Bogati Commented Jan 10, 2015 at 2:55

5 Answers 5

You can use Jquery function.

<div class="tip-box">
    <div class="tip-title">
        <h2>Tip 1</h2>
    </div>
    <div class="tip-content hidden">
        <p>Tip 1 content</p>
    </div>
</div>

$(document).ready(function(){
    $('.tip-title').click(function(){
        $(this).siblings(".tip-content").toggleClass("hidden");
    });
});

you can also use this

<div class="tip-box">
    <div class="tip-title" onclick="toggloTip(this)">
        <h2>Tip 1</h2>
    </div>
    <div class="tip-content hidden">
        <p>Tip 1 content</p>
    </div>
</div>


<script>
function toggloTip(elm) {
    $(elm).siblings(".tip-content").toggleClass("hidden");
}
</script>

You can use pure javaScript with nextElementSibling property of node something like below, I suppose you want do this operation with siblings.

function getChildrens(n, selector) {
  var nodes = [];
  while (n.nextElementSibling != null) {
    if (n.nextElementSibling.hasOwnProperty('classList')) {
      if (n.nextElementSibling.classList.contains(selector)) {
        //return n.nextElementSibling;
        nodes.push(n.nextElementSibling);
      }
    }
    n = n.nextElementSibling;
  }
  return nodes;
};

function getSiblings(n, selector) {
  return getChildrens(n, selector);
}

function toggleTip(elem) {
  var siblings = getSiblings(elem, "tip-content");
  if (siblings.length > 0) {
    for (var i = 0; i < siblings.length; i++) {
      siblings[i].classList.toggle("hidden");
    }
  }
}

.hidden {
  display: none;
}

<div class="tip-box">
  <div class="tip-title" onclick="toggleTip(this)">
    <h2>Tip 1</h2>
  </div>
  <div class="tip-content hidden">
    <p>Tip 1 content</p>
  </div>
</div>

Here is another non JQuery answer.

To get the next element sibling use:

var nextElement = element.nextElementSibling;

To get the previous element sibling use:

var previousElement = element.previousElementSibling;

To get the element index use:

var index = Array.prototype.slice.call(element.parentElement.children).indexOf(element);

If you are at the first element the previousElementSibling value will be null.

If you are at the last element the nextElementSibling value will be null.

How about this JavaScript:

$(function(){
    $('.tip-box').on('click', '.tip-title', function(){
        $(this).next('.tip-content').toggleClass('hidden');
    });
});

Remove the idea of working with onclick attributes when you use jQuery.

None of the previous answers, not even that serial-upvoted one ;), actually explains the problem and why their solutions work.

The problem is that an inline onclick handler does not pass on its current context. Inside the onclick="" JavaScript code this is the element clicked. Once you call a global function (like your toggleTip), that context is lost. The this the function receives is window and not the element.

The usual quick fix, for raw JavaScript code, is to pass this as a parameter to the global function.

e.g.

onclick="toggleTip(this)" 

and receive a parameter in the function like this:

function toggleTip(element) {
    $(element).siblings(".tip-content").toggleClass("hidden");
}

However, as you are using jQuery, inline event handlers are actually a bad idea. They separate the event registration from the event handler code for no reason and do not allow for multiple event handlers, of the same type, on the same element. They also bypass the rather cool event bubbling system jQuery uses.

The preferred alternative, with jQuery, is to use jQuery to select the element and jQuery to connect the event in one step:

jQuery(function($){
    $('.tip-title').click(function(){
        $(this).siblings(".tip-content").toggleClass("hidden");
    });
});

As you only want the element that follows, and potentially will add more pairs, the better option would be using nextAll and first(), with the same jQuery filter, instead of siblings:

e.g.

jQuery(function($){
    $('.tip-title').click(function(){
        $(this).nextAll(".tip-content").first().toggleClass("hidden");
    });
});

Or, of you can guarantee it is the next element, use next as @Tim Vermaelen did (with or without the selector makes no difference, so might as well leave it out):

jQuery(function($){
    $('.tip-title').click(function(){
        $(this).next().toggleClass("hidden");
    });
});

Note: In this example jQuery(function($){ is a DOM ready event handler which is the rather handy shortcut version of $(document).ready(function(){YOUR CODE});, which also passes a locally scoped $ value. For those that mistake this code for an incorrect IIFE, here is a working example: http://jsfiddle/TrueBlueAussie/az4r27uz/