Hide a div tag in HTML

With the style "display: none" you can hide it

<div class="auto" id="auto" style="display: none">
  Oculta
</div>

 <div class="auto" id="auto">
  No Oculta
</div>

With the hidden attribute directly from CSS you can achieve

<style>
  /*
   Los estilos puedes ponerlos al inicio de tu documento HTML o puedes 
   meterlos en un archivo por separado
  */
  .auto{
   display: none;
 }
</style>
<div class="auto" id="auto">
  Ocultar
</div>

  

Always try that your CSS code is not mixed with your HTML because it   it becomes unmanageable as soon as your project grows

If you decide to put your CSS code in an external file, place the label to invoke it after your last meta tag at the top, you should stay more or less like this

<link rel="stylesheet" href="carpeta/archivo.css" />

The above I recommend it to avoid that when you return to the project or someone else participate the process of making modifications becomes complex and difficult

First we must have our HTML image where there will be a button that will activate a JavaScript function that will change the CSS to show the effect. in this case the button will be a div

var clic = 1;
function divAuto(){ 
   if(clic==1){
   document.getElementById("div-mostrar").style.height = "100px";
   clic = clic + 1;
   } else{
    document.getElementById("div-mostrar").style.height = "0px";      
    clic = 1;
   }   
}

Después de tener estos dos div utilice algo de CSS3 para darle el diseño y logar el efecto de transición.

#auto{
	padding: 10px;
	background: orange;
	width: 95px;
	cursor: pointer;
	margin-top: 10px;
	margin-bottom: 10px;
	box-shadow: 0px 0px 1px #000;
	display: inline-block;
}

#auto:hover{
	opacity: .8;
}

#div-mostrar{
	width: 100%;
	margin: auto;
	height: 0px;
	background: #000;
	box-shadow: 10px 10px 3px #D8D8D8;
	transition: height .4s;
  color:white;
  text-align: center;
}
#auto:hover{
	opacity: .8;
}
#auto:hover + #div-mostrar{
	height: 100px;
}

<div id="auto" onclick="divAuto()">
Mostrar/Ocultar
</div>
<div id="div-mostrar">
DIV
</div>

This is my friend solution:

<div class="auto" id="auto" style="display:none;">
  Ocultar
</div>

<div class="auto" id="auto" style="visibility: hidden">
  Oculta
</div>

Although this does what you want, you should avoid using "online styles" at all costs for this kind of thing the best way would be to use CSS from an external file and changing the properties using JavaScript.