CODEWITHSUNDEEP
javascriptjqueryhtml
Amir
Amir

Reputation: 537

Onclick should close other opened element

I do have 2 elements in my page which i want to show them when user clicks on 2 different buttons.

Here is my code

$('.social-toggle').on('click', function() {
  $(this).next().toggleClass('open-menu');
});

$('.social-toggle1').on('click', function() {
  $(this).next().toggleClass('open-menu');
});

When user clicks on the first button, the first element will be show up, but i want either user clicks on the second button or one of the links in the opened-menu the first opened menu be closed.

JSFIDDLE

Upvotes: 0

Views: 1637

Answers (2)

Laxmikant Dange
Laxmikant Dange

Reputation: 7688

Here is the code what you want. You didnt removed the class which was applied previously.

$('.social-toggle').on('click', function() {
    $('.social-toggle1').next().removeClass('open-menu');
  $(this).next().toggleClass('open-menu');

});

$('.social-toggle1').on('click', function() {
    $('.social-toggle').next().removeClass('open-menu');
  $(this).next().toggleClass('open-menu');
});

Upvotes: 1

Milind Anantwar
Milind Anantwar

Reputation: 82231

You do not need to write two different event here. Use comma seprated multiple selector for targetting both button:

$('.social-toggle,.social-toggle1').on('click', function() {
  $('.social-networks').not($(this).next()).removeClass('open-menu');
  $(this).next().toggleClass('open-menu');
});

Working Demo

Upvotes: 3

Related Questions