Marissa Marissa - 3 months ago 19
HTML Question

Can I use inline-css to make expandable content?

I'm working on a landing page in an asp.net storefront and am wanting to add expandable content. I've been told I should be using inline styles for this - not an internal style sheet, and because there is psuedo styles in the css I can't make my content expand when I inline it.

Are there any options as to how to create expandable content with an inline style?



/* Accordian Items */
.collapse {
text-align:left;
}

.collapse > * + *{
display:none;

}
.collapse > *{
cursor:pointer;
}

.collapse:focus{
outline:none;
}
.collapse:focus > * + *{
display:block;
}

.accordian-cta {
width:20%;
float: right;
vertical-align:middle;
text-align:right;
}

.accordian-title {
width:100%;
max-width:1000px;

text-indent:10px;
margin-bottom:10px;
color:rgb(71,70,70);
font-size:1.17em;
font-family:arial, verdana, sans-serif;
font-weight:bold;
padding:5px;

<div class="collapse" tabindex="3">
<div class="accordian-title">Click to expand<div class="accordian-cta">+&nbsp;</div> </div>
<div class="accordian-text">
[EXPANDED CONTENT HERE]


</div>
</div>




Answer

You can't with inline css, but IMHO there is no point constraining your code this way. Here is an other example in pure css, using an input of type checkbox:

#expand {
  display: none;
}
#toggle:checked ~ #expand {
  display: block;
}
<input id="toggle" type="checkbox" checked>
<label for="toggle">Hide/Show</label>
<p id="expand">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>

It differs from your code by not toggling the content when losing the focus, which is more "stable" for a user.

You can add more css to make a transition on the height instead of a brute "display/no-display", or style the checkbox in a more fashion way, like here.

More info on css selectors here.