how to find the siblings of parent using jquery

Question

in my case am having a two html elements covered by a another element(grand parent) like this

 <div class="tabs">
  <ul class="header">
    <li> <a> </a> </li>
  </ul>
  <div class="content show"> </div>
  </div>

here tabs is a grand parent and header and show are its child my problem is while clicking <a> which is a grand child of header need to remove a class show sibling of header

i used closest() it doesn't help's here my tried demo

$(this).closest('content').removeClass('show');

help me out

EDIT: (markup in jsfiddle)

<div class="tabs">
    <ul class="tabheader">
        <li class="active"><a href="#fragment-1"><span>FAQs</span></a>
        </li>
        <li><a href="#fragment-2"><span>Credit bundle</span></a>
        </li>
        <li><a href="#fragment-3"><span>Delivery & turnaround times</span></a>
        </li>
        <li><a href="#fragment-4"><span>Testimonials</span></a>
        </li>
    </ul>
    <div class="clearfix"></div>
    <div id="fragment-1" class="tabed_contents show">adasdasd</div>
    <div id="fragment-2" class="tabed_contents">adasdasd</div>
    <div id="fragment-3" class="tabed_contents">adasdasd</div>
    <div id="fragment-4" class="tabed_contents">adasdasd</div>
</div>

Answer 1

Firstly, you need to use the . prefix in your class selector. However, what you have is looking for the parent .content element, yet it is a sibling of a parent and hence will not be found.

Try this:

$(this).closest('.tabs').find('.tabed_contents').removeClass('show');

Alternatively, you could go to .header and find the sibling .content.

$(this).closest('.header').siblings('.tabed_contents').removeClass('show');

To not hide all the .tabed_contents use this:

$(this).closest('.tabs').find('.tabed_contents').hide();

Fiddle

Answer 2

Try this :

$( this ).parent().parent().siblings(".content").removeClass('show');