Add or remove a class on two elements when two different events fire I want to add/remove a class on the html and body tags in the dom when my nav menu is opened or closed. Is this the most optimal way of writing this logic?

$( '#navbarNav' ).on( 'show.bs.collapse', function() {
    $( 'html, body' ).addClass( 'noscroll' );
});

$( '#navbarNav' ).on( 'hide.bs.collapse', function() {
    $( 'html, body' ).removeClass( 'noscroll' );
});
Don't repeat the queries. Store any queries that are called more than once in a variable, and utilize jQuery's chaining:

const navbarNav = $( '#navbarNav' );
const htmlBody = $( 'html, body' );

navbarNav.on( 'show.bs.collapse', function() {
    htmlBody.addClass( 'noscroll' );
}).on( 'hide.bs.collapse', function() {
    htmlBody.removeClass( 'noscroll' );
});




Why are you setting the class on both the html and body elements? Either should be sufficient. 



Name the class semantically. Just like you call a class for important text "important" and not "red", just because it happens to be red, you don't call a class that indicates whether the main navigation is open "noscroll" but "main-nav-open" (for example).