文章按钮和菜单上的readmore.js

Question

I have a page which has several short articles and a sidenav which scrolls down to an article based on it's id. The articles have been truncated using readmore.js, so they all have a 'Read More' button.

The sidenav link scrolls down to the truncated version. I would like it to go straight to the full length of the article, but since they are all on the same page I'm not sure how to go on about it.

My code looks like this:

<!--sidenav-->

<ul class="sidenav-list navtree-list" id="navtree-0">
  <li >
    <a href="#article1" class="sidenav-item">
      <h2><?php echo $page->header1() ?></h2>
    </a>
  </li>
  <li >
    <a href="#article2" class="sidenav-item">
      <h2><?php echo $page->header2() ?></h2>
    </a>
</li>

<!--articles-->
<div class="container-fluid content-desktop">

<h3 id="article1"><?php echo $page->header1() ?></h3>
  <article data-readmore>
    <?php echo $page->description1()->kirbytext()?> 
  </article>

<h3 id="article2"><?php echo $page->header2() ?></h3>
  <article data-readmore>
    <?php echo $page->description2()->kirbytext()?>
  </article>

Any suggestions will be really appreciated!

Answer 1

Now this could normally be solved by using .readmore('toggle') , something like this

$(document).ready(function() {
  $('.sidenav-item').click(function() {
      $($(this).attr('href')).next().readmore('toggle');
  })
});

This will find the header with the matching id, take the .next() element which should be the <article> , and expand it with .readmore('toggle') once you click the navigation.

However , there is currently a bug in readmore.js preventing this.

If you are comfortable with editing readmore.js yourself, then you can change these sections and replace _this with this to make it work. It's row 227 and 231 in the non-minimized version of readmore.js.

if (! trigger) {
  trigger = $('[aria-controls="' + _this.element.id + '"]')[0];
}

if (! element) {
  element = _this.element;
}