CODEWITHSUNDEEP
jquerybutton
user992731
user992731

Reputation: 3530

Fade in div with same class name as the same name as my button id

I have a few buttons that share the same class name as the divs ids that I would like to fade in.

Example: 

 <div class="one">button</div>

 <div id="one">I am the one div that needs to fade in</div>


 <div class="two">button</div>

 <div id="two">I am the two div that needs to fade in</div>

Upvotes: 0

Views: 387

Answers (1)

antishok
antishok

Reputation: 2910

You should use a common class/tag for the buttons, and a data-* attribute for the target ID, and retrieve it in your click handler:

HTML:

 <div class="button" data-target="one">button</div>

 <div id="one">I am the one div that needs to fade in</div>


 <div class="button" data-target="two">button</div>

 <div id="two">I am the two div that needs to fade in</div>

JS:

$(document).on('click', '.button', function() {
  var id = $(this).data('target');
  $('#' + id).fadeIn();
});

Upvotes: 1

Related Questions