I am trying to hide element that are not siblings to a clicked element but it doens't seem to work. The toggle aspect works perfectly. However, if click on another row, they all still open even those that not siblings to the licked element. Any ideas on how this can be achieved. My code looks like below.

1. $("td i.material-icons").click(function () {
2.         // alert("It should be hidden");
3.         $(this).siblings("ul.messageNav").toggleClass("showMessageNav");
4.         $("ul.messageNav").not($(this).siblings("ul.messageNav")).hide();
5.     });

>>> link to a fiddle replicating the issue