hide(element: HTMLElement);
element. DOM element to be hidden.
The hide method hides a specified DOM element.
To ensure correct method performance, the specified element must be a part of the DOM tree for entire document.
This method hides an element by setting the CSS class PPHide for the element.
To execute the example, the HTML page must contain links to the PP.js scenario file and the PP.css styles file. Create a DOM element based on markup, add it to the document, hide and then show again:
// Determine a markup string
var markup = "<div id='main' style=\"border: 1px solid #000000; width: 160px; height: 80px\"><p>12</p></div>";
// Transform markup to DOM node
var dom = PP.htmlToDOM(markup, False);
// Add DOM node to document
document.body.appendChild(dom);
console.log("Source name of the class: " + (dom.className.length == 0 ? "\"\"" : dom.className));
// Hide element
if (PP.isVisible(dom)) {
PP.hide(dom);
};
console.log("Class after the element is hidden: " + (dom.className.length == 0 ? "\"\"" : dom.className));
// Display element
if (!PP.isVisible(dom)) {
PP.show(dom);
};
console.log("Class after the element is displayed: " + (dom.className.length == 0 ? "\"\"" : dom.className));
After executing the example a DOM node is created using HTML markup, and added to the document:
The information displayed to the browser console indicates that the element was hidden and then shown again:
Initial class name: ""
Class after hiding the element: PPHide
Class after showing the element: ""
See also: