Best approach to conditionally adding an HTML attribute

I’m building out a dynamic accordion with W3’s accessible tabs design pattern. I’m trying to find the best approach to adding a hidden attribute to every tabpanel but the first, so that the first accordion item is open by default.

Here’s the cleanest approach I’ve found so far:

...
   <Set tabContent>
     Set up tab content here
    </Set>    
    <If check="{Get loop=count}" is value=1>
    <div tabindex="0"
       role="tabpanel"
       id="Section{Get loop=count}"
       aria-labelledby="Tab{Get loop=count}"
       >
      <Get tabContent />
      </div>
      <Else />
    <div tabindex="0"
       role="tabpanel"
       id="Section{Get loop=count}"
       aria-labelledby="Tab{Get loop=count}"
       hidden
       > <Get tabContent />
      </div>
      </If>
...

I tried setting up the hidden attribute as a conditional variable and loading it inline, and I tried wrapping just the opening tag in my if statement, but neither rendered the way I needed them to. I wonder if it would be worth thinking about a simpler way to handle conditional html attributes?

I see what you mean… The attribute hidden is currently impossible to add conditionally, because it doesn’t take a value - the key itself needs to be there (or not).

I can think of similar attributes without value, like autoplay and download.

A shortcut could be an attribute named attribute, which just adds whatever is passed as tag attribute(s). I checked that there’s no existing attribute in HTML or SVG with the same name - but, to ensure there’s no naming conflict, maybe it should be called tag-attribute.

That should support something like:

<div tag-attribute="{If loop=count more_than value=1}hidden{/If}">

Would that work for you?

That would do the trick. We can probably leave it till after launch since there’s a pretty easy workaround.