Ways to show or conceal content using only CSS

Question

Ways to show or conceal content using only CSS

Looking for help with switching content using pure CSS. I'm not very skilled with CSS and would prefer to avoid using JavaScript if possible. Any assistance would be greatly appreciated.

Below is a snippet of the code:

If A is clicked, toggle-on-content will display and toggle-off-content will hide
If B is clicked, 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;
}
... (CSS code continues)

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

https://i.stack.imgur.com/aEwzw.png

html css

Answer 1

Answer №1

To achieve this functionality, you can utilize the general sibling selector ~ in order to display or hide any elements that are siblings of 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>

Answer 2

To achieve this functionality, you can utilize the general sibling selector ~ in order to display or hide any elements that are siblings of 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>

Answer 3

Answer №2

If you're looking to solve this using Javascript, here's a solution:

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>

Answer 4

If you're looking to solve this using Javascript, here's a solution:

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>

Ways to show or conceal content using only CSS

Answer №1

Answer №2

Similar questions

Tips for updating the corresponding nav link in CSS when transitioning between pages

Creating tailored output data from a single table

Steps for Disabling col-sm and col-xs in Bootstrap 3

Neighbor wrapping causing Flex to shrink

Rendering of @font-face on Windows 7 was executed flawlessly

The descendant selector in CSS fails to apply changes to the element

The Material UI dialog box popped up against an unexpected gray backdrop

Why is my HTML5 class unable to locate the contents of my observable array?

Is it possible to integrate HTML pages as sections within an HTML file using AngularJS?

Can someone explain the method for displaying or concealing a menu based on scrolling direction?

Search a location database using the user's current coordinates

What is the best way to ensure that all components within a Container automatically inherit its calculated width?

Maximizing the potential of image srcset in HTML5

AngularJS and CSS: A Guide to Effortlessly Toggle Sliding List Elements

Insert a picture within the text input field

Adding turbolinks to an HTML document can be achieved without the need for a

Prevent the modification of a session

Center the cropped image within a div container

Issues with tabbed navigation functionality in jQuery

jQuery only works partly with IE