SHARE

Hey gang, in this jQuery tutorial for beginners, I’ll show you how we can add and remove (and toggle) HTML classes. I’ll also go through a practical examaple of how toggleClass would work on a real website.

The three methods we’ll look at are:

addClass()
removeClass()
toggleClass()

Any questions, shout out below :).

SUBSCRIBE TO CHANNEL – https://www.youtube.com/channel/UCW5YeuERMmlnqo4oq8vwUpg?sub_confirmation=1

========== JavaScript for Beginners Playlist ==========

https://www.youtube.com/playlist?list=PL4cUxeGkcC9i9Ae2D9Ee1RvylH38dKuET

========== CSS for Beginners Playlist ==========

https://www.youtube.com/playlist?list=PL4cUxeGkcC9gQeDH6xYhmO-db2mhoTSrT

========== HTML for Beginners Playlist ==========

https://www.youtube.com/playlist?list=PL4cUxeGkcC9ibZ2TSBaGGNrgh4ZgYE6Cc

========== The Net Ninja ============

For more front-end development tutorials & to black-belt your coding skills, head over to – https://www.youtube.com/channel/UCW5YeuERMmlnqo4oq8vwUpg or http://thenetninja.co.uk

========== Social Links ==========

Twitter – @TheNetNinja – https://twitter.com/thenetninjauk

5 COMMENTS

  1. Is threre any particular reason why mixing vanilla javascript with jQuery like this:

    var button = $("#lead-banner");
    button[0].onclick = function() {
    $("#points-of-sale").toggleClass("open");
    };

    If I could do it much easier like this: // Option 1 – Vanilla JS //

    var button = document.getElementById("lead-banner").onclick = function() {
    document.getElementById("points-of-sale").classList.toggle("open");
    }

    or like this: // Option 2 – jQuery //

    $("#ead-banner").click(function() {
    $("#points-of-sale").toggleClass("open");
    });

LEAVE A REPLY

Please enter your comment!
Please enter your name here