javascript hide div

// javascript
<script>
	document.getElementById("id").style.display = "none";  //hide
	document.getElementById("id").style.display = "block"; //show
	document.getElementById("id").style.display = ""; 	   //show
</script>

// html
<html>
	<div id="id" style="display:none">
    <div id="id" style="display:block">
</html>

// jquery
<script>
	$("#id").hide();      
	$("#id").show();
</script>

View another examples Add Own solution

Prabhat Sinha 135 points

                                    &lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
&lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1&quot;&gt;
&lt;style&gt;
#myDIV {
  width: 100%;
  padding: 50px 0;
  text-align: center;
  background-color: lightblue;
  margin-top: 20px;
}
&lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;

&lt;p&gt;Click the &quot;Try it&quot; button to toggle between hiding and showing the DIV element:&lt;/p&gt;

&lt;button onclick=&quot;myFunction()&quot;&gt;Try it&lt;/button&gt;

&lt;div id=&quot;myDIV&quot;&gt;
This is my DIV element.
&lt;/div&gt;

&lt;p&gt;&lt;b&gt;Note:&lt;/b&gt; The element will not take up any space when the display property set to &quot;none&quot;.&lt;/p&gt;

&lt;script&gt;
function myFunction() {
  var x = document.getElementById(&quot;myDIV&quot;);
  if (x.style.display === &quot;none&quot;) {
    x.style.display = &quot;block&quot;;
  } else {
    x.style.display = &quot;none&quot;;
  }
}
&lt;/script&gt;

&lt;/body&gt;
&lt;/html&gt;

Thank you! 5

4.75

Stats_novice_123 120 points

                                    &lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
&lt;script src=&quot;https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js&quot;&gt;&lt;/script&gt;
&lt;script&gt;
$(document).ready(function(){
  $(&quot;#hide&quot;).click(function(){
    $(&quot;#1&quot;).hide();
    $(&quot;#2&quot;).show();
  });
  $(&quot;#show&quot;).click(function(){
    $(&quot;#1&quot;).show();
    $(&quot;#2&quot;).hide();
  });
});
&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;

&lt;p id=&quot;1&quot;&gt;Area 1&lt;/p&gt;
&lt;p id=&quot;2&quot; style=&quot;display: none;&quot;&gt;Second area&lt;/p&gt;

&lt;button id=&quot;show&quot;&gt;Area 1&lt;/button&gt;
&lt;button id=&quot;hide&quot;&gt;Second Area&lt;/button&gt;

&lt;/body&gt;
&lt;/html&gt;

Thank you! 4

4.75 (4 Votes)

4.2

Peepeepoopoo 100 points

                                    Check this! https://dev.to/devlorenzo/js-hide-and-show-32og

Thank you! 10

4.2 (10 Votes)

KatyB 50 points

                                    &lt;div id=&quot;main&quot;&gt; 
  &lt;p&gt; Hide/show this div &lt;/p&gt;
&lt;/div&gt;

('#main').hide(); //to hide

// 2nd way, by injecting css using jquery
$(&quot;#main&quot;).css(&quot;display&quot;, &quot;none&quot;);

Thank you! 1

3 (1 Votes)

3.71

Rubixphys12 15320 points

                                    //If you have jquery, you can use the following method:
$(&quot;#mydiv&quot;).hide(); //hides div.
$(&quot;#mydiv&quot;).show(); //shows div.
//If you don't have jquery...
//search up the following: html how to add jquery

Thank you! 7

3.71 (7 Votes)

Are there any code examples left?

Find Add Code snippet

New code examples in category Javascript

Javascript 2023-04-21 22:52:36
Javascript 2022-03-27 22:25:20 javascript download string as file
Javascript 2022-03-27 21:40:22 sort numbers in array javascript
Javascript 2022-03-27 21:20:04 compare two arrays and return the difference javascript
Javascript 2022-03-27 21:15:02 javascript regex french phone number
Javascript 2022-03-27 21:05:03 cypress custom error message
Javascript 2022-03-27 21:00:05 create element javascript with id
Javascript 2022-03-27 20:40:57 feather icons react
Javascript 2022-03-27 20:20:01 how to make graphql request in axios
Javascript 2022-03-27 20:15:07 bootstrap validator password and confirm password

Create a Free Account

Unlock the power of data and AI by diving into Python, ChatGPT, SQL, Power BI, and beyond.

Develop soft skills on BrainApps

Complete the IQ Test

Relative searches

javascript hide div

Welcome Back!

Create a Free Account