Day/Night Toggle Using Cookie To Save On Page Refresh

The problem I'm having of course is the toggle cookie is always true once the toggle is clicked. Is there a way to check whether the toggle is active / inactive and to save that st

Solution 1:

The issue is because you only ever set the cookie to true, even when changing the state. To fix this use hasClass() to determine what state the UI is in and set the cookie accordingly:

jQuery(document).ready(function($) {
  $(".toggle").click(function() {
    $(".toggle").toggleClass("active");
    $("body").toggleClass("night");
    $.cookie("toggle", $(".toggle").hasClass('active'));
  });

  if ($.cookie("toggle") === "true") {
    $(".toggle").addClass("active");
    $("body").addClass("night");
  }
});

Example fiddle