Html - How to display / hide content via pure css

flyingfox
August 22, 2023
230 views
1 vote
2 Answers

I want to switch content via pure CSS,since I am not good at CSS(I can do it via JavaScript but I do not want to do like that),if any one could help me,it would be very grateful.

I have a code snippet as below,what I want to do is

if we click A,toggle-on-content will display and toggle-off-content
will hide
if we click B,toggle-off-content will display and toggle-on-content
will hide
toggle-on-content will display and toggle-off-content
will hide by default

.toggle-on-content{
  color: #dd7e6b
}

.toggle-off-content{
  color: #6bbedd
}

.btn {
    border: 3px solid #16982b;
    display: inline-block;
    padding: 3px;
    position: relative;
    text-align: center;
    transition: background 600ms ease, color 600ms ease;
}

input[type="radio"].toggle {
    display: none;

    & + label {
        cursor: pointer;
        min-width: 60px;

        &:hover {
            background: none;
            color: #16982b;
        }

        &:after {
            background: #16982b;
            content: "";
            height: 100%;
            position: absolute;
            top: 0;
            transition: left 200ms cubic-bezier(0.77, 0, 0.175, 1);
            width: 100%;
            z-index: -1;
        }
    }

    &.toggle-left + label {
        border-right: 0;

        &:after {
            left: 100%;
        }
    }

    &.toggle-right + label {
        margin-left: -5px;

        &:after {
            left: -100%;
        }
    }

    &:checked + label {
        cursor: default;
        color: #fff;
        transition: color 200ms;

        &:after {
            left: 0;
        }
    }
}

<input id="toggle-on" class="toggle toggle-left" name="toggle" value="false" type="radio" checked>
<label for="toggle-on" class="btn">A</label>
<input id="toggle-off" class="toggle toggle-right" name="toggle" value="true" type="radio">
<label for="toggle-off" class="btn">B</label>
<p class="toggle-on-content">
A lifecycle method is any method that is annotated with @BeforeAll, @AfterAll, @BeforeEach or @AfterEach annotation. The lifecycle methods execute before or after executing the actual test methods.
</p>

<p class="toggle-off-content">
To see how this works, let’s take a look at the following example:
</p>

Tags: css html

Answers

You can accomplish this with the general sibling selector ~ to show or hide any elements that are siblings to the input elements.

.toggle-left:checked ~ .toggle-off-content {
  display: none;
}

.toggle-right:checked ~ .toggle-on-content {
  display: none;
}

.toggle-on-content{
  color: #dd7e6b
}

.toggle-off-content{
  color: #6bbedd
}

.btn {
    border: 3px solid #16982b;
    display: inline-block;
    padding: 3px;
    position: relative;
    text-align: center;
    transition: background 600ms ease, color 600ms ease;
}

input[type="radio"].toggle {
    display: none;

    & + label {
        cursor: pointer;
        min-width: 60px;

        &:hover {
            background: none;
            color: #16982b;
        }

        &:after {
            background: #16982b;
            content: "";
            height: 100%;
            position: absolute;
            top: 0;
            transition: left 200ms cubic-bezier(0.77, 0, 0.175, 1);
            width: 100%;
            z-index: -1;
        }
    }

    &.toggle-left + label {
        border-right: 0;

        &:after {
            left: 100%;
        }
    }

    &.toggle-right + label {
        margin-left: -5px;

        &:after {
            left: -100%;
        }
    }

    &:checked + label {
        cursor: default;
        color: #fff;
        transition: color 200ms;

        &:after {
            left: 0;
        }
    }
}

<input id="toggle-on" class="toggle toggle-left" name="toggle" value="false" type="radio" checked>
<label for="toggle-on" class="btn">A</label>
<input id="toggle-off" class="toggle toggle-right" name="toggle" value="true" type="radio">
<label for="toggle-off" class="btn">B</label>
<p class="toggle-on-content">
A lifecycle method is any method that is annotated with @BeforeAll, @AfterAll, @BeforeEach or @AfterEach annotation. The lifecycle methods execute before or after executing the actual test methods.
</p>

<p class="toggle-off-content">
To see how this works, let’s take a look at the following example:
</p>

You can add some Javascript to solve this:

const onContent = document.querySelector('.toggle-on-content');
const offContent = document.querySelector('.toggle-off-content');

Array.from(document.querySelectorAll(".container .btn")).forEach(btn => {
  btn.addEventListener("click", e => {
    e.stopPropagation();
    let bool = e.target.textContent === 'A';
    console.log('bool', bool);
    onContent.style.visibility = bool ? 'visible' : 'hidden';
    offContent.style.visibility = bool ? 'hidden' : 'visible';


  });
});

.toggle-on-content {
  color: #dd7e6b
}

.toggle-off-content {
  color: #6bbedd
}

.btn {
  border: 3px solid #16982b;
  display: inline-block;
  padding: 3px;
  position: relative;
  text-align: center;
  transition: background 600ms ease, color 600ms ease;
}

.toggle {
  display: none;
  &+label {
    cursor: pointer;
    min-width: 60px;
    &:hover {
      background: none;
      color: #16982b;
    }
    &:after {
      background: #16982b;
      content: "";
      height: 100%;
      position: absolute;
      top: 0;
      transition: left 200ms cubic-bezier(0.77, 0, 0.175, 1);
      width: 100%;
      z-index: -1;
    }
  }
  &.toggle-left+label {
    border-right: 0;
    &:after {
      left: 100%;
    }
  }
  &.toggle-right+label {
    margin-left: -5px;
    &:after {
      left: -100%;
    }
  }
  &:checked+label {
    cursor: default;
    color: #fff;
    transition: color 200ms;
    &:after {
      left: 0;
    }
  }
}

<div class="container">
  <input id="toggle-on" class="toggle toggle-left" name="toggle" value="false" type="radio" checked>
  <label for="toggle-on" class="btn">A</label>
  <input id="toggle-off" class="toggle toggle-right" name="toggle" value="true" type="radio">
  <label for="toggle-off" class="btn">B</label>
</div>

<p class="toggle-on-content">
  A lifecycle method is any method that is annotated with @BeforeAll, @AfterAll, @BeforeEach or @AfterEach annotation. The lifecycle methods execute before or after executing the actual test methods.
</p>

<p class="toggle-off-content">
  To see how this works, let’s take a look at the following example:
</p>

Please signup or login to give your own answer.

Click here to cancel reply.

Html – How to display / hide content via pure css

Answers