What steps should I take to ensure that this accordion is responsive?

I am currently working on an accordion design and trying to figure out how to make it full width and responsive. I have experimented with various width and display attributes, but I haven't been able to achieve the desired result yet.

If you'd like to take a look at my current code, you can find it here: 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>
css

Answer №1

Your li elements are crucial for determining the width of your accordion. Making just one adjustment can help you achieve your desired outcome.

To achieve the desired width when the radio button is checked, you need to set the width of div.content to be a calculation of 100% of the Viewer Width minus the width of each label, minus the width of visible padding, and borders.

For example: width: calc(100vw - 316px)

If you modify the padding, borders, or image width, you'll have to update this calculation accordingly.

On a side note, I'm really impressed by the pure CSS accordion animation. It's awesome!

body {
  margin: 0;
  padding: 0;
}
/* Your CSS code for the accordion goes here */

<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>

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

External CSS stylesheets

I have encountered the following HTML code: <div class="entry"> <p></p> //text-indent here <blockquote> <p></p> //no text-indent here </blockquote> </div> I am trying to apply a ...

htmlcss

Using a JSON file as a database for a project featuring HTML, CSS, and Vanilla JavaScript

Our task was to create a project that exclusively utilized JSON files for data storage. The data structure we were working with resembles the following: [ { "aircraftName": "Boeing 747", "departDate": 1640173020000, ...

javascripthtmlcssjson

Text that disappears upon clicking on show/hide按钮

Could someone please help me figure out how to prevent the "See more" text from disappearing when clicked in the example below? I want it to stay visible. Thank you! ...

javascripthtmlcss

Tooltips envelope around themselves

Several paragraphs contain tooltips, but some of them break onto a new line instead of staying within the text. <div class="row"> ... </div> Fiddle: https://jsfiddle.net/LhjmLw8k/29/ The issue is that certain words like "Trasimeno" and ...

htmlcsstooltip

Changing the appearance of a radio button dynamically upon clicking

I am currently working on a dynamic pickup date form that utilizes radio buttons. My goal is to change the style of the selected value when a user clicks on it. Below is the code I have tried, but it has not been successful: foreach ($period as $day){ ech ...

jquerycssformsradio-button

The border color of the text input is not changing as expected when in focus

Is there a way to change the border color of a text input field to blue when it is not selected and then change it to orange when the field is selected? input[type="text"]{ border: 1px solid blue; } input[type="text"]:focus{ border: 1px solid ora ...

javascripthtmlcss

JS Nav Dots are not activating the Active Class

I have been utilizing a code snippet from this source to incorporate a vertical dot navigation feature into a single-page website. The navigation smoothly scrolls to different sections when a link is clicked, with an active highlight on the current section ...

javascripthtmlcssnavsquarespace

Ensuring elements are correctly positioned

I am struggling to make the images in the following code align horizontally across the top and also need to align the h1's in the same way. I have tried using the vertical-align property, but it seems to behave oddly to me. HTML: <div class=&apos ...

cssformattingalignmentvertical-alignment

The HTML navbar seems to have a mind of its own, disappearing and shifting around unpredictably as I zoom in or resize

WHEN DISPLAYING THIS CODE, IT IS ADVISED TO VIEW IN FULL PAGE MODE This code includes navigation, header, and styling elements. However, when the browser is zoomed in or out, the navbar tends to move around and eventually disappears off the screen if wind ...

htmlcsswebnavigation

How can I achieve a full-width div without using the container-fluid class while still maintaining the width and structure of

I am looking for a full div without the container-fluid class while keeping the container width fixed. The structure of the container should not change as I need another div inside the container. The structure should remain as it is. .main { padding: ...

htmlcssbootstrap-4

Dropdown button split aligned with its first button

Comparing the alignment of split button dropdowns in Bootstrap 3 and Bootstrap 4, I find that Bootstrap 3 aligns them to the left of the first button, while Bootstrap 4 only aligns them according to the second button. https://i.stack.imgur.com/gAt78.png h ...

csstwitter-bootstrapbootstrap-4

How do I insert a new column for the Name attribute in ASP.NET Core Identity without using the Username field?

I'm currently utilizing ASP.NET Core Identity within my project. I have a form that includes fields for Name and Username. The issue arises when attempting to save values from the Name field, as it triggers an error stating that they are not in the co ...

c#htmlcssasp.netasp.net-core

Updating padding through local storage does not function as intended

I recently added two buttons to my website for adjusting the padding. While they are functional, I find myself manually setting the padding for nav, main, and footer in the CSS. Here is the snippet of the code: main { padding: 20px 25%; } footer { ...

javascripthtmljquerycss

Looking to streamline this intricate grid/table structure with the help of Twitter Bootstrap

I've been experimenting with creating a complex layout using tables in Twitter Bootstrap, but I'm struggling to get it just right – especially when it comes to displaying the number 5! Is there a way to achieve the same layout using divs instea ...

htmlcsstwitter-bootstrap-3

Is it possible to keep content visible in Bootstrap tab by adding CSS?

Having an issue with the "formbox" class that is causing unexpected behavior when applied to a form. When removed, everything works as expected. I've tried narrowing down the issue by removing each CSS rule individually and testing it out but haven&ap ...

htmlcsstwitter-bootstrap

Elegant Bootstrap 4 Carousel featuring a glimpse of the upcoming slide alongside the primary carousel item

I am in search of a straightforward Bootstrap 4 carousel that showcases a glimpse of the next slide on the right. Despite exploring similar questions, I have not found a suitable solution. The links to those questions are: 1)Bootstrap carousel reveal part ...

javascriptjqueryhtmlcssbootstrap-4

Using CSS to create a triangular background within a <div> element

I am looking to create a CSS triangle shape for a background, but I am unsure of how to achieve this or if it is even possible. Ultimately, I want the menu to resemble the image linked below: While I have come across methods to create the desired shape, ...

htmlcss

The cancel button for the input type "search" does not appear on Firefox, Internet Explorer, and Edge browsers

.hs-search-field__input { color: #111d33; border-bottom: 3px solid #111d33; appearance: searchfield; -moz-appearance: searchfield; -webkit-appearance: searchfield; -ms-appearance: searchfield; color: #fff; border-radius: 0px ...

htmlcssformscss-selectors

Avoiding the separation of hyphenated words when they overflow on a new line

My code is designed to limit text to two lines and show an ellipsis if there is more content. However, I am facing an issue with hyphenated words like "breath-taking" not being treated as one word. Instead, they are often cut off at the end of the second l ...

htmlcssoverflowcss-hyphens

Using jQuery to create a dynamically moving div that forms an endless wall

In order to create a continuous wall that pulls text from a database and displays it, I've developed the following code: $(function() { var x = 0; var y = 100.0; var z=0; setInterval(function() { x -= 0.1; y -= 0.1; ...

javascriptjqueryhtmlcss