Listing Designer

Suggest a new feature for Listing Designer!
Collapsible Tab Section
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>
0
Load More