CODEWITHSUNDEEP
javascriptjquery
pourmesomecode
pourmesomecode

Reputation: 4318

Handle multiple onClick events jQuery

So I have a lot of onClick events. On a click of one element. I want to toggle hide or display classes (that hide / display) elements on the page when they're clicked.

It's working however, there's a lot of them and to me it just looks ugly.

$('.info_2').on('click', function() {
  $('#nav-wrapper').toggleClass('hidden_nav');
  $('#card-wrapper').toggleClass('centre_share');
  $('.E_info').toggleClass('display');
  $('#info-btn').css('opacity', '0');
  $('#nav-wrapper').delay(300).toggleClass('hidden');
  $('#nav-wrapper').removeClass('display_nav');
  $('#nav-wrapper').removeClass('display');
});

$('.info_back').on('click', function() {
  $('#nav-wrapper').removeClass('hidden_nav');
  $('#nav-wrapper').addClass('display_nav');
  $('#nav-wrapper').addClass('display');
  $('#info-btn').css('opacity', '1');
  $('#nav-wrapper').removeClass('hidden');
  $('.E_info').removeClass('display');
  $('.E_info').addClass('hidden');
  $('#card-wrapper').removeClass('centre_share');
});

$('#info-btn').on('click', function(){
  $('#info-btn').toggleClass('close_btn');
  $('.o-card_border').toggleClass('info_display card_active');
  $('.start_title').toggleClass('hidden remove_flow')
  $('#svg_full').attr('class', 'test');
  $('#svg_top').attr('class', 'test');
  $('#svg_bot').attr('class', 'test');
  $('#svg_bot_bot').attr('class', 'test');
  $('#svg_bot_right').attr('class', 'test');
  $('.rectangle_style_frame3 display').toggleClass('hidden');
  $('.triangle_style').toggleClass('hidden');

  $('.bg-info').toggleClass('display');
  $('.info_CharactersInvolved').toggleClass('display');
  $('.info_themes').toggleClass('display');
  $('.E_info').toggleClass('display');

});

Is there anyway to make code like this, that have a lot of one onClick event that toggle a lot of classes on other elements cleaner?

Thanks!

Upvotes: 3

Views: 330

Answers (3)

NiallMitch14
NiallMitch14

Reputation: 1229

You can use commas to separate the ids or classes and use if statements to determine which id was clicked e.g:

$("#id1, #id2, id3, .class1, .class2, etc").on('click', function (e) {
    if(e.target.id == "id1") {
        // do id1 code
    }
    if($(e.target).hasClass('class1')) {
        // do class1 code
    }
    // repeat for other ids and classes
});

Upvotes: 2

1990rk4
1990rk4

Reputation: 768

You can try with the bind() function of jquery;

The bind() method attaches one or more event handlers for selected elements, and specifies a function to run when the event occurs.

http://api.jquery.com/bind/

http://www.peachpit.com/articles/article.aspx?p=1371947&seqNum=3

Upvotes: 0

Tushar
Tushar

Reputation: 87203

  1. You can pass multiple classes to removeClass, addClass and toggleClass.
  2. You can pass multiple selectors to $(). So, can combine same method calls on multiple selectors into one.
  3. Different function calls on same selectors can be chained.

Code:

$('.info_2').on('click', function () {
    $('#nav-wrapper').toggleClass('hidden_nav').removeClass('display_nav display').delay(300).toggleClass('hidden');
    $('#card-wrapper').toggleClass('centre_share');
    $('.E_info').toggleClass('display');
    $('#info-btn').css('opacity', '0');
});

$('.info_back').on('click', function () {
    $('#nav-wrapper').removeClass('hidden_nav hidden centre_share').addClass('display_nav display');
    $('#info-btn').css('opacity', '1');
    $('.E_info').removeClass('display').addClass('hidden');
});

$('#info-btn').on('click', function () {
    $('#info-btn').toggleClass('close_btn');
    $('.o-card_border').toggleClass('info_display card_active');
    $('.start_title').toggleClass('hidden remove_flow')
    $('#svg_full, #svg_top, #svg_bot, #svg_bot_bot, #svg_bot_right').attr('class', 'test');
    $('rectangle_style_frame3 display, triangle_style').toggleClass('hidden');

    $('.bg-info, .info_CharactersInvolved, .info_themes, .E_info').toggleClass('display');
});

Upvotes: 1

Related Questions