Transform a pair of columns into tabs

Currently, I have set up two columns displaying posts and data, with them floating left and right on desktop. My goal is to convert these columns into tabs when viewed on mobile devices. For example, on desktop it looks like this:

column1                   column2
 11111                     22222
 11111                     22222
 11111                     22222

On mobile, it would be displayed as:

column1|colum2

1111

1111

1111

Users can click on the column2 tab to view the posts for that column.

My page setup structure is as follows:

 <section className-"dash">
  <section className="dashboard-container-left">
      <section className="myRecommended">
        .........
        .........
      </section>
  </section>
  <section className="dashboard-container-right">
      <section className="usersRecommended">
        .........
        .........
      </section>
  </section>
 </section>

At the moment, both sections are styled to float left and right, respectively.

javascripthtmlcssreactjsredux

Answer №1

Discover a straightforward solution using only CSS. By leveraging the :checked and ~ selectors, you can customize sibling elements based on the radio button selection.

To achieve this effect, make sure to hide the labels when not in your mobile viewport.

.tab-panel {
  /* apply these styles exclusively to mobile */
  float: none;
  display: none;
}

input[name="tabs"] {
  display: none;
}

input[name="tabs"]:checked + label {
  font-weight: bold;
}

input[id="tab1"]:checked ~ .tab-panel#col1 {
  display: block;
}

input[id="tab2"]:checked ~ .tab-panel#col2 {
  display: block;
}
<div class="dash">
  <!-- Display labels only on mobile -->
  <input type="radio" name="tabs" id="tab1" checked>  
  <label for="tab1" role="tab" aria-controls="col1">Col 1</label> 
  <input type="radio" name="tabs" id="tab2">  
  <label for="tab2" role="tab" aria-controls="col2">Col 2</label>  
  
  <section class="tab-panel dashboard-container-left" id="col1">
    1111<br>
    1111<br>
    1111<br>
  </section>
  <section class="tab-panel dashboard-container-left" id="col2">
    2222<br>
    2222<br>
    2222<br>
  </section>
</div>

Answer №2

Here is an alternative approach using pseudo selectors such as :not() and :target.

The drawback with this method is that neither column is initially displayed, which may not be the desired behavior for this particular page.

.tabs {
  display: flex;
  width: 100%;
}

.tabs .tab {
  border: 2px solid lightgrey;
  border-width: 0 0 2px 0;
  padding: 5px 10px;
  color: grey
}

.tabs .tab a {
  color: grey;
  text-decoration: none;
}

.tabs .tab a:hover {
  text-decoration: underline;
}

.tabs .tab a:link {
  color: grey;
}

.tabs .tab+.tab {
  border-width: 0 0 2px 1px;
}

.tab-panel:target {
  display: block;
}

.tab-panel:not(:target) {
  display: none;
}
<div class="dash">
  <!-- Only display labels on mobile -->
  <div class="tabs">
    <div class="tab">
      <a href="#col1">
        Column 1
      </a>
    </div>
    <div class="tab">
      <a href="#col2">
        Column 2
      </a>
    </div>
  </div>

  <section class="tab-panel" id="col1">
    1111<br> 1111
    <br> 1111
    <br>
  </section>
  <section class="tab-panel" id="col2">
    2222<br> 2222
    <br> 2222
    <br>
  </section>
</div>

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

Searching and updating values within a nested array of objects: A comprehensive guide

I need to search for a value within a nested array of objects and update it. Specifically, in the given array, I want to locate the OptionCode based on a String and mark the corresponding option as blocked. The search strings are stored in an array. Initi ...

javascriptarrays

Looking for assistance with replicating the jQuery bpopup plugin

I've exhausted all my options, including adding every bpopup and jQuery JavaScript file, as well as a .json file I stumbled upon in an example. However, I just can't seem to get this thing to work. All the script files are in the same folder as t ...

javascriptjqueryhtmlbpopup

Updating multiple documents in Mongoose that have a specific element in an array

I have structured a Mongoose schema like this: const mongoose = require('mongoose'); const ItemSchema = mongoose.Schema({ id: { type: String, required: true, }, items: { type: Array, required: true, }, date: { type: ...

javascriptnode.jsmongodbmongoose

What's the best way to organize Python objects for optimal JSON serialization?

Recently transitioning from JavaScript to Python, I am facing a challenge in understanding how to effectively communicate between client and server using JSON. Specifically, I am struggling to find the equivalent of an easily jsonifyable object attribute i ...

javascriptpythonjsontranslate

What is the method for showcasing a single Observable from an Array of Observables in Angular?

I am facing a challenge with displaying questions from an Observable-Array one by one. Currently, I can only display all the questions at once using *ngFor in my HTML. Here is my component code snippet: import { Component, OnInit } from '@angula ...

javascriptangularrxjs

How can I add background color to WordPress mouse over text?

Hey there! I'm a beginner when it comes to WordPress and currently using version 4.2.2. I'm looking to display a mouse-over background color with text on an image. The text and images are being generated dynamically from the admin panel. Below ar ...

phpjquerycsswordpress

What occurs when the version in package.json is not the latest while using 'npx react-native' in React Native?

Currently in my React Native project, I am utilizing npx react-native run-ios, which is configured to use the latest version of react-native. However, the version specified in my package.json file is 0.62.0, while the latest available version is 0.63.4. Q ...

reactjsreact-nativenpmpackage.jsonnpx

The method mongoose.connect() is not defined

Having a bit of trouble connecting to my MongoDB using Mongoose - keep getting this error. const { mongoose } = require('mongoose'); const db = 'dburl.com/db' mongoose.connect(db, { useNewUrlParser: true }) .then(() => console ...

javascriptnode.jsmongodbexpressmongoose

Tips for preventing the nesting of promises when managing errors from various APIs

Currently, I am developing an application that requires making requests to two different APIs. The authentication process is handled by Cognito, while a lambda function communicates with a database. However, the issue I am facing does not seem to be specif ...

javascriptrestpromisetry-catch

Apologies: the declaration file for the VueJS application module could not be located

Hey there! I'm currently working on a VueJS application using NuxtJS. Recently, I added an image cropping library called vue-croppie to my project. Following the documentation, I imported the Vue component in the code snippet below: import VueCroppie ...

javascripttypescriptvue.jsnuxt.jstypescript-typings

Display an HTML file using HTML5

Is it possible to include or display one HTML file within another? Main HTML file: <html> <body> <div><!-- insert other HTML file here --></div> </body> </html> File to be displayed: <h1>Testing&l ...

htmlrender

The state of the UI is not updating to reflect the selected item in React Native

I'm working on a component that needs to display all ingredients from my database, but I'm encountering issues with the state not updating as expected. Here are the variables: const image = require('../../assets/backgroundMeal.png'); ...

javascriptreactjsreact-nativestate

What is the best way to retrieve widget options when inside an event?

Creating a custom jQuery widget: jQuery.widget("ui.test",{ _init: function(){ $(this.element).click(this.showPoint); }, showPoint: function(E){ E.stopPropagation(); alert(this.options.dir); } } Initializing the cu ...

javascriptjqueryjquery-pluginsbindingjquery-widgets

rearrangement of characters in a string (javascript)

I am currently working on a game where users have to guess a word by selecting the right symbol from the alphabet. When the user guesses correctly, the code is supposed to replace all placeholders with the correct character, but in the wrong order. var se ...

javascript

Activate a horizontal accordion when the button is clicked

I am looking to implement a dynamic horizontal accordion feature triggered by a button click. I came across this example for creating a horizontal accordion. It works well, but it is limited to only 8 accordions. I want the flexibility for users to add as ...

jquerycssbootstrap-4

Navigation bar being stuck inside the container

I am currently working on creating a hero container with a sticky navbar that seamlessly blends into the design. My goal is to keep the navbar fixed at the top of the screen as I scroll, ensuring it never moves past the hero container. <section class=&q ...

htmlcssbootstrap-5

Refresh the Document Object Model (DOM) and transmit the present time

I am having an issue with sending the actual current time when a button is clicked. Instead of getting the current time, I am receiving the time when the page initially loaded. This button is used to submit a form on Google Sheets using an API. This is th ...

javascriptphpjquerydom

Retrieve the value associated with the data attribute of the chosen dropdown option

I need to extract the custom data attribute from the chosen option of a dropdown menu and insert it into a text box. This will be the second data attribute I'm working with. I plan to implement code that will run whenever the user changes the option ( ...

javascriptjqueryhtml

Modify the surrounding container of the chosen selector

I have a complex website with multiple containers. My objective is to apply a color to a container with the class "colorme" when another container, located far away from it, has the class "active". Here is how the code is structured: .tooltip:has(tool ...

htmlcss

Error message when attempting to call an invalid hook in a React App following the reinstallation of node modules

Everything was running smoothly on my app until I decided to create a build for testing purposes, which resulted in the following error: Minified React error #321; Error: Minified React error #321; Oddly enough, the app was functioning properly on localho ...

javascriptreactjstypescript