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
htmlcss

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

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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Tips for modifying a text input in a list

Managing comment boxes and buttons for each box can be a bit tricky. Clicking on the edit button should enable only that specific textbox, while save or cancel actions should hide the text box and show "<p></p>". Below is my ng-template where ...

htmlangularlistdrop-down-menung-template

Invoking a nested function within an array

I need to trigger a function with a button click. The function I want to call is nested within another function, which is part of an array. demo = { volej: function(param) { (new initChartist).users(param); }, initPickColor: function(){ ...

javascripthtml

Ways to define a variable based on a CSS class attribute?

I need help figuring out how to create a variable in my script that is defined by the width attribute of a CSS class. The snippet I have currently doesn't seem to work as expected. var dist = $('.nav').css(width()); The goal of my script i ...

javascriptjquerycss

Creating an SQL select statement with a three-level expression is a complex task that requires careful planning and

How can I create a SQL select query with 3 levels of expressions and statements? Typically, my website operates on an SQLite database and the search results are displayed using the following SQL query: "SELECT DISTINCT * FROM amz WHERE Title LIKE \" ...

phphtmlsqlsqlitesearch

Responsive design challenge

I'm currently working on a WordPress theme with a fixed header and footer on the homepage, and a vertical slider in between that includes content and images. I've made the website responsive, but I'm facing an issue where the content in the ...

htmlcssresponsive-designscrollcss-position

To collapse a div in an HTML Angular environment, the button must be clicked twice

A series of divs in my code are currently grouped together with expand and collapse functionality. It works well, except for the fact that I have to click a button twice in order to open another div. Initially, the first click only collapses the first div. ...

javascripthtmlcssangulartypescript

Exploring the world of colored tab links in CSS

Check out this code: <!doctype html> <html lang="en"> <head> <meta charset="utf-8" /> <title>My Unique Page</title> <link rel="stylesheet" href="http://code.jquery.com/ui/1.8.3/themes/base/jquery-ui.css" /> ...

jquerycsstabsuicolortextcolor

What is the best way to ensure the logo is centered when the screen size reaches 750?

Looking to center the logo on a media screen size breakpoint? View the photo (Here): https://i.stack.imgur.com/UnB2F.png Check out my code below: .logo img { padding: 15px; width: 125px; } <nav> <ul class='nav-bar'> < ...

htmlcss

Bootstrap - Progress Bar Display

I have a mobile application that is built using Bootstrap 3. I am currently working on creating a responsive progress indicator for the app. This indicator will consist of three to five steps, each showing an icon, step name, and status. On mobile devices, ...

csstwitter-bootstrap

Using CSS to break or wrap long words in text

I have a div that spans the width of the page. I'm looking to ensure that a very long word in this div breaks and wraps properly, so all the content stays within the screen width and doesn't overflow beyond 100%. Although I've attempted usi ...

htmlcss

Utilizing the power of HTML5 drag and drop functionality in conjunction with Angular Material 2's md

When working with Angular Material 2 and attempting to enable reordering of list elements, I encountered an issue where the functionality works perfectly for li-tag but fails with md-list-item. Why is that? Here is a snippet of my template: <md-nav-li ...

htmlangulartypescriptangular-material

Interactive Vue.js canvases that adapt and respond to various

I am currently working on adjusting my canvas to fit within its container in a Vue component. When I call resizeCanvas() in the mounted hook, I notice that the container's height and width are both 0. How can I create a canvas that dynamically fits it ...

javascriptcssvue.jshtml5-canvas

Stop browsers from automatically filling out fields that are hidden

Our method involves jQuery to conceal irrelevant fields based on previous responses. It's puzzling how the browser (Chrome) has somehow autofilled the user's email address into one of them even though autocomplete is disabled. The field's ID ...

jqueryhtmlgoogle-chromebrowser

Guide for displaying SQL data in an HTML table

I am currently working on transferring my SQL data to an HTML format. The code I have so far is not functioning as expected. I attempted to include HTML within my PHP code, and now I am considering if it would be better to do it the other way around (emb ...

phphtmlmysqlsql

The output is: [object of type HTMLSpanElement]

<form> <table> <tr> <td>Distance:</td> <td><input type="number" id="distance" onKeyUp="calculate();">m</td> </tr> <tr> <td>Time:</td> ...

javascripthtml

Analyzing Date Strings Retrieved From a MySql Database

In my MySQL database, I have a relationship that stores dates as varchar along with other attributes. This is how it looks: Answers answerId answer questionId date I am working on a web application where the user can select a &apo ...

phpmysqlhtmlsqldatabase

What is the maximum width allowed for a WordPress site on mobile devices?

I have been tasked with addressing the responsiveness issues on mobile for this particular site. However, I am struggling to understand why the website is displaying horizontal scrolling on the landing page in a mobile view. Any assistance in resolving t ...

csswordpressresponsive-design

`Take action on a row by selecting the Edit option in CodeIgniter`

In my table, I have data displayed with an edit button in each row. What I want is for a pop-up or lightbox to appear when the edit button is clicked, without refreshing the page, and display all fields within that box. I am familiar with updating in the c ...

phpjqueryhtmlajaxcodeigniter

How can I customize the appearance of a checkbox button in JavaFX?

I am currently working on styling a JavaFX scene with CSS in a stylesheet. The goal is to apply styles to all the "basic" elements of the scene when it loads. My issue lies in finding the correct code combination to change the background color of a button ...

csscheckboxjavafxstyling

What is the most efficient way to evenly separate a CSS3 gradient?

Is there anyone who can assist me in achieving an even gradient break? body { height: 2500px; background: -webkit-linear-gradient(#000000 1%,#FFFFFF 1%,#FFFFFF 13%,#2ecc71 13%,#2ecc71 30%,#3498db 30%,#000000,#FFFFFF,#34495e); } I've been att ...

htmlcss