Several ways to switch between showing and hiding elements with CSS

Tram Ho

Several ways to switch between showing and hiding elements with CSS

There are actually many ways to display and hide elements depending on the habits of each person, this article introduces some ways to switch by the following CSS properties

  • opacity: Create transparent translucency effects for elements such as photos, text, blocks. The opacity property can be set to a value of 0.0 – 1.0. The smaller the value is, the more transparency it is.
  • visibility: Defines hidden or visible elements on the page.
  • display: Defines the display type of the component. With the following values: block, list-item, table, inherit, none, etc …

Following are the features and examples of each attribute in turn:

1.Switch by opacity

.html

.css

.js

Feature

  1. Maintain a private area even when hidden
  2. Can click / tap
  3. Allow transition

2.Switch by visibility

.css

Feature

  1. Maintain a private area even when hidden
  2. Cannot click / tap
  3. Allow transition

3. Convert display

.css

Feature

  1. Do not maintain private areas when hidden
  2. Cannot click / tap
  3. No transitions allowed

4. Combine the Switch between opacity and pointer-events

.css

Feature

  1. Maintain a private area even when hidden
  2. Cannot click / tap
  3. Allow transition

5. Combine the switch between opacity, pointer-event and property size

.css

Feature

  1. Do not maintain private areas when hidden
  2. Cannot click / tap
  3. Allow transition

Summary

There are many easy methods to convert using jQuery, but for me, CSS conversion makes me feel more comfortable and comfortable.

Share the news now

Source : Viblo