What is the method for incorporating an additional tab with CSS3 styling?

I stumbled upon a great resource for CSS tabs here. I decided to use the third example called "target." However, as soon as I tried adding a FOURTH tab, everything broke down, including the functionality of the first 3 tabs. You can check out my attempt here.

It seems like the original CSS codes provided below need tweaking, but I'm not quite sure how to go about it:

/* Target Tabs */
.tabs-target span:nth-of-type(1):not(:target) ~ span:nth-of-type(2):not(:target) ~ .tab:nth-of-type(1),
.tabs-target span:nth-of-type(2):target ~ .tab:nth-of-type(2),
.tabs-target span:nth-of-type(1):target ~ .tab:nth-of-type(3)
{
  display: block;
}

Could someone help me understand what adjustments are necessary to ensure the FOURTH tab functions properly?

htmlcsstabs

Answer №1

This solution is effective: 

.tabs-target span:nth-of-type(1):not(:target) ~ span:nth-of-type(2):not(:target) ~ span:nth-of-type(3):not(:target) ~ span:nth-of-type(4):not(:target) ~ .tab:nth-of-type(1),
 .tabs-target span:nth-of-type(4):target ~ .tab:nth-of-type(1),
 .tabs-target span:nth-of-type(3):target ~ .tab:nth-of-type(2),
 .tabs-target span:nth-of-type(2):target ~ .tab:nth-of-type(3),
 .tabs-target span:nth-of-type(1):target ~ .tab:nth-of-type(4) {
        display: block;
}

Example JSFiddle link

Answer №2

With this code snippet, you have the flexibility to easily add multiple tabs in HTML.

HTML

<div class="tabs">

   <div class="tab">
       <input type="radio" id="tab-1" name="tab-group-1" checked>
       <label for="tab-1">Tab One</label>

       <div class="content">
           Tab One
       </div> 
   </div>

   <div class="tab">
       <input type="radio" id="tab-2" name="tab-group-1">
       <label for="tab-2">Tab Two</label>

       <div class="content">
           Tab Two
       </div> 
   </div>

    <div class="tab">
       <input type="radio" id="tab-3" name="tab-group-1">
       <label for="tab-3">Tab Three</label>

       <div class="content">
           Tab Three
       </div> 
   </div>

   <div class="tab">
       <input type="radio" id="tab-4" name="tab-group-1">
       <label for="tab-4">Tab Four</label>

       <div class="content">
           Tab Four
       </div> 
   </div>


</div>

<-- To add more tabs, simply copy the entire tab section and adjust its values as needed. -->

CSS

.tabs {
  position: relative;   
  min-height: 200px; /* This part could be improved */
  clear: both;
  margin: 25px 0;
}
.tab {
  float: left;
}
.tab label {
  background: #eee; 
  padding: 10px; 
  border: 1px solid #ccc; 
  margin-left: -1px; 
  position: relative;
  left: 1px; 
}
.tab [type=radio] {
  display: none;   
}
.content {
  position: absolute;
  top: 28px;
  left: 0;
  background: white;
  right: 0;
  bottom: 0;
  padding: 20px;
  border: 1px solid #ccc; 
}
[type=radio]:checked ~ label {
  background: white;
  border-bottom: 1px solid white;
  z-index: 2;
}
[type=radio]:checked ~ label ~ .content {
  z-index: 1;
}

DEMO

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

Unable to modify the background image of the button

Currently, I am working on this element I am trying to insert a background image into the "Click" button, but I am not seeing any results. Here is the HTML and CSS I am using: .cn-button { position: absolute; top: 100%; left: 50%; z-ind ...

htmlcssbackground

Achieving and maintaining the center alignment of a horizontal dropdown menu

Struggling with creating a fixed, 100% width nav bar that stays centered when the page is resized? The drop down menu headings are causing issues as they seem to float left instead of staying centered. Not sure how to fix it? Take a look at the live resul ...

htmlcssnavigationcenter

Javascript auto submission fails to execute following the completion of the printer script

As someone new to javascript, I have a question. I have a function called sendToQuickPrinter() that prints correctly, but after it finishes executing, I need to automatically submit a form to return to my "cart.php" page. I feel like I'm almost there, ...

javascriptphphtml

The jQuery datepicker fails to function properly on an HTML element that has been added via AJAX

In the page header, I have a jQuery datepicker function bound to the "birthday" input HTML element: <script type="text/javascript"> $(function() { $( "#birthday" ).datepicker(); }); </script> After that, some AJAX functionali ...

htmlajaxjquery

Seeking guidance on an HTML/CSS dilemma. Any recommendations on how to proceed?

I am in the process of developing a flowchart builder using JavaScript. I need some guidance on how to connect two blocks (divs) with an arrow or line. Take a look at the illustration below ______ | | | DIV x---------------- | | ...

javascripthtmlconnectionflowchart

Issue encountered when attempting to select a button with selenium

I'm attempting to use Selenium to click on a button, but encountering an error in the process. The specific error message is shown below: https://i.stack.imgur.com/NQjnh.png This snippet of code represents the accessed HTML page: https://i.stack.i ...

pythonhtmlselenium

How to horizontally center images within an absolute div

I've been struggling to center images horizontally within a div on a slideshow I'm working on. The challenge is that my JavaScript requires absolute positioning to run the slideshow, and all my attempts at centering the images have either failed ...

htmlcss

Tips for updating mysql records on a web page without the need to refresh it using PHP

Consider this situation: Below is the code that shows all user accounts. <table border="3px" align="center" cellspacing="3px" cellpadding="3px"> <tr> <td>Username</td> <td>Password</td> <td><a href="" oncli ...

phphtmlcssmysql

What is the best way to create a read-only input field?

https://i.sstatic.net/36h6s.png The code I attempted to use did not produce the desired result <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="91f3fefee5e2e5e3f ...

htmlbootstrap-5

Utilizing CSS grid to center one specific div, while aligning the remaining divs on the subsequent line

I need to create a pyramid structure within a parent div utilizing 4 child divs. The first child should be centered, with the remaining children positioned below in a second row. <style> .parent { width: 100%; display: grid; grid-template-co ...

htmlcsscss-grid

IE problem with submission button

When viewing in Chrome and Firefox, the text on the button wraps and takes up two lines. However, in Internet Explorer, the text on the button does not wrap and the button extends. Take a look at the download button for $4.99 on CSS : .paypalOrderSubmit ...

htmlcss

The fadeOut method does not support the removeClass function

I've encountered a small issue while trying to create a slider with images. As someone who is new to javascript and jquery, I attempted to build it based on my past experience with Codeacademy. However, the code that used to work fine there is now cau ...

javascriptjqueryhtmlcssslider

Angular - Applying styles to child components when parent components are hovered over

What is the best way to style a child component when hovering on a parent component, even across component boundaries in Angular 17? The traditional method of using parent:hover .child in the parent CSS doesn't seem to work on the child component. Is ...

cssangular

Exploring ways to animate a conditionally displayed component when the state changes using a combination of javascript and css

I am encountering a scenario where I have a react component with a specific part that is rendered conditionally. Upon clicking on a visible element within the component (button), the state changes triggering the display of the hidden parts. However, inst ...

cssreactjs

Manipulating child classes using jQuery

I am struggling to display an X icon next to a tab on my page when the tab is clicked, but I am facing difficulties in toggling its visibility. The issue arises when trying to access the span element within the tabs. $('.tabs .tab-links a').on(& ...

javascriptjqueryhtmlcss

What is the best method for transferring input values between two JSP pages using session variables?

Within my login.jsp file, I have included the following code to create a session and plan to pass the user's inserted username and email. <% try{ Class.forName("com.mysql.jdbc.Driver"); Connection con=DriverManager.getConnectio ...

javahtmljspsession-variablesbackend

Implementing Bootstrap Datepicker within the dynamically generated table rows

I am currently in the process of developing a data grid for a project and I am encountering an issue with implementing Bootstrap Datepicker on the Date field within the table. The problem arises when trying to use the datepicker on subsequent rows that are ...

javascriptjquerycsstwitter-bootstrapdatepicker

design a secure container in html

In the process of creating a helper function that is utilized by a templating library, I have run into an issue. Currently, my helper generates a div with a specific guid id which acts as a placeholder. Additionally, it includes a script that makes a call ...

javascriptjqueryhtml

Creating a static menu icon and implementing a wide dropdown menu in Bootstrap 4

I am facing two major challenges and I am struggling to find solutions for them! Below is the code snippet I am working with: @font-face { font-family: 'yekani'; src: url("../fonts/yekan.ttf"); } @font-face { font-family: 'ye ...

javascripthtmlcssbootstrap-4

Highly suggested CDN for Bootstrap Tab styling

I'm encountering an issue with bootstrap.min.css and tabs. Using: <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> The page format looks correct, but switching tabs doesn't display the c ...

htmlcssbootstrap-4