javascript - jQuery click and scroll to next div with class not working -

this simple function i've done not seem want play ball; have ideas?

the error i'm getting is:

uncaught typeerror: cannot read property 'top' of undefined

does not scroll or show hidden div i've asked for.

$(document).ready(function() {      // show examples      $(document).on("click",".show-syntax",function(e){      	$(this).next(".render-syntax").show();      	$('html,body').animate({ scrolltop: $(this).next(".render-syntax").offset().top}, 'slow');      	e.preventdefault();      });    });

/**   * github theme   *   * @author craig campbell   * @version 1.0.4   */  pre {      border: 1px solid #ccc;      word-wrap: break-word;      padding: 6px 10px;      line-height: 19px;      margin-bottom: 20px;      position: relative;  }    code {      border: 1px solid #eaeaea;      margin: 0px 2px;      padding: 0px 5px;      font-size: 12px;  }    pre code {      border: 0px;      padding: 0px;      margin: 0px;      -moz-border-radius: 0px;      -webkit-border-radius: 0px;      border-radius: 0px;  }    pre, code {      font-family: consolas, 'liberation mono', courier, monospace;      color: #333;      background: #f8f8f8;      -moz-border-radius: 3px;      -webkit-border-radius: 3px;      border-radius: 3px;  }    pre, pre code {      font-size: 13px;  }    pre .comment {      color: #998;  }    pre .support {      color: #0086b3;  }    pre .tag, pre .tag-name {      color: navy;  }    pre .keyword, pre .css-property, pre .vendor-prefix, pre .sass, pre .class, pre .id, pre .css-value, pre .entity.function, pre .storage.function {      font-weight: bold;  }    pre .css-property, pre .css-value, pre .vendor-prefix, pre .support.namespace {      color: #333;  }    pre .constant.numeric, pre .keyword.unit, pre .hex-color {      font-weight: normal;      color: #099;  }    pre .entity.class {      color: #458;  }    pre .entity.id, pre .entity.function {      color: #900;  }    pre .attribute, pre .variable {      color: teal;  }    pre .string, pre .support.value  {      font-weight: normal;      color: #d14;  }    pre .regexp {      color: #009926;  }    pre .btn {      border-left: 1px solid #ccc;      border-bottom: 1px solid #ccc;      display: block;      padding: 5px 10px;      top: 0;      right: 0;      position: absolute;      background: #eee;      text-decoration: none;      color: #333;  }    .render-syntax {      display: none;  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>  <pre>            <a href="#" class="btn show-syntax">show below example</a>            <code data-language="html">                <!-- .container main centered wrapper -->              <div class="container">                  <!-- columns should immediate child of .row -->                <div class="row">                  <div class="one column">one</div>                  <div class="eleven columns">eleven</div>                </div>                  <!-- use number , class 'column' or 'columns' -->                <div class="row">                  <div class="two columns">two</div>                  <div class="ten columns">ten</div>                </div>                  <!-- there few shorthand columns widths -->                <div class="row">                  <div class="one-third column">1/3</div>                  <div class="two-thirds column">2/3</div>                </div>                <div class="row">                  <div class="one-half column">1/2</div>                  <div class="one-half column">1/2</div>                </div>                </div>                <!-- note: columns can nested, it's not recommended since skeleton's grid has %-based gutters, meaning nested grid results in variable gutters (which can end being *really* small on browser/device sizes) -->              </code>          </pre>            <div class="render-syntax">              <div class="container demo">              <!-- columns should immediate child of .row -->              <div class="row">                <div class="one column">one</div>                <div class="eleven columns">eleven</div>              </div>                <!-- use number , class 'column' or 'columns' -->              <div class="row">                <div class="two columns">two</div>                <div class="ten columns">ten</div>              </div>                <!-- there few shorthand columns widths -->              <div class="row">                <div class="one-third column">1/3</div>                <div class="two-thirds column">2/3</div>              </div>              <div class="row">                <div class="one-half column">1/2</div>                <div class="one-half column">1/2</div>              </div>            </div>            </div>

.next following sibling of each element in set of matched elements. if selector provided, retrieves next sibling if matches selector. in case 'code' tag.

this do. wrap div around entire section so:

<div class="parentcontainer">     <pre>            <a href="#" class="btn show-syntax">show below example</a>         <code> ... </code>     </pre>     <div class="render-syntax">         ...     </div> </div>  

and jquery this.

$(document).on("click",".show-syntax",function(e){ $next = $(this).parents(".parentcontainer").find('.render-syntax'); $next.show(); $('html,body').animate({ scrolltop: $next.offset().top},'slow'); e.preventdefault(); }); 

here working fiddle.