I am looking to implement a dynamic horizontal accordion feature triggered by a button click.
I came across this example for creating a horizontal accordion. It works well, but it is limited to only 8 accordions. I want the flexibility for users to add as many accordions as they want.
I tried modifying the code to allow for dynamic creation of accordions when the button is clicked. The CSS code snippet below, taken from the provided link, limits the accordion count to 8. I need a solution to make it work for any number of accordions.
li:nth-child(1):nth-last-child(2) input[type="radio"]:checked ~ .accslide {
width: calc(100% - 80px);
}
li:nth-child(8):nth-last-child(1) input[type="radio"]:checked ~ .accslide {
width: calc(100% - 320px);
}
I am seeking assistance in modifying the CSS to accommodate a dynamic number of accordions. Any suggestions or guidance on this issue would be greatly appreciated.