J
Jai Corder
Hi Team
Any chance you could add this to your themes for the Tab Section - so that we can use the WYSIWIG Editor, but have this collapsed version which is better for mobile too.
I have attached the html and css files for in txt format, not sure if they are there... so it is also pasted at the bottom.
Alternatively when testing I just put the css in a style tag in the header section.
Thanks in advance.
Jai.
----------------------------
CSS
----------------------------
<style>
.tabs-container {
font-family: Arial, sans-serif;
margin: 20px;
}
.tabs {
display: flex;
flex-wrap: wrap;
}
.tabs label {
order: 1;
display: block;
padding: 10px 20px;
margin-right: 2px;
cursor: pointer;
background: #eee;
font-weight: bold;
transition: background ease 0.2s;
}
.tabs .tab-content {
order: 99;
flex-grow: 1;
width: 100%;
display: none;
padding: 20px;
border: 1px solid #ddd;
}
.tabs input[type="radio"] {
display: none;
}
.tabs input[type="radio"]:checked + label {
background: #ddd;
}
.tabs input[type="radio"]:checked + label + .tab-content {
display: block;
}
@media (max-width: 768px) {
.tabs label {
width: 100%;
margin-right: 0;
margin-bottom: 2px;
}
}
</style>
----------------------------
HTML
----------------------------
<div class="tabs-container">
<div class="tabs">
<input type="radio" id="tab1" name="tabs" checked>
<label for="tab1">Description</label>
<div class="tab-content">
<h3>Description</h3>
<p>Your description content goes here.</p>
</div>
<input type="radio" id="tab2" name="tabs">
<label for="tab2">Compatibility</label>
<div class="tab-content">
<h3>Compatibility</h3>
<p>Your compatibility information goes here.</p>
</div>
<input type="radio" id="tab3" name="tabs">
<label for="tab3">Delivery</label>
<div class="tab-content">
<h3>Delivery</h3>
<p>Your delivery details go here.</p>
</div>
<input type="radio" id="tab4" name="tabs">
<label for="tab4">Returns</label>
<div class="tab-content">
<h3>Returns</h3>
<p>Your returns policy goes here.</p>
</div>
</div>
</div>