Change CSS of div with jquery on a click

Question

I need a help regarding a click function.

In starting I need to show few class with different div classname inside a main div class which can be ID. Now on click of a anchor I will grab that classname and leaving that all other class inside that main div need to be visible. All classes will start with a unique name like marker_automobile, marker_sample-class, etc.

Now on click of marker_automobile, the marker_sample-class, etc need to be hide and only marker_automobile need to be shown. Now on click of marker_sample-class, all other classes expect this should be hide.

Sorry for my bad english.

Link to jsfiddle

<a href="#" class="changer" data="data1">Data1</a>
<a href="#" class="changer" data="data2">Data2</a>
<a href="#" class="changer" data="data3">Data3</a>

<div id="content">
  <div class="data1">
    content 1
  </div>
  <div class="data1">
    content 2
  </div>
  <div class="data2">
    content 3
  </div>
  <div class="data3">
    content 4
  </div>
  <div class="data1">
    content 5
  </div>
</div>


$(document).ready(function(){

   $(".changer").click(function() {
       var data = $(this).attr("data");
       $("."+data).css( "display", "none" );
    });

});

Answer 1

The issue is because you are not making all div elements visible again when the button is clicked for consecutive times. Also, data is not a valid attribute. In my example I changed your HTML to use a data-* attribute. Try this:

<a href="#" class="changer" data-rel="data1">Data1</a>
<a href="#" class="changer" data-rel="data2">Data2</a>
<a href="#" class="changer" data-rel="data3">Data3</a>

$(".changer").click(function () {
    $('#content div').show(); // show all elements again
    $("." + $(this).data('rel')).hide(); // hide the related ones only
});

Updated fiddle

Answer 2

You should make all div elements visible again when button is clicked. Try this:

 $(document).ready(function(){ 
   $(".changer").click(function() {
       $("div[class^=data]").show(); //show all divs
       var data = $(this).attr("data");
       $("div[class^=data]").not("."+data).css("display","none");//hide button 
       related ones
    });
});

DEMO