How would I get this accordion to be resposive? - css

Question

I have this accordion and I am wondering how I could make it 100% width and responsive. I have played around with width attributes and display attributes and it either breaks it or doesn't do anything.
https://jsfiddle.net/5n4ekqdy/
<div class="accordion horizontal">
<ul>
<li>
<input type="radio" id="vert-1" name="vert-accordion" checked="checked" />
<label for="vert-1"><img src="https://teeter.com/wp-content/uploads/2017/10/icon-delivery-1.png"></label>
<div class="content">
<h3>Free Shipping</h3>
</div>
</li>
<li>
<input type="radio" id="vert-2" name="vert-accordion" />
<label for="vert-2"><img src="https://teeter.com/wp-content/uploads/2017/10/icon-delivery-1.png"></label>
<div class="content">
<h3>Free Shipping</h3>
</div>
</li>
<li>
<input type="radio" id="vert-3" name="vert-accordion" />
<label for="vert-3"><img src="https://teeter.com/wp-content/uploads/2017/10/icon-delivery-1.png"></label>
<div class="content">
<h3>Free Shipping</h3>
</div>
</li>
<li>
<input type="radio" id="vert-4" name="vert-accordion" />
<label for="vert-4"><img src="https://teeter.com/wp-content/uploads/2017/10/icon-delivery-1.png"></label>
<div class="content">
<h3>Free Shipping</h3>
</div>
</li>
</ul>
</div>

Answer 1

Your li are what gives the most width to your accordion. You only need one change then to get your desired result.
Change the width of div.content when the radio is checked to be a calculation of 100% of the Viewer Width - minus the width of each label - minus the width of visible padding and borders.
Like so: width: calc(100vw - 316px)
If you change the padding/border/image width, you would have to change this accordingly.
By the way, I love the accordion animation in pure css. Sweet!
body {
margin: 0;
padding: 0;
}
.accordion {
margin:0 auto;
font-size:14px;
width:100%;
padding:0px;
background:#fff;
}
.accordion ul {
list-style:none;
margin:0;
padding:0;
}
.accordion li {
margin:0;
padding:0;
}
.accordion [type=radio], .accordion [type=checkbox] {
display:none;
}
.accordion label {
display: block;
font-size: 16px;
line-height: 16px;
background: #00425f;
color: #ffffff;
font-weight: 400;
cursor: pointer;
text-transform: uppercase;
-webkit-transition: all .2s ease-out;
-moz-transition: all .2s ease-out;
}
.accordion ul li label:hover, .accordion [type=radio]:checked ~ label, .accordion [type=checkbox]:checked ~ label {
background: #005073;
color: #FFF;
}
.accordion .content {
padding: 0 10px;
overflow: hidden;
border: 1px solid #fff;
-webkit-transition: all .5s ease-out;
-moz-transition: all .5s ease-out;
}
.accordion p {
color:#333;
margin:0 0 10px;
}
.accordion h3 {
color: #ffffff;
padding: 0;
margin: 10px 0;
}
/* Horizontal */
/* Unfortunately fixed heights need to be set for this */
.horizontal {
overflow:hidden;
height:49px;
}
.horizontal ul li {
float:left;
margin:0 1px 0 0;
}
.horizontal ul li label {
text-align: center;
height: 49px;
padding: 5px;
width: 60px;
float: left;
}
.horizontal ul li .content {
height: 49px;
padding: 0;
display: inline-block;
visibility: hidden;
width: 1px;
border-left: 0;
}
.horizontal [type=radio]:checked ~ label {
border-right:0;
}
.horizontal ul li label:hover {
//border:1px solid #005073; /* Again, we don't want the border to disappear on hover */
}
.horizontal [type=radio]:checked ~ label ~ .content {
visibility: visible;
/* HERE IS THE CHANGE */
width: calc(100vw - 316px);
padding: 0 10px;
border: 1px solid #005073;
border-left: 0;
background: #005073;
}
<div class="accordion horizontal">
<ul>
<li>
<input type="radio" id="vert-1" name="vert-accordion" checked="checked" />
<label for="vert-1"><img src="https://teeter.com/wp-content/uploads/2017/10/icon-delivery-1.png"></label>
<div class="content">
<h3>Free Shipping</h3>
</div>
</li>
<li>
<input type="radio" id="vert-2" name="vert-accordion" />
<label for="vert-2"><img src="https://teeter.com/wp-content/uploads/2017/10/icon-delivery-1.png"></label>
<div class="content">
<h3>Free Shipping</h3>
</div>
</li>
<li>
<input type="radio" id="vert-3" name="vert-accordion" />
<label for="vert-3"><img src="https://teeter.com/wp-content/uploads/2017/10/icon-delivery-1.png"></label>
<div class="content">
<h3>Free Shipping</h3>
</div>
</li>
<li>
<input type="radio" id="vert-4" name="vert-accordion" />
<label for="vert-4"><img src="https://teeter.com/wp-content/uploads/2017/10/icon-delivery-1.png"></label>
<div class="content">
<h3>Free Shipping</h3>
</div>
</li>
</ul>
</div>