Text Inputs not showing in collapsible divs

Technical Q&A

Topic summary

Problem: Text input fields placed inside collapsible tabs/divs are not visible, while textareas are visible.

Context: The poster shared CSS for the collapsible component and noted Liquid/HTML code. A key CSS rule targets inputs inside the collapsible container: “.collapsible-tab input { position: absolute; opacity: 0; z-index: -1; }”. This rule hides input elements, which aligns with textareas still showing (they aren’t matched by the “input” selector). Other CSS controls expansion via max-height and label pseudo-elements for toggles.

Latest update: A responder asked for the site and page URLs to inspect the issue further.

Status: Unresolved. No fix or change has been confirmed.

Action items:

  • Provide the requested site and page URLs for debugging.
  • Review the CSS rule hiding inputs to confirm whether it’s intentional and adjust if necessary.

Notes: Code snippets are central to understanding the issue.

Summarized with AI on March 2. AI used: gpt-5.
1

I have added some inputs into collapsible tabs (divs) (see code below). However when I run the code any text inputs inside the collapsible tabs do not show. However text areas do show. How can I make the text inputs show? Liquid code:

CSS code:

.collapsible-tab {position: relative; width: 100%; overflow: hidden; margin: 25px 0;} 
.collapsible label { position: relative; display: block; padding: 0 25px 0 0; margin-bottom: 15px; line-height: normal; cursor: pointer; }
.collapsible-tab input { position: absolute; opacity: 0; z-index: -1; } 
.collapsible-tab-content { max-height: 0; overflow: hidden; transition: max-height .35s; } 
.collapsible-tab input:checked ~ .collapsible-tab-content { max-height: none;} 
.collapsible-tab label::after { position: absolute; right: 0; top: 0; display: block; -webkit-transition: all .35s; -o-transition: all .35s; transition: all .35s;} 
.collapsible-tab input[type=checkbox] + label::after { content: "+";} 
.collapsible-tab input[type=radio] + label::after { content: "\25BC"; } 
.collapsible-tab input[type=checkbox]:checked + label::after { transform: rotate(315deg); } 
.collapsible-tab input[type=radio]:checked + label::after { transform: rotateX(180deg); } 
.collapsible-label{ font-size: large;}
2

@MGedney

Can you please provide your site URL & page URL ? so that I can check the issue.