remove tag and add additional css class to data-sly-resource

Question

Here's my code and I want to add another css class toggleable-content to the existing code:

  <sly data-sly-resource="${'item' @ resourceType='components/header'}"></sly>

This code would look something like this:

<section aria-label="aria label">
   <ul class="row">
      <li class="col">
            <div class="body px-3">
               <h2 class="h3">
                  body
               </h2>
               <p>body text</p>
            </div>
      </li>
   </ul>
</section>

I want to remove section tag and add another css class toggleable-content to the <ul> tag. Below is what I'd like to achieve:

       <ul class="row toggleable-content">
          <li class="col">
                <div class="body px-3">
                   <h2 class="h3">
                      body
                   </h2>
                   <p>body text</p>
                </div>
          </li>
       </ul>

I was wondering how to use slightly to achieve the above? I tried something below but it doesn't work:

<sly data-sly-resource="${'item' @ resourceType='components/header', cssClassName='toggleable-content'}"></sly>

Answer 1

Assuming the section markup is managed by the included resource (components/header) then you cannot do it directly. Indirectly, with AEM, you can pass a parameter (through request attributes) and retrieve it in the components/header model, then add the section conditionally (using data-sly-unwrap for example).

Or you re-organize your code and switch from resource inclusion to template calling and pass the parameter directly using data-sly-call.