Untitled

<script>
function show_all()
{
    document.getElementByClassName('login').style.display = 'inline';
    document.getElementById('button-hide').style.display = 'inline';
    document.getElementById('button-show').style.display = 'none';
};
function hide_all()
{
    document.getElementByClassName('login').style.display = 'none';
    document.getElementById('button-hide').style.display = 'none';
    document.getElementById('button-show').style.display = 'inline';
};
</script>
</head>

<body>
<nav>
    <input type="button" value="Show login Buttons" id="button-show" onclick="show_all();"/>
    <input type="button" value="Hide login Buttons" id="button-hide" onclick="hide_all();"/>
</nav>
    <p class="login">Username:</p>
    <img src="un.png" class="login"/>
    <p class="login">Password:</p>
<p>Something not ment to be hidden.</p>
    <img src="pass.png" class="login"/>
   </body>
   </html>