How do I make my nav bar interactive

1

How do I make my nav interactive using javascript? I want the user to click on the toggle_menu button and have the sidebar_menu appear. How do I do this with JS?
Heres my code:

HTML

<body>
<script type = "text/javascript">
function showHide {
    var menu = getElementsByClassName(".toggle_menu");
	var hidden = getElementsByClassName(".sidebar_menu);
	
	toggle_menu.addEventListener('click', () => {
	sidebar_menu.style.display = "block";
}); 
</script>	
<i class = "fa fa-bars toggle_menu" onclick="showHide()"></i>
<div class = "sidebar_menu">
	<i class = "fa fa-times"></i>
		<center>
			<a href = "#"><h1 class = "box_item">Matheus <span class = "logo_bold">Duarte</span></h1></a>		
			<h2 class = "logo_title">Aspiring Web Developer</h2>
		</center>

<ul class = "navigation_selection">
	<li class = "navigation_item"><a href="#">Home</a></li>
  	<li class = "navigation_item"><a href="#">AboutMe</a></li>
  	<li class = "navigation_item"><a href="#">Portfolio</a></li>
  	<li class = "navigation_item"><a href="#">Contact</a></li>
</ul>
<center>  	
  	<a href = "#"><h1 class = "box_item box_item_smaller"></h1>
  	<i class = "fa fa-user"></i>
  	Find Out More
  	</h1></a>
</center>  	
</div>
2 
function showHide {
   var menu = document.getElementsByClassName("toggle_menu"); 
   var hidden = document.getElementsByClassName("sidebar_menu");

   if(menu.length > 0) 
      var toggle_menu = menu[0];
   else
      throw Error('no element found with toggle_menu class')

   if(hidden.length > 0) 
      var sidebar_menu = menu[0];
   else 
      throw Error('no element found with sidebar_menu class');

   toggle_menu.addEventListener('click', () => {
       sidebar_menu.style.display = "block";
   });
}
3

It did not work. I am still new to js, so I do not know where it went wrong. I created a file on textwrangler assigned it the .js value and put that code in the file. I then added the <script “text/javascript”> to the head tag. I also added the on click command to the HTML. Unless the wrong classes are being selected or something. Also when I created the .js file I just pasted the code in there. The coded did not change colors like it does in HTML/CSS.

×>Menue

☰>

Matheus Duarte

Aspiring Web Developer

Find Out More