title: Jquery - Get attribute value of closest class
body: <p>I am trying to grab the attribute value from the closest element with the class specified but keep getting back undefined. </p>
  
  <p>Below is my HTML and my code, I am not too sure what am doing wrong to get back undefined. </p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>    &lt;body&gt;
    &lt;form action="/update" id="formwrite"&gt;
      &lt;div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true"&gt;
        &lt;div class="panel"&gt;
          &lt;div class="panel-heading" role="tab" id="headingOne"&gt;
            &lt;h4 class="panel-title va-middle"&gt;Account Settings
                          &lt;img src='../images/colopen.svg' data-swap='../images/coll.svg' class="panel-icon collapse-icon" role="button" data-toggle="collapse" data-parent="#accordion" href="#collaspeOne" aria-expanded="true" aria-controls="collaspeOne"&gt;
                          &lt;/h4&gt;
          &lt;/div&gt;
          &lt;div id="collaspeOne" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne"&gt;
            &lt;div class="panel-default"&gt;
              &lt;div class="row fieldpos"&gt;
                &lt;fieldset class="form-group textwide"&gt;
                  &lt;label for="email"&gt;Email&lt;/label&gt;
                  &lt;input type="email" class="form-control" id="email" placeholder="Enter Email" required&gt;
                &lt;/fieldset&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="panel"&gt;
          &lt;div class="panel-heading" role="tab" id="headingTwo"&gt;
            &lt;h4 class="panel-title va-middle"&gt;Other Settings
                                  &lt;img src='../images/colopen.svg' data-swap='../images/coll.svg' class="panel-icon collapse-icon" role="button" data-toggle="collapse" data-parent="#accordion" href="#collaspeTwo" aria-expanded="true" aria-controls="collaspeTwo"&gt;
                                  &lt;/h4&gt;
          &lt;/div&gt;
          &lt;div id="collaspeTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo"&gt;
            &lt;div class="panel-default"&gt;
              &lt;div class="row fieldpos"&gt;
                &lt;fieldset class="form-group textwide"&gt;
                  &lt;label for="group"&gt;Test&lt;/label&gt;
                  &lt;input type="text" class="form-control " id="group" placeholder="test" required&gt;
                &lt;/fieldset&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;button type="submit" class="btn btn-success form-control savechanges"&gt;Save Changes&lt;/button&gt;
      &lt;button class="btn btn-success form-control test"&gt;Call Function&lt;/button&gt;
    &lt;/form&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p><strong>JS</strong></p>
  
  <pre><code>  $(document).on("click", ".test", function (){
      $("input[required]").each(function(){
      var inputval = $(this).val();
      var collaspe = $(this).closest(".collapse-icon").attr("aria-expanded");
      console.log(collaspe);
          if(!inputval){
              console.log("Required Empty");
              $(".collapse-icon").trigger("click");
          } else {
              console.log("Required has value");;
          }
      });
      });
  </code></pre>
  
  <p>Any suggestions?</p>
  
  <p>EDIT: <a href="https://jsfiddle.net/ycfpe5zd/2/" rel="nofollow">JSFiddle</a></p>