W3.JS Hide & Show
w3.hide(
selector)
Hiding Elements Using Element Id
To hide an element with a specified id, use a hash tag (#) in front of the id name.
Hide an element with id="London":
Hiding Elements Using Tag Name
To hide all elements with a specified tag name, use the tag name (without < and >) as the selector.
Hide all <h2> elements:
Hiding Elements Using Class Name
To hide all elements with a specified class name, use a period (.) in front of the class name.
Hide elements with class="city":
Show Elements Using Element Id
To show an element with a specified id, use a hash tag (#) in front of the id name.
Show an element with id="London":
Show Elements Using Tag Name
To show all elements with a specified tag name, use the tag name (without < and >) as the selector.
Show all <h2> elements:
Show Elements Using Class Name
To show all elements with a specified class name, use a period (.) in front of the class name.
Show elements with class="city":
Toggle Hide/Show
w3.toggleShow(
selector)
Toggle Hide and Show Using Element Id
Toggle between hiding and showing an element with id="London":
Example
<button onclick="w3.toggleShow('#London')">Toggle Hide/Show</button>
Toggle Hide and Show Using Tag Name
Toggle between hiding and showing all <h2> elements:
Example
<button onclick="w3.toggleShow('h2')">Toggle Hide/Show</button>
Toggle Hide and Show Using Class Name
Toggle between hiding and showing elements with class="city":
Example
<button onclick="w3.toggleShow('.city')">Toggle Hide/Show</button>