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" );
    });

});

That's not the most elegant solution, but it worked here. Or I didn't understand what you actually want. — cr0ss
– cr0ss, Commented May 26, 2014 at 17:46

Kiran · Accepted Answer · 2014-05-26 18:02:09Z

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

edited May 26, 2014 at 18:02

answered May 26, 2014 at 17:50

Kiran

20.3k11 gold badges72 silver badges101 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

user2485649 Over a year ago

HI Actually what I need to do is to hide the other classes and show the one which is clicked. :(

user2485649 Over a year ago

Yes, worked. Can you tell me a way in which I can again show all the class again on click of ALL.

Kiran Over a year ago

Just use this $("div[class^=data]").show(); to show all.

Rory McCrossan · Accepted Answer · 2014-05-26 17:48:38Z

2

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

answered May 26, 2014 at 17:48

Rory McCrossan

338k41 gold badges322 silver badges353 bronze badges

3 Comments

user2485649 Over a year ago

HI Actually what I need to do is to hide the other classes and show the one which is clicked. :(

Rory McCrossan Over a year ago

In that case just swap over hide() and show() in my above example.

user2485649 Over a year ago

Yes, worked. Can you tell me a way in which I can again show all the class again on click of ALL.

Collectives™ on Stack Overflow

Change CSS of div with jquery on a click

2 Answers 2

3 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related