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

Question

hi does anyone have any ideas what im doing wrong here?

When you click show content i want it to find the closest div with the class i ask and scroll to it but does not work... im new to jquery so maybe im doing wrong but i think my logic is correct haha

getting an 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");
    // this will search within the 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 to show</p>
</div>

<div class="container">
  <a href="#" class="show-syntax">show content</a>
</div>

<div class="render-syntax">
  <p>content to show</p>
</div>

<div class="container">
  <a href="#" class="show-syntax">show content</a>
</div>

<div class="render-syntax">
  <p>content to show</p>
</div>

Sebastian Simon · Accepted Answer · 2015-08-31T01:05:09.370

0

closest doesn’t go through the siblings; next does the job you need. Simply replacing closest by next in your code will give you the proper behavior.

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

Otherwise ele won’t have any elements, ele.offset() returns null and then there’s no top property of null, hence the error.

edited Aug 31 '15 at 01:05

answered Aug 31 '15 at 00:51

Sebastian Simon

18,263
7
55
75

On someting else, do you know how i could have a button to copy the HTML thats inside the pre > code to clipboard? :) – James Aug 31 '15 at 01:08
@James Not sure which `pre > code` you’re referring to. – Sebastian Simon Aug 31 '15 at 01:11
Oh sorry i have something else, i have example HTML in a documentation page that shows HTML markup inside
```
.......
```
and wondering if its easy to have a button that when clicked will copy the HTML example within that pre code :)
– James Aug 31 '15 at 01:12
@James Does [this question](http://stackoverflow.com/questions/400212/how-do-i-copy-to-the-clipboard-in-javascript) help? – Sebastian Simon Aug 31 '15 at 01:19
I guess i could replicate the HTML inside a textarea and hide it so it can be used to copy.... seems will be quickest and simplest way. Ill have a play. Thanks again mate! – James Aug 31 '15 at 01:20

Sainan · Answer 2 · 2015-08-31T00:57:54.303

The Problem is NOT that ele.offset().top is undefined, it is that ele is undefined.

So I opened JS Fiddle, f***** it until it worked and now I can give you this:

$(document).ready(function () {
    // show examples
    $(document).on("click", ".show-syntax", function (e) {
        var ele = $(this).parent().find(".render-syntax");
        // this will search within the section
        if (ele.css("display") == "none")
         {
    ele.show();
    $("html, body").animate({
      scrollTop: $(ele).offset().top
    }, 100);
    e.preventDefault();
             } else
                  {
                  ele.hide();
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 class="render-syntax">
        <p>content to show</p>
    </div>
</div>
<div class="container"> <a href="#" class="show-syntax">show content</a>

    <div class="render-syntax">
        <p>content to show</p>
    </div>
</div>
<div class="container"> <a href="#" class="show-syntax">show content</a>

    <div class="render-syntax">
        <p>content to show</p>
    </div>
</div>

I'm sorry for the poorly done JS {}'s, but JS Fiddle is just not my editor :D

There’s a `Tidy` button in the stack snippet editor _and_ in JSFiddle. — Sebastian Simon, Aug 31 '15 at 00:55
Does not work in the stackoverflow "Run this code snippet", but on JS Fiddle. Here is the Link: http://jsfiddle.net/8dvsadxo/ — Sainan, Aug 31 '15 at 00:55
Thing is you moved the button inside the container, the container / content is outside of where the button is... — James, Aug 31 '15 at 01:05
I do not see a problem in there, but if it will interfear with your design or whatever you can just use a unique ID to toggle, otherways use @Xufox' solution... — Sainan, Aug 31 '15 at 01:09

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

2 Answers2