toggling aria-hidden to false when div is showing / parent is active

Question

Just looking for some help please on a show / hide accordion style jQuery script.

The div with class "revealerT" starts as hidden and has aria-hidden value as True.

I am trying (with limited skills and zero success) in the ".revealerH-click-function" to toggle that "aria-hidden" value to False when the "revealerT" div is showing (this shows when the parent div "revealer" has the "active" class added).

(I found some "aria-expanded" toggling code when web searching that works perfectly in the ".revealerH-click-function", but I can't seem to apply the equivalent for "aria-hidden")

My current code is shown below.

You can probably see from my commented out jQuery code below... that I am not a javascripter :)

Would greatly appreciate some assistance.

Many thanks and have a great day.

JavaScript...

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-migrate-1.4.1.min.js"></script>
<script>
$(document).ready(function() {

    $('.revealerH').click(function(e){
        e.preventDefault();                                     
        $(this).parent().toggleClass('active');            
        $(this).attr('aria-expanded', function (i, attr) {
            return attr == 'true' ? 'false' : 'true'
        });
        $(this).next().slideToggle(200);

        //works on the .revealerT div as a test
        $(this).next().toggleClass('boo');

//how to toggle aria hidden on the .revealerT div??

//      $('.revealerT.boo').attr('aria-hidden','false');

//      $(this).next().attr('aria-hidden', function (i, attr) {
//          return attr == 'true' ? 'false' : 'false'
//      });

//      $('.revealer').hasClass('active'); {
//          $('.revealerT').attr('aria-hidden', function (i, attr) {
//              return attr == 'true' ? 'false' : 'false'
//          });
//      }

//      $(next).('.revealerT').attr('aria-hidden', function (i, attr) {
//          return attr == 'true' ? 'false' : 'false'
//      });

//      $(this).('.revealerH').hasClass('active') {
//          $(next).('.revealerT').attr('aria-hidden','false');
//      };

//      if ($(this).parent().hasClass("active")){
//          $next().('.revealerT').attr('aria-hidden','false');
//      };

        return false;
    });
    
    $('.revealerShowAll').click(function(e){
        e.preventDefault();
        $('.revealer').addClass('active');
        $('.revealerH').attr('aria-expanded','true');
        $('.revealerT').show(300).attr('aria-hidden','false');
        return false;
    });

    $('.revealerHideAll').click(function(e){
        e.preventDefault();
        $('.revealer').removeClass('active')
        $('.revealerH').attr('aria-expanded','false');
        $('.revealerT').slideUp('fast').attr('aria-hidden','true');
    });

});
</script>

Minimal css...

<style type="text/css">

.revealerBox { width: auto; height: auto; margin: 0 0 20px 0; display: block; position: relative; }
.revealer { margin: 0 0 10px 0; text-align: left; display: block; position: relative; }
.revealerH, .revealerT { width: auto; }
.revealerH a { display: block; }
.revealerT { background: #f5f5f5; overflow: hidden; display: none; }
.revealerT .block { padding: 20px; z-index: 50; }

</style> 

Html...

<div class="revealerBox" role="complementary">

 <div class="revealer">
  <h2 class="revealerH" id="accordion-header-01" aria-controls="accordion-content-01" aria-expanded="false">
   <a href="javascript:void(0);">Question 1</a>
  </h2>
  <div class="revealerT" id="accordion-content-01" aria-labelledby="accordion-header-01" aria-hidden="true">
   <div class="block">
    <p>Answer 1</p>
   </div>
  </div>
 </div>

 <div class="revealer">
  <h2 class="revealerH" id="accordion-header-02" aria-controls="accordion-content-02" aria-expanded="false">
   <a href="javascript:void(0);">Question 2</a>
  </h2>
  <div class="revealerT" id="accordion-content-02" aria-labelledby="accordion-header-02" aria-hidden="true">
   <div class="block">
    <p>Answer 2</p>
   </div>
  </div>
 </div>

 <div class="revealer">
  <h2 class="revealerH" id="accordion-header-03" aria-controls="accordion-content-03" aria-expanded="false">
   <a href="javascript:void(0);">Question 3</a>
  </h2>
  <div class="revealerT" id="accordion-content-03" aria-labelledby="accordion-header-03" aria-hidden="true">
   <div class="block">
    <p>Answer 3</p>
   </div>
  </div>
 </div>

</div>

Answer 1

You can check if revealer div has active class using .hasClass("active") this will give you true or false so set that value to your aria-hidden.

Demo Code :

$('.revealerH').click(function(e) {
  e.preventDefault();
  $(this).parent().toggleClass('active');
  $(this).attr('aria-expanded', function(i, attr) {
    return attr == 'true' ? 'false' : 'true'
  });
  $(this).next().slideToggle(200);
  //set attr of next div
  $(this).next().attr('aria-hidden', $(this).parent().hasClass("active"))

});

.revealerBox {
  width: auto;
  height: auto;
  margin: 0 0 20px 0;
  display: block;
  position: relative;
}

.revealer {
  margin: 0 0 10px 0;
  text-align: left;
  display: block;
  position: relative;
}

.revealerH,
.revealerT {
  width: auto;
}

.revealerH a {
  display: block;
}

.revealerT {
  background: #f5f5f5;
  overflow: hidden;
  display: none;
}

.revealerT .block {
  padding: 20px;
  z-index: 50;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="revealerBox" role="complementary">

  <div class="revealer">
    <h2 class="revealerH" id="accordion-header-01" aria-controls="accordion-content-01" aria-expanded="false">
      <a href="javascript:void(0);">Question 1</a>
    </h2>
    <div class="revealerT" id="accordion-content-01" aria-labelledby="accordion-header-01" aria-hidden="true">
      <div class="block">
        <p>Answer 1</p>
      </div>
    </div>
  </div>

  <div class="revealer">
    <h2 class="revealerH" id="accordion-header-02" aria-controls="accordion-content-02" aria-expanded="false">
      <a href="javascript:void(0);">Question 2</a>
    </h2>
    <div class="revealerT" id="accordion-content-02" aria-labelledby="accordion-header-02" aria-hidden="true">
      <div class="block">
        <p>Answer 2</p>
      </div>
    </div>
  </div>

  <div class="revealer">
    <h2 class="revealerH" id="accordion-header-03" aria-controls="accordion-content-03" aria-expanded="false">
      <a href="javascript:void(0);">Question 3</a>
    </h2>
    <div class="revealerT" id="accordion-content-03" aria-labelledby="accordion-header-03" aria-hidden="true">
      <div class="block">
        <p>Answer 3</p>
      </div>
    </div>
  </div>

</div>