Using variables with if/else - syntax help

Using variables with if/else - syntax help

Hi,

I'm getting hung up on something that seems pretty simple, and I think I'm just making rookie syntax mistakes. I have a user dashboard that has a button on it to hide/show one of the panels, and this uses the cookie plugin to remember the user's preference. The cookie plugin provides a variable to use for controlling the display of the panel div, which then just toggles .show() and .hide(). (It returns either "block" or "none").

I want to add a little more to this so that it also changes the text on the toggle button based on whether the panel is hidden or shown. 

Here's what I have - can anybody help me get the result of my if/else to populate the button value? 

Thanks!

  1. $(document).ready(function() {
  2. // call the cookie class and set a cookie called viewState
  3. $.cookie("viewState");
  4. // create a variable and set it to the value of the cookie
  5. var theState = $.cookie("viewState");

  6. // these are the labels for the button
  7. var onState = "hide mentor steps";
  8. var offState = "show mentor steps";

  9. // put the right label on the button initially, based on the returned cookie variable 
  10. var btnState = 
  11.  if (theState = "block") {
  12.  return var onState;
  13.  } else {
  14.  return var offState;
  15. }

  16. $("#mentor-switch").val(btnState);
  17. // toggle the view state of the mentor steps
  18. $("#mentor-switch").toggle(
  19. function () {
  20. $("#dashboard-row-1").show("slow");
  21. // when clicked, set the cookie and variable to block, then change the button label
  22. $.cookie("viewState", "block");
  23. theState = "block";
  24. $("#mentor-switch").val(onState)
  25. },
  26. function () {
  27. $("#dashboard-row-1").hide("slow");
  28. // set the cookie and variable to none when clicked again, then change the button label
  29. $.cookie("viewState", "none");
  30. theState = "none";
  31. $("#mentor-switch").val(offState)
  32. });
  33. // update the hidden panels css to none, or block depending on the toggle event
  34. $("#dashboard-row-1").css('display', theState);

  35. });