javascript - jQuery click to scroll to cloest div.class and show not working -

hi have ideas im doing wrong here?

when click show content want find closest div class ask , scroll not work... im new jquery maybe im doing wrong think logic correct haha

getting error in console:

cannot read property 'top' of undefined

example:

$(document).ready(function() {    // show examples    $(document).on("click", ".show-syntax", function(e) {      var ele = $(this).parent().closest(".render-syntax");      // search within section      ele.show();      $("html, body").animate({        scrolltop: $(ele).offset().top      }, 100);      e.preventdefault();    });    });

.render-syntax {    display: none;  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>  <div class="container">    <a href="#" class="show-syntax">show content</a>  </div>    <div class="render-syntax">    <p>content show</p>  </div>    <div class="container">    <a href="#" class="show-syntax">show content</a>  </div>    <div class="render-syntax">    <p>content show</p>  </div>    <div class="container">    <a href="#" class="show-syntax">show content</a>  </div>    <div class="render-syntax">    <p>content show</p>  </div>

closest doesn’t go through siblings; next job need. replacing closest next in code give proper behavior.

var ele = $(this).parent().next(".render-syntax"); 

otherwise ele won’t have elements, ele.offset() returns null , there’s no top property of null, hence error.