Dropdown Menu using javascript, HTML and CSS

I would give the menu an ID so it's easier to target, then just toggle a class that you use to hide/show the menu.

.header_navigation_mobile {
  display: none;
}
.open {
  display: block;
}

<a href="#" onclick="toggleMenu()">toggle</a>

<div class="header_navigation_mobile" id="mobilenav">
  <ul>
    <li><a href="{{site.baseurl}}/index.html">HOME</a></li>
    <li><a href="#">ABOUT</a></li>
    <li><a href="#">CONTACT</a></li>
    <li>
      <a href="#"> </a>
    </li>
    <li>
      <a href="#"> </a>
    </li>
  </ul>
</div>

<script>
  function toggleMenu(){
    var nav = document.getElementById('mobilenav');
    nav.classList.toggle('open');
  }
</script>

In your JS try like this.use querySelector for selecting elements.And for setting and getting css properties use selector.style.property_name.

function toggleMenu(){
    var mobileNav_Hide = document.querySelector('.header_navigation_mobile');
    var mobileNav_Show = document.querySelector('.header_navigation_mobile.is_open')
    if(mobileNav_Hide.style.display == "none"){
        mobileNav_Show.stylr.display == "block";
    }
    else{
        mobileNav.style.display = "none";
    }
}

I know this is not a specific answer to your question but may be a handy solution as well. I put together a jsfiddle of a hidden menu you can easily edit to your needs. Here is the link.

#Btn{
	position: fixed;
	right: 20px;
	width: 20px;
	height: 24px;
	background: linear-gradient(#FFF,#DDD);
	border: #AAA 1px solid;
	border-radius: 2px;
	padding: 2px 5px;
	cursor: pointer;
	transition: border 0.3s linear 0s;
}
#Btn:hover{
	border: #06F 1px solid;
}
#Btn:hover div{
	background: #06F;
}
#Btn > div{
	width: 20px;
	height: 4px;
	background: #333;
	margin: 3px 0px;
	border-radius: 4px;
	transition: background 0.3s linear 0s;
}
#hidden{
	position: fixed;
	right: -300px;
	top: 60px;
	width: 260px;
	height: 0px;
	background: #333;
	color:#ededed;
	padding:15px;
	transition: right 0.3s linear 0s;
}

<script>
function toggleBTN(){
	var hidden = document.getElementById("hidden");
	hidden.style.height = window.innerHeight - 60+"px";
	if(hidden.style.right == "0px"){
		hidden.style.right = "-300px";
	} else {
		hidden.style.right = "0px";
	}
}
</script>
<div id="Btn" onclick="toggleBTN()">
  <div></div>
  <div></div>
  <div></div>
</div>
<div id="hidden">
  <ul>
    <li>MENU ITEM 1</li>
	<li>MENU ITEM 2</li>
	<li>MENU ITEM 3</li>
  </ul>
</div>
<div id="page_content">
<script>
for(var i = 0; i < 10; i++){ document.write("<h2>"+(i+1)+". Dummy page content ... </h2>"); }
</script>
</div>

Hope this helps :)

There are a few things in the else statement where is mobileNav coming from there is no instance of that anywhere in your code. Taking a step back a minute from your solution does the adding and removal of the classname is_open define the entire show hide behaviour you desire?

Your process of getting the same element with the subclass present/not present and then trying to set the display property is confusing.

You have an equality comparer when setting the display property when it should be just a single equals which along with my first statement i think is your main problem.

Instead of the way you are doing it i would just look at toggling the is_open class this link Toggle class on HTML element without jQuery shows how to do that and also demonstrates a few other ways of toggling styles including without javascript

Finally just check because im being lazy that display is valid as a property and that it shouldnt instead be style.display as others have indicated

js
let c = document.getElementById("dropdownlist");
      let e = document.getElementById("dropdownicon");
      let d = e.classList.toggle('fa-angle-down');
      if(d===true) {
        if(c.style.display==='none'){
          c.style.display = 'block';
        }
        else{
          c.style.display ='block';
        }
      }
      else{
        c.style.display = 'none';
      }