Tutorials References Menu

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":

Example

<button onclick="w3.hide('#London')">Hide</button>

Try It Yourself » With CSS »


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:

Example

<button onclick="w3.hide('h2')">Hide</button>

Try It Yourself » With CSS »


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":

Example

<button onclick="w3.hide('.city')">Hide</button>

Try It Yourself » With CSS »


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":

Example

<button onclick="w3.show('#London')">Show</button>

Try It Yourself » With CSS »


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:

Example

<button onclick="w3.show('h2')">Show</button>

Try It Yourself » With CSS »


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":

Example

<button onclick="w3.show('.city')">Show</button>

Try It Yourself » With CSS »

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>

Try It Yourself » With CSS »


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>

Try It Yourself » With CSS »


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>

Try It Yourself » With CSS »