How to get element within accordion event in jQuery

Question

I am using the following script to detect click event so the accordion item expands and I need to get the div having class .cellArrow.

Html

<div class="cellArrow"></div> 

JS

 $("#accordionContainer").on("accordionbeforeactivate", function (event, ui) {

       var cellArrow = $(this).find(".cellArrow");
};

The problem is that each section of accordion has this class so here I have the all .cellArrow classes.

My question is how to obtain the <div> exactly within a fireing accordion element?

Thank you!

P.S. Here is HTML I have:

<div id="accordionContainer">
    <h3>Item 1
        <div class="cellArrow"></div> 
    </h3>

    <div>First content panel</div>

    <h3>Item 2
        <div class="cellArrow"></div> 
    </h3>

    <div>Second content panel</div>
</div>

Answer 1

try this code,

$(function() {
  $("#accordionContainer").accordion();
  $("#accordionContainer").on("accordionbeforeactivate", function(event, ui) {

    var cellArrow = $('> .cellArrow',ui.newHeader);
    alert(cellArrow.html());
  });

})

<link href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" type="text/css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js" type="text/javascript"></script>

<div id="accordionContainer">
  <h3>Item 1
        <div class="cellArrow">1</div> 
    </h3>

  <div>First content panel</div>

  <h3>Item 2
        <div class="cellArrow">2</div> 
    </h3>

  <div>Second content panel</div>
</div>

Answer 2

Your selector should be:

var cellArrow = $(ui.newHeader).find('.cellArrow');

https://api.jqueryui.com/accordion/#events