JSFiddle - React, Tailwind, and code Playground

by dmcgrew

HTML

<button class="expand closed"><span class="open">open menu</span><span class="close">close menu</span></button>

CSS

.expand {width:100px; height:100px; background:red; display:block;}

.close, .open {display:none;}

.opened .close {display:inline;}
.closed .open {display:inline;}

JavaScript

$("button.closed").on("click", function(){
	console.log("open the menu");
  
  $(this).toggleClass("opened");
  $(this).toggleClass("closed");
});

$("button.opened").on("click", function(){
  //why does nothing in here happen?
	console.log("close the menu");
  
  $(this).toggleClass("opened");
  $(this).toggleClass("closed");
});