This example has a link that, when clicked, will hide itself and reveal two divs. When the link is clicked, the div's display value is changed from none to block. This example has a link to reveal a hidden div. Remember, the JavaScript function PowerhouseShowHide() needs to be available on the page for these to work. Div id values are colored blue and display values are colored red.
For clarity, here are a couple examples with only essential code.
#FUNCTION SHOWHIDE CODE#
The source code for the demonstrations earlier in this article contain examples of use with text links and with buttons. It can be none (for hiding the element), block, inline, table, or any other valid value for the display property. The "Value" part of the ID=Value set is the value for the display property. (The CSS display declaration needs to be inline for every div or other HTML container that is to be shown or hidden with the PowerhouseShowHide() function.) The "ID" part of the ID=Value set is the id of the div or other HTML element with an inline CSS display property. PowerhouseShowHide() updates the display property value of the container according to the information in each ID=Value set. PowerhouseShowHide('one=block','two=none','three=inline','four=table') Multiple ID=Value sets are comma-separated. It expects to receive instructions in the ID=Value format.
This W3schools page lists valid values with descriptions. The things it can do is change the CSS display property value for any HTML element where display is a valid CSS property. In essence, you give PowerhouseShowHide() a list of things it can do and it does them.
To close this individual div, click this close link. The second of three divs opened with a click on the relevant link. The first of three divs opened with a click on the relevant link. The third of three divs opened with a click on the relevant link. No customization of the PowerhouseShowHide() function is required. It can be hard coded into the page or imported from an external file. The JavaScript PowerhouseShowHide() function needs to be somewhere on the page for it to be used. But first, here's the Powerhouse Show/Hide JavaScript function. Reveal one or more divs with one click, or when the mouse moves over an existing div, or when the site visitor has been on the page for a certain amount of time.Īdjust the display property of any number of divs with one call to the PowerhouseShowHide() function. Reveal a bunch of divs each with their own "hide" button. Optionally, simultaneously (i) hide the link or button clicked on and (ii) reveal a link or button to hide the div again. Use the function for virtually all your hide/show needs. 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. The show/hide JavaScript function in this article is one of them. With 24 years experience, there are a few in my toolbox.
There is a handy, short, powerhouse JavaScript function for showing and hiding divs (or other HTML tag containers, like span, table, etc).Īs programmers gain experience over the years, the tools they use evolve. Powerhouse JavaScript Function for Show/Hide
0 kommentar(er)
