We have to click the 'Click me!' button to see the effect. We are hiding the div element by applying the style.display property, and hiding the element by applying the style.visibility property. Here, there is a div element and heading element on which we are applying the properties. Rails 7s Stimulus lets me write a show-hide controller. In this example, we are using both style.display and style.visibility JavaScript properties to see the difference between both of them. Showing and hiding elements is one of the common tasks that compels me to write (simple) JavaScript. I have an HTML page with an image that I set to be invisible by CSS visibility: hidden.
On clicking the button, the output will be - Example3 Hide or reveal divs that are popups or sliders, divs that contain an iframe, span tags with an image, or entire tables. Simply feed the ids and actions to the function and it does the rest. Show or hide as many divs as desired with one JavaScript function call. To hide/show the DOM elements, first you must find the data-element attribute on the elements from a DOM inspector.
Example of the JavaScript's style.visibility propertyĭocument.getElementById("div").style.visibility = "hidden" ĭocument.getElementById("p").style.visibility = "hidden" Īfter the execution of the above code, the output is - The show/hide JavaScript function in this article is one of them.