Boots Widget change from widget to cat head and click function

HTML

<!-- Old Widget -->
<!-- background:url("https://i.imgur.com/OsNhpuP.gif") center no-repeat; -->
<style>
.boots-cat {
  background:url("https://i.imgur.com/PlsbQjI.gif") center no-repeat;
  background-size:cover;
  height:150px;
  width:100%;
  border-radius:15px;
  overflow:hidden;
  position:relative;
}
.boots-img {
  position:absolute;
  bottom:5px;
  right:5px;
  height:64px;
  -webkit-animation:img-cycle-boots 3s infinite;
	animation:img-cycle-boots 3s infinite;
}
.cycle-shadow {
	-webkit-animation:img-cycle-boots 3s infinite;
	animation:img-cycle-boots 3s infinite;
}
@keyframes img-cycle-boots {
	0% {
		filter:drop-shadow(0 0 5px #ff66d9);
		-webkit-filter:drop-shadow(0 0 5px #ff66d9)
	}
	33% {
		filter:drop-shadow(0 0 5px #ffff33);
		-webkit-filter:drop-shadow(0 0 5px #ffff33)
	}
	66% {
		filter:drop-shadow(0 0 5px #33ccff);
		-webkit-filter:drop-shadow(0 0 5px #33ccff)
	}
	100% {
		filter:drop-shadow(0 0 5px #ff66d9);
		-webkit-filter:drop-shadow(0 0 5px #ff66d9)
	}
}
@-webkit-keyframes img-cycle-boots {
	0% {
		filter:drop-shadow(0 0 5px #ff66d9);
		-webkit-filter:drop-shadow(0 0 5px #ff66d9)
	}
	33% {
		filter:drop-shadow(0 0 5px #ffff33);
		-webkit-filter:drop-shadow(0 0 5px #ffff33)
	}
	66% {
		filter:drop-shadow(0 0 5px #33ccff);
		-webkit-filter:drop-shadow(0 0 5px #33ccff)
	}
	100% {
		filter:drop-shadow(0 0 5px #ff66d9);
		-webkit-filter:drop-shadow(0 0 5px #ff66d9)
	}
}
.boots-text {
  font-size:14px;
  font-weight:bold;
  text-shadow:0px 1px 1px #000;
  position:absolute;
  bottom:5px;
  right:70px;
}
</style>
<div class="boots-cat">
  <div class="boots-text">
      🪦 2000 - 16 Oct 2022 - Boots
  </div>
  <img src='/images/boots_head_128px.png' class="boots-img" />
</div>

<!-- New Widget with Clickable Boots Head  -->
<!-- background:url("https://i.imgur.com/OsNhpuP.gif") center no-repeat; -->
<style>
	.boots-cat {
	  background:url("https://i.imgur.com/PlsbQjI.gif") center no-repeat;
	  background-size:cover;
	  height:150px;
	  width:400px;
	  border-radius:15px;
	  overflow:hidden;
	  position:fixed;
	  display:none;
	  bottom:30px;
	  right:30px;
	  z-index:1001;
	}
	.boots-img:hover body {
	  background:url("https://i.imgur.com/PlsbQjI.gif") center no-repeat;
	  background-size:cover;
	}
	.boots-img {
	  position:fixed;
	  bottom:5px;
	  right:5px;
	  height:32px;
	  -webkit-animation:img-cycle-boots 3s infinite;
		animation:img-cycle-boots 3s infinite;
	}
	.cycle-shadow {
		-webkit-animation:img-cycle-boots 3s infinite;
		animation:img-cycle-boots 3s infinite;
	}
	@keyframes img-cycle-boots {
		0% {
			filter:drop-shadow(0 0 5px #ff66d9);
			-webkit-filter:drop-shadow(0 0 5px #ff66d9)
		}
		33% {
			filter:drop-shadow(0 0 5px #ffff33);
			-webkit-filter:drop-shadow(0 0 5px #ffff33)
		}
		66% {
			filter:drop-shadow(0 0 5px #33ccff);
			-webkit-filter:drop-shadow(0 0 5px #33ccff)
		}
		100% {
			filter:drop-shadow(0 0 5px #ff66d9);
			-webkit-filter:drop-shadow(0 0 5px #ff66d9)
		}
	}
	@-webkit-keyframes img-cycle-boots {
		0% {
			filter:drop-shadow(0 0 5px #ff66d9);
			-webkit-filter:drop-shadow(0 0 5px #ff66d9)
		}
		33% {
			filter:drop-shadow(0 0 5px #ffff33);
			-webkit-filter:drop-shadow(0 0 5px #ffff33)
		}
		66% {
			filter:drop-shadow(0 0 5px #33ccff);
			-webkit-filter:drop-shadow(0 0 5px #33ccff)
		}
		100% {
			filter:drop-shadow(0 0 5px #ff66d9);
			-webkit-filter:drop-shadow(0 0 5px #ff66d9)
		}
	}
	.boots-text {
	  font-size:14px;
	  font-weight:bold;
	  text-shadow:0px 1px 1px #000;
	  position:absolute;
	  bottom:5px;
	  right:70px;
	}
	</style>
	<img src='/images/boots_head_128px.png' class="boots-img" onclick="$('.boots-cat').slideToggle();"/>
	<div class="boots-cat">
	  <div class="boots-text">
		  🪦 2000 - 16 Oct 2022 - Boots
	  </div>
	</div>

Scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>