how to check if "true or false = expanded area?"

Question

I have the following list in bootstrap

Click to copy

<i class="fa fa-plus rgh-i" data-toggle="collapse" data-target="#field-1"></i>
<i class="fa fa-plus rgh-i" data-toggle="collapse" data-target="#field-2"></i>
<i class="fa fa-plus rgh-i" data-toggle="collapse" data-target="#field-3"></i>

I use bootstrap to toggle a div.

Each element html i has a aria-expanded="true" when I want to show my div and aria-expanded="false" when I want to hide my div.

I want to check if there are already elements that aria-expanded="true"..and whether there next to hide the previous open.

Click to copy

$( "i" ).on( "click", function() {
        if(There are elements of that property aria-expanded="true")
       {
        hide previous item before you open the current one
       }else{
        //something
       }
});

I tried to make an example jsdfiddle but unfortunately we did ... I hope that you have understood what I want to do.

Basically ... I briefly before hiding the previous item to display the next and not be allowed to be open more than one element.

Thanks in advance!

Answer 1

Click to copy

if(this.attr('aria-expanded') === "true"){
     // hide previous item before you open the current one
}