Selecting element with html tag and class on click function not working in jQuery

Question

I have a html structure like this:

<div class="container">
  <dt class="odd">...</dt>
  <dd class="odd">...</dd>
  <dt class="even">...</dt>
  <dd class="even">...</dd>
  <dt class="odd">...</dt>
  <dd class="odd">...</dd>
  <dt class="even">...</dt>
  <dd class="even">...</dd>
</div>

the sturcture above have dt with class odd and dt with class even, what i want is when i clik the dt with class odd the next dd with class odd will show or hide, but the problem is my on click function for dd is not firing at all, here's the code:

$( "dt.odd" ).click(function() {
   alert('odd');
   $(this).parent().next('dd.odd').show();
});

Check console for errors.. Have you included jQuery ? Code looks fine and working for me.. — Rayon
– Rayon, Commented May 26, 2017 at 5:57
no error at all, i already included the jquery, when i change the selector for click function to only $('dt').click without odd it firing the click function — Idham Choudry
– Idham Choudry, Commented May 26, 2017 at 6:02
what is the default status of the div, are they display none or block? — Ganesh Putta
– Ganesh Putta, Commented May 26, 2017 at 6:04

Ganesh Putta · Accepted Answer · 2017-05-26 06:08:02Z

1

try this, may be this will help u

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<style>
dt{
	display:block;
}
dd{
	display:none;
}
</style>
<script>
$(document).ready(function(){
$( "dt.odd" ).click(function() {
    $(this).next().show();
});
});
</script>
</head>
<body>
<div class="container">
  <dt class="odd">...</dt>
  <dd class="odd">...</dd>
  <dt class="even">...</dt>
  <dd class="even">...</dd>
  <dt class="odd">...</dt>
  <dd class="odd">...</dd>
  <dt class="even">...</dt>
  <dd class="even">...</dd>
</div>
</body>
</html>

answered May 26, 2017 at 6:08

Ganesh Putta

2,6872 gold badges22 silver badges27 bronze badges

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

1 Comment

Idham Choudry Over a year ago

@GaneshPutra thanks, after wrapping it inside document ready function it works

mehulmpt · Accepted Answer · 2017-05-26 05:56:04Z

0

$( "dt.odd" ).click(function() {
   alert('odd');
   $(this).next().show();
});

answered May 26, 2017 at 5:56

mehulmpt

16.7k13 gold badges54 silver badges90 bronze badges

Comments

Nishesh Pratap Singh · Accepted Answer · 2017-05-26 06:03:54Z

0

If you want to show and hide respective dd on click of dt then you can use below snippet :

$( "dt.odd" ).click(function() {
  $(this).next().toggle();
});

When you click on dt it will show next dd, if not visible and vice-versa

answered May 26, 2017 at 6:03

Nishesh Pratap Singh

2,1912 gold badges15 silver badges21 bronze badges

Collectives™ on Stack Overflow

Selecting element with html tag and class on click function not working in jQuery

3 Answers 3

1 Comment

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Related