HTML & CSS How do I use javascript to click and show these links on mobile devices? I have tried but failed because I don't know how to use it.

[mic]

!-- Float links to the right -->
<div class="w3-right">
<a href="#about" class="w3-bar-item w3-button w3-hover-sand w3-padding w3-hide-small">About</a>
<div class="w3-dropdown-click w3-hide-small">
<button class="w3-button w3-hover-sand w3-padding" onclick="myFunction(document)"><a href="#tours" style="text-decoration: none">Projects</a></button>
<div id="document" class="w3-dropdown-content w3-bar-block w3-hover-sand">
<a href="#private-vip-tours" class="w3-bar-item w3-button w3-hide-small">BIG PROJECTS</a>
<a href="#local-day-tours" class="w3-bar-item w3-button w3-hide-small">SMALL PROJECTS</a>
<a href="#schedule" class="w3-bar-item w3-button w3-hide-small">SCHEDULE</a>
</div>
</div>
<a href="#media" class="w3-bar-item w3-button w3-hover-sand w3-padding w3-hide-small">Price</a>
<a href="#contact" class="w3-bar-item w3-button w3-hover-sand w3-padding w3-hide-small">Contact</a>
<a href="javascript:void(0)" class="w3-bar-item w3-button w3-right w3-hide-large w3-hide-medium" onclick="myFunction()">&#9776;</a>
</div>
</div>
</div>
<!-- On Small Screens -->
<div id="test" class="w3-bar-block w3-black w3-hide w3-hidelarge w3-hide-medium">
<a href="#about" class="w3-bar-item w3-button w3-hover-sand w3-padding">About</a>
<div class="w3-dropdown-click">
<button class="w3-button w3-hover-sand w3-padding" onclick="myFunction(document)"><a href="#tours" style="text-decoration: none">Projects</a></button>
<div id="document" class="w3-dropdown-content w3-hover-sand">
<a href="#private-vip-tours" class="w3-bar-item w3-button">BIG PROJECTS</a>
<a href="#local-day-tours" class="w3-bar-item w3-button">SMALL PROJECTS</a>
<a href="#schedule" class="w3-bar-item w3-button">SCHEDULE</a>
</div>
</div>
<a href="#media" class="w3-bar-item w3-button w3-hover-sand w3-padding">Price</a>
<a href="#contact" class="w3-bar-item w3-button w3-hover-sand w3-padding">Contact</a>
</div>

<script>
function myFunction() {
var x = document.getElementById("test");
if (x.className.indexOf("w3-show") == -1) {
x.className += " w3-show";
} else {
x.className = x.className.replace(" w3-show", "");
}
}
</script>

<script>
function myFunction() {
var x = document.getElementById("document");
if (x.className.indexOf("w3-show") == -1) {
x.className += " w3-show";
} else {
x.className = x.className.replace(" w3-show", "");
}
}
</script>