Spicy Sections: An experiement/demonstration

This glitch is an experiment, attempting think about (and demonstrate for discussion) an idea in which "good old well supported HTML" can be conditionally presented with different affordances: As a tab set, i ndependent or exlcusive disclosures.

If you want to cut to the chase and see something working, check out this demonstration and resize your browser window to see the afforances change.

This is using a custom element wrapper (<spicy-sections> which just wraps and progressively enhances heading and content pairs like...

<spicy-sections>
  <!-- any heading here, followed by an element containing content --!>
  <h2>Ingredients</h2>
  <div>A list of ingredients</div>

  <!-- repeat the pattern... --!>
  <h2>Instructions</h2>
  <div>A list of instructions</div>
</spicy-sections>

Spicy sections allow authors to express when different affordances should be presented. This can be via an attribute, or a CSS Custom Property (though, this is read only once). To present these on a smaller screen as a series of collapses (as if they were summary/details like), this would look like...

[screen and (max-width: 800px)] collapse

This custom element isn't a proposal. It is something which we can use to roughly evaluate the concept an element which could present different Design Affordance Controls". There are many efforts happening in parallel discussing precisely how this should (and shouldn't or can and can't) work, but we'd love feedback about the crux of the idea itself. Please check it out: Play with it. Build something useful. Ask questions, show us your uses, give us feedback about what you like or don't.

If you want to see more details on the custom element there's more in SpicySections.html.