Click here to Skip to main content
15,867,308 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
HTML
<div id="accordion" role="tablist">  
  <div class="card">  
    <div class="card-header" role="tab" id="headingOne">  
      <h5 class="mb-0">  
        <a data-toggle="collapse" href="#collapseOne" role="button" aria-expanded="true" aria-controls="collapseOne">  
          Collapsible Group Item #1  
        </a>  
      </h5>  
    </div>  

    <div id="collapseOne" class="collapse show" role="tabpanel" aria-labelledby="headingOne" data-parent="#accordion">  
      <div class="card-body">  
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.  
      </div>  
    </div>  
  </div>  
  <div class="card">  
    <div class="card-header" role="tab" id="headingTwo">
      <h5 class="mb-0">  
        <a class="collapsed" data-toggle="collapse" href="#collapseTwo" role="button" aria-expanded="false" aria-controls="collapseTwo">  
          Collapsible Group Item #2
        </a>  
      </h5>  
    </div>  
    <div id="collapseTwo" class="collapse" role="tabpanel" aria-labelledby="headingTwo" data-parent="#accordion">  
      <div class="card-body">  
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.  
      </div>  
    </div>  
  </div>  
  <div class="card">  
    <div class="card-header" role="tab" id="headingThree">  
      <h5 class="mb-0">  
        <a class="collapsed" data-toggle="collapse" href="#collapseThree" role="button" aria-expanded="false" aria-controls="collapseThree">  
          Collapsible Group Item #3  
        </a>  
      </h5>  
    </div>  
    <div id="collapseThree" class="collapse" role="tabpanel" aria-labelledby="headingThree" data-parent="#accordion">  
      <div class="card-body">  
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.  
      </div>  
    </div>  
  </div>  
</div>


What I have tried:

when some one click on the collpase menu i am saving his Id in the cookie using java script like this
JavaScript
$(function () {
       $('.card-header .collapsed').on('click', function () {
               //set cookie for current index on change event
             alert($.cookie('saved_index', $(this).attr('href')));
       });


when i page is loading i am checking the ID on page loading and i am trying to set the value of aria-expanded="true" through this method
JavaScript
$(document).ready(function () {

       //var getSessionValue = $.cookie('saved_index', $(this).attr('id'));;
       var getSessionValue = $.cookie('saved_index', $(this).attr('href'));
       if (getSessionValue) {
        $(getSessionValue).attr("aria-expanded", "true");

   }
   );

but i am unable to set the aria-expanded="true" kindly any one can help me for this matter.
Really very thank full.
Posted
Comments
Chris Copeland 15-Oct-20 11:04am    
Have you tried debugging this in your browser and see what happens? Are you sure that the value of getSessionValue contains the expected element id?

I did a quick check to see what the $.cookie function does and apparently to read the value of a cookie you shouldn't be passing in another argument other than the cookie name. So I would expect your code to read var getSessionValue = $.cookie('saved_index');
Aitzaz Ahsan 18-Oct-20 0:12am    
I m getting value in following getSessionValue = $.cookie('saved_index', $(this).attr('href')); but i am unable to get aria-expanded="true"
Chris Copeland 20-Oct-20 8:12am    
Have you validated that the value of getSessionValue matches the ID of the element you're trying to update?

If you're using a more recent version of jQuery you could also try using $(getSessionValue).prop('aria-expanded', 'true'); which seems to be a preferred choice for getting/setting element attributes.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900