Offset on JQuery accordion content when click on accordion header

Question

I want to play with offset and animate to scroll to the content of the accordion , when user click on his header. Live here .

I have 30 accordion on my page, so I tried this:

  $(".ui-accordion").on("click",function(){
       var $acc = $(this);
        $('html,body').animate({
    scrollTop: $acc.offset().top
  }, 500);
    });

And this:

  $(".ui-accordion-header").on("click",function(){
       var $acc =  $(this).next(".ui-accordion-content");
        $('html,body').animate({
    scrollTop: $acc.offset().top
  }, 500);
    });

But didn't worked, I didn't saw console error too. I tried to insert an alert example on the function to show if is a problem of the scrolltop feature, but alert didn't worked too, so I think that the click function is not working.

HTML structure of one of the item:

<div class="column">
<div class="text-box">
<h3>Titulación</h3>
<p>Información y documentación / Comunicación Audiovisual</p>
<h3>Puesto a desempeñar</h3>
<p>Gestor documental/ Editor medios audiovisuales</p>
<h3>Tipo de beca</h3>
<p>Entidad sin ánimo de lucro: 1 año media jornada sin compromiso</p>
</div>
<div id="accordion" class="ui-accordion ui-widget ui-helper-reset" role="tablist">
  <h3 class="ui-accordion-header ui-corner-top ui-accordion-header-collapsed ui-corner-all ui-state-default ui-accordion-icons" role="tab" id="ui-id-1" aria-controls="ui-id-2" aria-selected="false" aria-expanded="false" tabindex="0"><span class="ui-accordion-header-icon ui-icon ui-icon-triangle-1-e"></span>Más información</h3>
  <div class="ui-accordion-content ui-corner-bottom ui-helper-reset ui-widget-content" id="ui-id-2" aria-labelledby="ui-id-1" role="tabpanel" aria-hidden="true" style="display: none; height: 518px;">
  <h3>Breve descripción del puesto</h3>
<p>Recopilación y clasificación de material digitalizado del archivo de la Fundación/ Edición audiovisual</p>
<h3>Empresa</h3>
<p>Fundación Centro de Estudios Presidente Rodríguez Ibarra (FUNDCERI)</p>
<h3>Localización del puesto</h3>
<p>Sede Fundación</p>
<h3>Horario de trabajo</h3>
<p>Mañana</p>
<div class="boton-proyecto-inicia"><a class="boton-solicitudes" title="Inscripción Premios Emprendimiento" href="https://www.fundacioncb.es/inscripcion-premios-emprendimiento/">Inscribirse</a></div>
  </div>
</div>
</div>

Answer 1

Your code is working. But keep in mind that you should run you JavaScript code AFTER the dom elements been rendered. or use on to do live binding. Change your code something like this:

 $("html").on("click", ".ui-accordion", function(){
   var $acc = $(this);
   $('html,body').animate({
      scrollTop: $acc.offset().top}, 
    500);});