Learning jQuery 3 - Fifth Edition

Enabling the other buttons

We now have a Large Print button that works as advertised, but we need to apply similar handling to the other two buttons (Default and Narrow Column) to make them perform their tasks. This is straightforward: we use .on() to add a click handler to each of them, removing and adding classes as necessary. The new code reads as follows:

$(() => {  $('#switcher-default')    .on('click', () => {       $('body')        .removeClass('narrow')        .removeClass('large');     });  $('#switcher-narrow')    .on('click', () => {       $('body')        .addClass('narrow')        .removeClass('large');     });   $('#switcher-large')    .on('click', () => {       $('body')        .removeClass('narrow')        .addClass('large');     }); }); 

Listing 3.2

This is combined with a CSS rule for the narrow ...