How to Use Aria-Expanded="True" to Change a CSS Property

How to use aria-expanded="true" to change a css property

Why javascript when you can use just css?

a[aria-expanded="true"]{  background-color: #42DCA3;}

<li class="active">   <a href="#3a" class="btn btn-default btn-lg" data-toggle="tab" aria-expanded="true">        <span class="network-name">Google+</span>   </a></li><li class="active">   <a href="#3a" class="btn btn-default btn-lg" data-toggle="tab" aria-expanded="false">        <span class="network-name">Google+</span>   </a></li>

Targeting an element using a selector from another element

You can use attribute selector to select aria-expanded value and sibling selector to select your matexcerpt class.

button[aria-expanded="true"] + .projectmargin .matexcerpt {
  display: none;
}

button[aria-expanded="false"] + .projectmargin .matexcerpt {
  display: block;
}

From the above method, you can do with CSS. You can also do with JavaScript.

That depends on your aria-expanded value, if you can change value dynamically by JavaScript, You need to use JavaScript for that but if you have different component for aria-expanded values, CSS is the best option.

How to expand and collapse a div made using aria-expanded attribute?

As you did not include any HTML markup the following is a rough facsimile of the original. You are essentially trying to toggle the visibility of the DIV elements and indicate, using ARIA tags, that the element is or is not expanded

To that end you can make use of the aria-expanded attribute in CSS to govern the visibility of the child objects within the parent container. By setting the attribute aria-expanded as either true or false will then invoke the relevant css rule to display/hide the children.

const bool=(v)=>v=='true' ? true : false;

const clickhandler=function(e){
  this.setAttribute('aria-expanded', !bool(this.ariaExpanded) )
}

document.querySelectorAll('div.section--section--bukkg').forEach(div=>div.addEventListener('click',clickhandler) );

.section--section--bukkg{
  transition:ease-in-out 250ms all;
  border:1px solid red;
  padding:1rem;
  margin:1rem;
}

[aria-expanded="false"] .section--section--heading{
  display:none;
}
[aria-expanded="true"] .section--section--heading{
  display:block;
}

<div class='section--section--bukkg' data-purpose='section-panel' aria-expanded='false'>
  <div class='section--section--heading' role='button' tabindex=0 data-purpose='section-heading'>
    <div class='section-title' data-purpose='section-panel'>A title of some sort 1</div>
    <span class='section-chevron'>Some content in a SPAN 1</span>
    <div class='font-text-xs'>teeney weeney text 1</div>
  </div>
</div>

<div class='section--section--bukkg' data-purpose='section-panel' aria-expanded='false'>
  <div class='section--section--heading' role='button' tabindex=1 data-purpose='section-heading'>
    <div class='section-title' data-purpose='section-panel'>A title of some sort 2</div>
    <span class='section-chevron'>Some content in a SPAN 2</span>
    <div class='font-text-xs'>teeney weeney text 2</div>
  </div>
</div>

<div class='section--section--bukkg' data-purpose='section-panel' aria-expanded='false'>
  <div class='section--section--heading' role='button' tabindex=2 data-purpose='section-heading'>
    <div class='section-title' data-purpose='section-panel'>A title of some sort 3</div>
    <span class='section-chevron'>Some content in a SPAN 3</span>
    <div class='font-text-xs'>teeney weeney text 3</div>
  </div>
</div>

How to use Jquery how to change the aria-expanded="false" part of a dom element (Bootstrap)?

You can use .attr() as a part of however you plan to toggle it:

$("button").attr("aria-expanded","true");

aria-expanded html attribute

The aria-expanded attribute is simply a flag for the user agent. It

Indicates whether the element, or another grouping element it controls, is currently expanded or collapsed.

...where that indication is for the element's contents, or if aria-controls is also specified, for the target element.

You set its value to indicate what you've done to the page (e.g., you've expanded or contracted a section). It doesn't have any particular behavior associated with it, it's for letting the user agent know what's going on so it can interpret that for its audience (who may be vision-impaired and need some other indication that a section is/isn't expanded).

Get aria-expanded value

aria-expanded is an attribute on the element, not a class, so the selector is incorrect. Secondly, you should use the attr() function to get the value of that attribute. val() is intended to retrieve the value attribute from form related elements, such as input and textarea. Try this:

console.log($(this).find('a[aria-expanded]').attr('aria-expanded'));

How to style bootstrap aria-expanded attribute with SASS

I found out that to target the aria-expanded attribute I have just to remove the dot before the selector so I've changed the code from this:

&.[aria-expanded="true"]{
  background-color: red;
}

to this:

&[aria-expanded="true"]{
   background-color: red;
}

How to Use Aria-Expanded="True" to Change a CSS Property