javascript - show/hide elements based on title of clicked link? -

javascript - show/hide elements based on title of clicked link? -

i trying show , hide elements (divs) based on title of hyperlinks in jquery.

my html looks this:

<a title="booz" href="" class="netro">booz</a> <a title="books" href="" class="netro">books</a> <a title="sam" href="" class="netro">sam</a> <div data-title="booz" class="drag">something here</div> <div data-title="booz" class="drag">something here</div> <div data-title="booz" class="drag">something here</div> <div data-title="booz" class="drag">something here</div> <div data-title="booz" class="drag">something here</div> <div data-title="sam" class="drag">another thing here</div> <div data-title="sam" class="drag">another thing here</div> <div data-title="sam" class="drag">another thing here</div> <div data-title="books" class="drag">oh well</div> <div data-title="books" class="drag">oh well</div> <div data-title="books" class="drag">oh well</div>

and jquery code:

$('.netro').click(function(event) { var title = $(this).attr('title'); var allelems = $('"' + title + '"').not(this); allelems.show(); });

however, code doesn't @ all.

could please advise on issue?

i have add together div's class drag have css of display:none; begin with.

you need utilize class , attribute selectors

$('.netro').click(function (event) { var title = $(this).attr('title'); var $curr = $('.drag[data-title="' + title + '"]').toggle(); $('.drag').not($curr).hide(); event.preventdefault() });

demo: fiddle

javascript jquery