Sizing parent div to fit child elements

HTML & CSS
1

I’ve been trying to make a simple accordion and decided to try writing one from scratch, using the following code:

		<div class="accordion">
			<label for="tab-1">Panel 1</label>		
			<input type="radio" name="tab" id="tab-1">

			<div class="tab-content">
				Para 1
			</div>
			<label for="tab-2">Panel 1</label>
			<input type="radio" name="tab" id="tab-2">

			<div class="tab-content">
				Para 2
			</div>
				<label for="tab-3">Panel 1</label>	
			<input type="radio" name="tab" id="tab-3">

			<div class="tab-content">
				Para 3
			</div>
		
		</div>

The CSS is as below:

.accordion {
	float: left;
	display: inline-block;
	overflow: visible;
}

input[type='radio'] {
	display: none;
}

label {
	display: block;
	padding: 5px;
	background-image: linear-gradient(#262262, #6a66a6);
	color: #fff;
}

.tab-content {
	 color: yellow;
	 display: none;
	 padding: 5px;
	 border: 1px solid #262262;
}

input[type='radio']:checked + label {
	color: green;
}
			
input[type='radio']:checked + .tab-content {
	color: red;
	display: block;
	transition: transform 2s;
}

This works fine, but when the page is loaded, no radio buttons are checked, so the width of the labels is only as wide as the label text? Is there a way of making the accordion div as wide as the widest tab-content?

Also, the transition just isn’t working - I would quite like to fade, or slowly expand them when selected - what am I doing wrong?

2

Hi there chriscordner,

and a warm welcome to these forums. :winky:

Does this help…

<!DOCTYPE HTML>
<html lang="en">
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">

<title>Untitled Document</title>

<style media="screen">
html {
    box-sizing: border-box;
 }
 
*, *::before, *::after {
    box-sizing: inherit;
 }
 
.accordion {
    display: inline-block;
 }

input[type='radio'] {
    position: absolute;
    left: -999em;
 }

label {
    display: block;
    width: 100%;
    padding: 0.3em 0.5em;
    background-image: linear-gradient( #262262, #6a66a6 );
    color: #fff;
    transition: 2s ease-in-out;
    cursor: pointer;
 }

.tab-content {
    height: 0;
    padding: 0 0.5em;
    overflow: hidden;
    color: #ff0;
 }

input[type='radio']:checked + label {
    color: #0ff;
 }
			
input[type='radio']:checked  + label + .tab-content {
    color: #f00;
    height: 100%;
    padding: 0.5em 0.5em;
    border: 1px solid #262262;
    transition: 2s ease-in-out;
 }
</style>

</head>
<body>

 <div class="accordion">
  <input type="radio" name="tab" id="tab-1">
  <label for="tab-1">Panel 1</label>		
  <div class="tab-content">
   Para 1 Para 1 Para 1 Para 1 Para 1
  </div>
  <input type="radio" name="tab" id="tab-2">
  <label for="tab-2">Panel 1</label>
  <div class="tab-content">
   Para 2 Para 2
  </div>
  <input type="radio" name="tab" id="tab-3">
  <label for="tab-3">Panel 1</label>	
  <div class="tab-content">
   Para 3
  </div>
 </div>

</body>
</html>

coothead

2 Likes
4

This may be of interest also and is the simplest way to make an accordion.

No need for the checkbox hack as it works out of the box in modern browsers.

5 Likes
5

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.