Hamburger javascript animation doesn't work: "unexpected token"

Question

So this is my first post here and sorry if I'm not very precise but I'm quite new in the coding world.

Can somebody explain me why the Javascript code that I added at the end of my html doesn't work?

Basically I want my hamburger to animate on toggle, but it seems not working properly.

Does it mean that I need to add a jQuery library? how should I do that exactly? I tried to link my html file to an online jQuery library but didn't work.

Thanks in advance for your help. Ciao!

$(document).ready(function(){
	$('#nav-icon3').click(function(){
		$(this).toggleClass('open');
	});
});

#nav-icon3 {
  width: 60px;
  height: 45px;
  position: relative;
  margin: 50px auto;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .5s ease-in-out;
  -moz-transition: .5s ease-in-out;
  -o-transition: .5s ease-in-out;
  transition: .5s ease-in-out;
  cursor: pointer;
}

#nav-icon3 span {
  display: block;
  position: absolute;
  height: 9px;
  width: 100%;
  background: #d3531a;
  border-radius: 9px;
  opacity: 1;
  left: 0;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .25s ease-in-out;
  -moz-transition: .25s ease-in-out;
  -o-transition: .25s ease-in-out;
  transition: .25s ease-in-out;
}

#nav-icon3 span:nth-child(1) {
  top: 0px;
}

#nav-icon3 span:nth-child(2),#nav-icon3 span:nth-child(3) {
  top: 18px;
}

#nav-icon3 span:nth-child(4) {
  top: 36px;
}

#nav-icon3.open span:nth-child(1) {
  top: 18px;
  width: 0%;
  left: 50%;
}

#nav-icon3.open span:nth-child(2) {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
}

#nav-icon3.open span:nth-child(3) {
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

#nav-icon3.open span:nth-child(4) {
  top: 18px;
  width: 0%;
  left: 50%;
}

<div onclick="function()" id="nav-icon3">
                <span></span>
                <span></span>
                <span></span>
                <span></span>
            </div>

Answer 1

Yes, if you are using jQuery, you need to link it to you html document. Just add:

<script src="js/jquery-3.2.1.min.js" type="text/javascript"></script>

after your main.js file and you will be able to use jQuery. :)

Answer 2

And if you use jQuery, you don't need onclick="" argument in your html code. It is ok to use $(target).click(function(){...});