Question

The page I’m referencing is here:

http://jjnursingnotes.com/NOV12/

JQuery page is located here:

http://jjnursingnotes.com/NOV12/jquery.expander.js

After you click “Read More,” what I would like to happen is for the page to jump to the heading ( <h1> ) or the beginning of the div layer ( <div class=”expander” id=”sect##”> ) at the beginning of the section once you click “Read Less.” Currently, the code for the “Read Less” button appears as follows:

      if ( o.userCollapse && !$this.find(o.lessSelector).length ) {
        $this
        .find(detailSelector)
        .append('<br><br><span class="' + o.lessClass + '">' + o.userCollapsePrefix + '<a href="#">' + o.userCollapseText + '</a></span><br><br>');
      }

My headings all have names assigned directly before (001, 002, etc.), and my guess would be to simply add #001, #002 etc. to the link in the JQ code. Problem is that this script defines every “Read Less” button on the page, so that variable would need to be different for each button. Am I on the right track, or is there a more efficient way to do this?

Thank you in advance. I am clearly a novice in all things JS and JQuery!

Answer 1

$('.expander .read-more').click(function(e){
 $('html,body').animate({ scrollTop: $(e.target).closest('.expander').offset().top}, "slow");
})

there you go 🙂