Conditional attribute inside a repeat

Wappler General Need Help
1

Hi I am trying to figure out how to add an area-expanded="true" only for the first result. Using the $index==0 just cant figure oiut how to code this properly Below is my example

  <li role="presentation" dmx-class:active="$index == 0" dmx-bind:area-expanded="true" >
			    <a dmx-bind:href="#tab{{album_id}}"  dmx-bind:aria-controls="#tab{{album_id}}" role="tab" data-toggle="tab">{{album_name_gr}}</a>
			  </li>

As you see I have used the $index==0 to add the active class in the first result only. I want to do the same for the dmx-bind:area-expanded="true'

Currently the code as is, it adds the area-expanded=“true” to every repeated element which is something I want to avoid.

Thank you in advance.

2

Hello Niko,
Are you referring to aria-expanded attribute, as your post is saying arEa-expanded?

3

Yes to area-expanded

4

What is area-expanded used for?
In Bootsrap 4 there is an aria-expanded attribute which is used for accessibility (screen readers) and has nothing to do with how the tabs atually function.

5

The issue is that the layout is currently in BS3. Is it possible to add a conditional for area-expanded=“true”

6

Niko, there is no attribute called arEa-expanded to the tabs neither in BS4 nor in BS3.

The attribute is called aria-expanded. What exactly are you using arEa-expanded for?

7

f@@#$k you are right, this is added form the browser when debugging. So the issue is somewhere else in the repeat. Because only one should be expanded and while inspecting al tabs have this attribute=true Thank you!!

8

The aria-expanded thing has no effect on how tabs work. Even if you remove it - it won’t change anything. This is useful for accessibility (screen readers).

9

Cool thank you. I will try to find where the issue comes from, because all the rest is rendered ok. I am missing a tiny detail that breaks the functionality. Thank you!

1 Like
10

Well as they say in Greek, he who is in a hurry falls down, the issue was from copying and pasting code. I was passing inside the id of the elements the # too.

Removed it and it worked. Thank you

1 Like
11

In Bulgaria they say - He who is in a hurry doesn’t go too far :slight_smile:

Great that you managed to fix it :slight_smile:

2 Likes