Hide and show element in html

How to Hide and Show a

If you don’t know how to hide and show a element, you should definitely check this tutorial! Hiding and showing a in HTML is quite an easy thing. You can do it with CSS or a small piece of JavaScript and jQuery codes.

The document.getElementById will select the with given id. You should set the display to «none» so as to make it disappear when clicked on :

html> html> head> title>Title of the document title> style> div < width: 100px; height: 100px; float: left; margin-right: 50px; > .parallelogram < border-radius: 0; -moz-border-radius: 0; -webkit-border-radius: 0; margin-left: 20px; -webkit-transform: skew(20deg); -moz-transform: skew(20deg); -o-transform: skew(20deg); > .circle < border-radius: 50%; -moz-border-radius: 50%; -webkit-border-radius: 50%; > .square < border-radius: 0%; -moz-border-radius: 0%; -webkit-border-radius: 0%; > #parallelogram < background-color: #1c87c9; > #circle < background-color: #8ebf42; > #square < background-color: #cccccc; > style> head> body> h2>Click on the figure h2> div class="parallelogram" id="parallelogram"> div> div class="circle" id="circle"> div> div class="square" id="square"> div> script> document.getElementById("parallelogram").onclick = function( ) < document.getElementById("parallelogram").style.display = "none"; > document.getElementById("circle").onclick = function( ) < document.getElementById("circle").style.display = "none"; > document.getElementById("square").onclick = function( ) < document.getElementById("square").style.display = "none"; > script> body> html>

Another example of hiding and showing div with JavaScript:

html> html> head> title>Title of the document title> script src="https://code.jquery.com/jquery-3.5.0.min.js"> script> style> p < padding: 20px; background: blue; > style> head> body> button type="button" class="toggle-btn">Toggle button> p>Lorem Ipsum is simply dummy text. p> script> $(document).ready(function( ) < // Display alert message after toggle paragraphs $(".toggle-btn").click(function( ) < $("p").toggle(2000, function( ) < // Code to be executed alert("The toggle effect is completed."); >); >); >); script> body> html>

Now let’s see how you can hide and show your element with pure CSS using the CSS :hover pseudo-class. Here’s the full code:

html> html> head> title>Title of the document title> style> form < display: none; > .example:hover>form < display: block; > style> head> body> div class="example"> div>Hover to show the form div> form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=alexcican', 'popupwindow', 'scrollbars=yes,width=650,height=620');return true"> p> input type="text" class="email_field" name="email" size="30" value="E-mail address" /> input type="hidden" value="alexcican" name="uri" /> input type="hidden" name="loc" value="en_US" /> input class="email_btn" name="submit" type="submit" value="Done"/> p> form> div> body> html>

When the user hovers over the , it disappears, and the form is displayed.

Источник

How TO — Toggle Hide and Show

Toggle between hiding and showing an element with JavaScript.

Toggle (Hide/Show) an Element

Step 1) Add HTML:

Example

Step 2) Add JavaScript:

Example

function myFunction() <
var x = document.getElementById(«myDIV»);
if (x.style.display === «none») <
x.style.display = «block»;
> else <
x.style.display = «none»;
>
>

Tip: For more information about Display and Visibility, read our CSS Display Tutorial.

COLOR PICKER

Report Error

If you want to report an error, or if you want to make a suggestion, do not hesitate to send us an e-mail:

Thank You For Helping Us!

Your message has been sent to W3Schools.

Top Tutorials

Top References

Top Examples

Get Certified

W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookie and privacy policy.

Источник

How to hide and show DOM elements using JavaScript

There are multiple ways to show or hide DOM elements in vanilla JavaScript. In this article, we shall look at two ways to hide or show DOM elements using JavaScript.

The style display property is used to set and get the element’s display type in JavaScript. Majority of the HTML elements have the inline or block display type. The content of an inline element floats to its left and right sides. Block HTML elements are different because they * fill* the entire line and do not show content on their sides. To hide an element, set the display property to none :

document.querySelector('.btn').style.display = 'none' 

document.querySelector('.btn').style.display = 'block' 

Another way to show or hide DOM elements in JavaScript is using the style visibility property. It is similar to the above display property. However, if you set display: none , it hides the entire element from the DOM. The visibility:hidden hides the element contents, and the HTML element stays in its original position and size. To hide an element, set the visibility property to hidden :

document.querySelector('.btn').style.visibility = 'hidden' 

document.querySelector('.btn').style.visibility = 'visible' 

The style visibility property only hides the element but doesn’t remove the space occupied by the element. If you also want to remove the space, set display: none using the display property.

jQuery provides hide() , show() , and toggle() utility methods that use inline styles to update the display property of the element. Let us use the style property to create the above jQuery methods in vanilla JavaScript:

// hide an element const hide = elem =>  elem.style.display = 'none' > // show an element const show = elem =>  elem.style.display = 'block' > // toggle the element visibility const toggle = elem =>  // if the element is visible, hide it if (window.getComputedStyle(elem).display !== 'none')  hide(elem) return > // show the element show(elem) > 

// hide element hide(document.querySelector('.btn')) // show element show(document.querySelector('.btn')) // toggle visibility toggle(document.querySelector('.btn')) 

Notice the use of the getComputedStyle() method, which we just learned the other day, to check if an element is already visible. We used this method because the style property only deals with inline styles specified using the element’s style attribute. But the HTML element could be hidden through an embedded element or an external stylesheet. The getComputedStyle() method returns the actual CSS styles used to render an HTML element, regardless of how those styles were defined. Another thing to notice is the getComputedStyle(elem).display !== ‘none’ statement. We are not checking whether the display type is block because block is not the only way to show an element. You could use flex , inline-block , grid , table , etc., for the display property to show an element. However, to hide an element, there is only one value, display: none . If you prefer to use a CSS class to hide and show DOM elements instead of inline styles, read this guide. ✌️ Like this article? Follow me on Twitter and LinkedIn. You can also subscribe to RSS Feed.

You might also like.

Источник

2 ways to show and hide elements using HTML and CSS, I prefer the first one

You can show or hide elements on a page in many different ways. We are going to focus on hiding/showing elements when users interact with them (click). I will show you my preferred method of achieving this using HTML and CSS only, I will also show you another method in which this can be achieved.

Use the Details and Summary tags

The details and summary tags act like an accordion element, you click on an element to reveal another element, and clicking again will hide the element that was revealed. This is an example of the details and summary tags:

 
This is the hidden content, will only show when the summary is clicked.
 
Terms and condition
 
 

This is the hidden content, will only show when the summary is clicked.

Inside the details element, the summary tag is the only element that is shown by default, everything else is hidden. You can show the content inside details by adding the open property to the details tag.

Change the summary tag default arrow

The summary has a default arrow (see above) which we are able to hide or change. To hide the arrow, we need to add ‘none’ as the value to the list-style-type attribute. I will also create space for the custom arrow that we are going to be adding by adding extra CSS attributes.

This is the hidden content, will only show when the summary is clicked.

After we applied the CSS, you will see that the default arrow has been removed, and we have created a space to add our own custom arrow. First, I will use + and – to indicate the open and closed state, then I will use custom SVG to achieve the same result.

Replace the default toggle arrow with a custom element

The method for replacing the default arrow with a custom one is the same for many HTML elements, for example, select and option tags.

details> summary:before, details[open]> summary:before < content: '+'; position: absolute; width: 16px; height: 16px; left: -21px; transition: .2s; >details[open]> summary:before

This is the hidden content, will only show when the summary is clicked.

Replace the arrow with SVG/Image

We can replace the summary’s arrow with a custom image by adding the image URL to our CSS and removing the + sign in our content attribute as below:

details> summary:before, details[open]> summary:before < content: ''; position: absolute; width: 16px; height: 16px; left: -21px; background-image: url("data:image/svg+xml,%3Csvg width='14' height='9' viewBox='0 0 14 9' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1.5L7 7.5L13 1.5' stroke='%230039A6' stroke-width='2'/%3E%3C/svg%3E%0A"); background-repeat: no-repeat; background-position: center center; transition: .2s; >details[open]> summary:before

This is the hidden content, will only show when the summary is clicked.

Use the hidden checkbox input field to toggle an element

Another way to toggle elements on a page is by using the input checkbox field to control what is hidden and shown on the page. The checkbox will need to be a direct sibling of the element you want to hide or show. I will explain this with an example.

In the example above, we have an input, a label for the input, and a paragraph element. We need to hide the input as clicking on the label will emulate the input click. We also want to hide the paragraph and show it when the label is clicked (input state checked). This can be achieved with the following CSS.

label[for=»question»] < cursor: pointer; >input#question < display:none >input#question ~ p < display: none; >input#question:checked ~ p

Real-life scenario using the toggle method to create a FAQ component

The above methods of hiding and showing elements on a page are very simple but they can be very useful when working as a front-end web developer, you may need to hide and show elements on click. For example, you may be asked to create a FAQ component. The most common method of achieving this is by using the toggle method; this can be plain HTML/CSS or JavaScript.

The example below used HTML and CSS only to achieve a toggle on FAQ.

Example Toggle FAQ

The details HTML element creates a disclosure widget in which information is visible only when the widget is toggled into an “open” state. Check MDN for more.

Below is the HTML code for the FAQ

 
   
What is General sibling combinator (~)? 
Please check MDN Tutorial
 
  
 
Is Details disclosure element? 
The details HTML element creates a disclosure widget in which information is visible only when the widget is toggled into an "open" state. Check MDN for more.
 
  
 
Can I use JavaScript to toggle element? 
Yes.
 
  
 
 

Below is the CSS for the FAQ

.faq-wrapper input < position: absolute; opacity: 0; z-index: -1; >.faq-wrapper label < position: relative; display: block; padding: 20px; margin-bottom: 5px; line-height: normal; cursor: pointer; border-top: 1px solid #ececec; color: #000000; >.accordion__title span, .faq-content p < margin-left: 32px; >.faq-wrapper label::before < position: absolute; content: "+"; color: #F6AE2D; top: 50%; transform: translateY(-50%); font-size: 28px; transition: all .5s; padding: 0 5px; >.faq-wrapper input:checked~label::before < content: "-"; >.faq-content < max-height: 0; overflow: hidden; transition: max-height .35s; >.faq-wrapper input:checked~.faq-content

Источник