Hi i created accordion function using jquery by toggleClass function.
here while clicking accordion class a active class will added to the same class i added some styles to active class for displaying child classes.Now the problem is the accordion toggled if we click anywhere of accordion class or its child classes whats wrong on it?
my JS
$('.accordion').on('click', function() {
$(this).toggleClass('active');
});
$('.accordion > a.title').on('click', function() {
$(this).parent().toggleClass('active');
});
As RGraham says, there was nothing wrong with it, it was doing exactly what you told it to. If you want it to toggle only when you click on the title, then you need to catch the events on the title, not the whole accordion div.
Try this:
$('.accordion > a.title').on('click', function() {
$(this).parent().toggleClass('active');
});
or
$('a.title').on('click', function() {
$(this).parent().toggleClass('active');
});
here is updated Demo
.accordion, be more specific with your selector