Materialize - Collapsible with a huge content does not scroll to top of the tab

Question

I use the collapsible component provide by materialize framework. I get one bug and have no idea how to solve it or find a workaround. If the content of one tab is too huge, when I open the tab it does not scroll to the top of the tab itself (it goes to the middle).

You can try it here : https://jsfiddle.net/r8314ouq/. Open the first tab then open the third tab you'll see that it doesn't scroll to the beggining of the tab.

I see But I would like to see It's very annoying because the user has to scroll to see all the content.

I followed the documentation to create my collapsible :

<ul class="collapsible" data-collapsible="accordion">
    <li>
      <div class="collapsible-header"><i class="material-icons">filter_drama</i>First</div>
      <div class="collapsible-body"><p>Lorem ipsum dolor sit amet.</p></div>
    </li>
    <li>
      <div class="collapsible-header"><i class="material-icons">place</i>Second</div>
      <div class="collapsible-body"><p>Lorem ipsum dolor sit amet.</p></div>
    </li>
    <li>
      <div class="collapsible-header"><i class="material-icons">whatshot</i>Third</div>
      <div class="collapsible-body"><p>Lorem ipsum dolor sit amet.</p></div>
    </li>
  </ul>

I tried to catch the event and do a scroll to but it didn't work. Any ideas?

Answer 1

So in terms of use-ability, due to the way the accordion effect works there is some delay, but here is a way of making this work.

$('.collapsible').collapsible({
  accordion : false // A setting that changes the collapsible behavior to expandable instead of the default accordion style
});

$('.collapsible .collapsible-header').on('click', function(event) {
    var target = $(this);
    setTimeout(function() {
      if( target.length ) {
        event.preventDefault();
        $('html, body').animate({
            scrollTop: target.offset().top
        }, 500);
      }
    }, 300);
});

Here is your JSFiddle modified to work

The 500 is a half-a-second animation of scroll effect, meanwhile the 300 is around a 0.3 second delay to allow the accordion to collapse, otherwise it scrolls to the headers location at the point of the event firing (click) which is about half-way through the text (when opening a header below an already open accordion section).

Answer 2

In addition to @JokerDan's answer, this will only scroll to corresponding .collapsible-header when it's not:

• the first li element,
• .collapsible-body has lower height than desired height

_

$('.collapsible').collapsible({
  accordion : false 
}).on('click.collapse', 'li > .collapsible-header', function(e) {
    var $this = $(e.currentTarget), //or $(this)
        $body = $this.siblings('.collapsible-body'),
        $parent = $this.parent(),
        //Change this to your desired max height
        //of one .collabsible-body
        maxHeight = 700 

    //Wait for slide animation to complete
    //which is 350ms
    setTimeout(function(){
      if ($parent.is(':first-child')) return

      if ($body.height() > maxHeight)
          $('html, body').animate({
              scrollTop: $this.offset().top
          }, 500)
    }, 350)
});

Here's the fiddle. (full view)

$('.collapsible').collapsible({
  accordion : false 
}).on('click.collapse', 'li > .collapsible-header', function(e) {
    var $this = $(e.currentTarget), //or $(this)
        $body = $this.siblings('.collapsible-body'),
        $parent = $this.parent(),
        //Change this to your desired max height
        //of one .collabsible-body
        maxHeight = 700 

    //Wait for slide animation to complete
    //which is 350ms
    setTimeout(function(){
      if ($parent.is(':first-child')) return
      
      if ($body.height() > maxHeight)
          $('html, body').animate({
              scrollTop: $this.offset().top
          }, 500)
    }, 350)
});

body {

}

@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: local('Material Icons'), local('MaterialIcons-Regular'), url(https://fonts.gstatic.com/s/materialicons/v11/2fcrYFNaTjcS6g4U3t-Y5UEw0lE80llgEseQY3FEmqw.woff2) format('woff2');
}

.material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/css/materialize.min.css" rel="stylesheet"/>

<ul class="collapsible" data-collapsible="accordion">
    <li>
      <div class="collapsible-header"><i class="material-icons">filter_drama</i>First</div>
      <div class="collapsible-body"><p>Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam vulputate ante turpis, eget accumsan tellus iaculis sed. Suspendisse in vehicula arcu. Nullam eget dui vehicula, molestie mi sed, scelerisque dui. Vestibulum non augue porttitor, condimentum arcu quis, interdum nulla. Proin sollicitudin arcu non gravida cursus. Nullam tincidunt ipsum vel elit faucibus faucibus. In varius erat sit amet felis porta lobortis et sit amet nisi. Duis vestibulum, arcu vel aliquet suscipit, lorem tellus rutrum ligula, a sollicitudin lorem erat a augue. Maecenas ornare, dui id tincidunt imperdiet, erat ligula pulvinar metus, eu rutrum leo felis nec justo. Proin sed pellentesque orci, nec congue est. Curabitur sed egestas nulla.

Donec eget tempor nibh. Ut ligula sem, vehicula vitae fermentum et, viverra ac libero. Curabitur rutrum elit neque. Integer semper eleifend auctor. Sed interdum tincidunt nisl, et fringilla nunc convallis quis. Duis in laoreet arcu. Duis interdum consequat interdum. Nunc tempus est ac vehicula cursus. Sed convallis nisl a diam iaculis, non feugiat lorem vestibulum. In eu nibh feugiat, mattis quam dignissim, finibus tortor.

Nam quis quam sed ante consectetur sagittis non nec felis. Aenean eget neque sed orci fermentum consequat. Donec vestibulum mi a luctus vulputate. Donec sollicitudin, enim eu dignissim pulvinar, purus massa lacinia felis, et vulputate arcu enim pharetra libero. Integer tempor metus vitae dapibus dapibus. Phasellus id pharetra orci, sed gravida ligula. Curabitur at velit vel nibh fringilla posuere. Aenean sit amet quam sed ex tempus rhoncus quis a justo. In hac habitasse platea dictumst. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.

Etiam dui risus, pharetra quis mi finibus, posuere mattis nisi. Quisque varius ex ante, vitae euismod nunc ultricies nec. Mauris et lobortis metus, ut fermentum tellus. Integer finibus commodo dui ac condimentum. Integer dapibus sollicitudin tristique. Cras quis tincidunt odio. Morbi commodo mauris lorem, ut ullamcorper neque eleifend ut. Aenean non mauris eu nibh efficitur posuere. Sed non faucibus dui. Suspendisse blandit porttitor ligula at placerat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer iaculis at sem non ullamcorper. Sed vel felis placerat enim fermentum suscipit. Aenean ut lacus rutrum, tincidunt sapien commodo, congue ligula. Ut consequat nibh quis nibh posuere, ut rutrum odio posuere. Nunc ultricies ipsum vel nulla interdum, ut faucibus felis feugiat.

Sed at enim at dolor aliquam commodo. Ut dapibus sollicitudin varius. Aliquam eu lorem arcu. Etiam ac felis non magna sagittis gravida non et eros. Sed vitae finibus lectus. In tristique id nisl nec efficitur. Donec tincidunt, mauris sed hendrerit varius, leo nisl ultrices velit, quis dapibus leo libero commodo elit.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam vulputate ante turpis, eget accumsan tellus iaculis sed. Suspendisse in vehicula arcu. Nullam eget dui vehicula, molestie mi sed, scelerisque dui. Vestibulum non augue porttitor, condimentum arcu quis, interdum nulla. Proin sollicitudin arcu non gravida cursus. Nullam tincidunt ipsum vel elit faucibus faucibus. In varius erat sit amet felis porta lobortis et sit amet nisi. Duis vestibulum, arcu vel aliquet suscipit, lorem tellus rutrum ligula, a sollicitudin lorem erat a augue. Maecenas ornare, dui id tincidunt imperdiet, erat ligula pulvinar metus, eu rutrum leo felis nec justo. Proin sed pellentesque orci, nec congue est. Curabitur sed egestas nulla.

Donec eget tempor nibh. Ut ligula sem, vehicula vitae fermentum et, viverra ac libero. Curabitur rutrum elit neque. Integer semper eleifend auctor. Sed interdum tincidunt nisl, et fringilla nunc convallis quis. Duis in laoreet arcu. Duis interdum consequat interdum. Nunc tempus est ac vehicula cursus. Sed convallis nisl a diam iaculis, non feugiat lorem vestibulum. In eu nibh feugiat, mattis quam dignissim, finibus tortor.

Nam quis quam sed ante consectetur sagittis non nec felis. Aenean eget neque sed orci fermentum consequat. Donec vestibulum mi a luctus vulputate. Donec sollicitudin, enim eu dignissim pulvinar, purus massa lacinia felis, et vulputate arcu enim pharetra libero. Integer tempor metus vitae dapibus dapibus. Phasellus id pharetra orci, sed gravida ligula. Curabitur at velit vel nibh fringilla posuere. Aenean sit amet quam sed ex tempus rhoncus quis a justo. In hac habitasse platea dictumst. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.

Etiam dui risus, pharetra quis mi finibus, posuere mattis nisi. Quisque varius ex ante, vitae euismod nunc ultricies nec. Mauris et lobortis metus, ut fermentum tellus. Integer finibus commodo dui ac condimentum. Integer dapibus sollicitudin tristique. Cras quis tincidunt odio. Morbi commodo mauris lorem, ut ullamcorper neque eleifend ut. Aenean non mauris eu nibh efficitur posuere. Sed non faucibus dui. Suspendisse blandit porttitor ligula at placerat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer iaculis at sem non ullamcorper. Sed vel felis placerat enim fermentum suscipit. Aenean ut lacus rutrum, tincidunt sapien commodo, congue ligula. Ut consequat nibh quis nibh posuere, ut rutrum odio posuere. Nunc ultricies ipsum vel nulla interdum, ut faucibus felis feugiat.

Sed at enim at dolor aliquam commodo. Ut dapibus sollicitudin varius. Aliquam eu lorem arcu. Etiam ac felis non magna sagittis gravida non et eros. Sed vitae finibus lectus. In tristique id nisl nec efficitur. Donec tincidunt, mauris sed hendrerit varius, leo nisl ultrices velit, quis dapibus leo libero commodo elit.</p></div>
    </li>
    <li>
      <div class="collapsible-header"><i class="material-icons">place</i>Second</div>
      <div class="collapsible-body"><p>
Sed at enim at dolor aliquam commodo. Ut dapibus sollicitudin varius. Aliquam eu lorem arcu. Etiam ac felis non magna sagittis gravida non et eros. Sed vitae finibus lectus. In tristique id nisl nec efficitur. Donec tincidunt, mauris sed hendrerit varius, leo nisl ultrices velit, quis dapibus leo libero commodo elit.t.</p></div>
    </li>
    <li>
      <div class="collapsible-header"><i class="material-icons">whatshot</i>Third</div>
      <div class="collapsible-body"><p>Lorem ipsum dolor sitLorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam vulputate ante turpis, eget accumsan Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam vulputate ante turpis, eget accumsan tellus iaculis sed. Suspendisse in vehicula arcu. Nullam eget dui vehicula, molestie mi sed, scelerisque dui. Vestibulum non augue porttitor, condimentum arcu quis, interdum nulla. Proin sollicitudin arcu non gravida cursus. Nullam tincidunt ipsum vel elit faucibus faucibus. In varius erat sit amet felis porta lobortis et sit amet nisi. Duis vestibulum, arcu vel aliquet suscipit, lorem tellus rutrum ligula, a sollicitudin lorem erat a augue. Maecenas ornare, dui id tincidunt imperdiet, erat ligula pulvinar metus, eu rutrum leo felis nec justo. Proin sed pellentesque orci, nec congue est. Curabitur sed egestas nulla.

Donec eget tempor nibh. Ut ligula sem, vehicula vitae fermentum et, viverra ac libero. Curabitur rutrum elit neque. Integer semper eleifend auctor. Sed interdum tincidunt nisl, et fringilla nunc convallis quis. Duis in laoreet arcu. Duis interdum consequat interdum. Nunc tempus est ac vehicula cursus. Sed convallis nisl a diam iaculis, non feugiat lorem vestibulum. In eu nibh feugiat, mattis quam dignissim, finibus tortor.

Nam quis quam sed ante consectetur sagittis non nec felis. Aenean eget neque sed orci fermentum consequat. Donec vestibulum mi a luctus vulputate. Donec sollicitudin, enim eu dignissim pulvinar, purus massa lacinia felis, et vulputate arcu enim pharetra libero. Integer tempor metus vitae dapibus dapibus. Phasellus id pharetra orci, sed gravida ligula. Curabitur at velit vel nibh fringilla posuere. Aenean sit amet quam sed ex tempus rhoncus quis a justo. In hac habitasse platea dictumst. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.

Etiam dui risus, pharetra quis mi finibus, posuere mattis nisi. Quisque varius ex ante, vitae euismod nunc ultricies nec. Mauris et lobortis metus, ut fermentum tellus. Integer finibus commodo dui ac condimentum. Integer dapibus sollicitudin tristique. Cras quis tincidunt odio. Morbi commodo mauris lorem, ut ullamcorper neque eleifend ut. Aenean non mauris eu nibh efficitur posuere. Sed non faucibus dui. Suspendisse blandit porttitor ligula at placerat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer iaculis at sem non ullamcorper. Sed vel felis placerat enim fermentum suscipit. Aenean ut lacus rutrum, tincidunt sapien commodo, congue ligula. Ut consequat nibh quis nibh posuere, ut rutrum odio posuere. Nunc ultricies ipsum vel nulla interdum, ut faucibus felis feugiat.

Sed at enim at dolor aliquam commodo. Ut dapibus sollicitudin varius. Aliquam eu lorem arcu. Etiam ac felis non magna sagittis gravida non et eros. Sed vitae finibus lectus. In tristique id nisl nec efficitur. Donec tincidunt, mauris sed hendrerit varius, leo nisl ultrices velit, quis dapibus leo libero commodo elit.tellus iaculis sed. Suspendisse in vehicula arcu. Nullam eget dui vehicula, molestie mi sed, scelerisque dui. Vestibulum non augue porttitor, condimentum arcu quis, interdum nulla. Proin sollicitudin arcu non gravida cursus. Nullam tincidunt ipsum vel elit faucibus faucibus. In varius erat sit amet felis porta lobortis et sit amet nisi. Duis vestibulum, arcu vel aliquet suscipit, lorem tellus rutrum ligula, a sollicitudin lorem erat a augue. Maecenas ornare, dui id tincidunt imperdiet, erat ligula pulvinar metus, eu rutrum leo felis nec justo. Proin sed pellentesque orci, nec congue est. Curabitur sed egestas nulla.

Donec eget tempor nibh. Ut ligula sem, vehicula vitae fermentum et, viverra ac libero. Curabitur rutrum elit neque. Integer semper eleifend auctor. Sed interdum tincidunt nisl, et fringilla nunc convallis quis. Duis in laoreet arcu. Duis interdum consequat interdum. Nunc tempus est ac vehicula cursus. Sed convallis nisl a diam iaculis, non feugiat lorem vestibulum. In eu nibh feugiat, mattis quam dignissim, finibus tortor.

Nam quis quam sed ante consectetur sagittis non nec felis. Aenean eget neque sed orci fermentum consequat. Donec vestibulum mi a luctus vulputate. Donec sollicitudin, enim eu dignissim pulvinar, purus massa lacinia felis, et vulputate arcu enim pharetra libero. Integer tempor metus vitae dapibus dapibus. Phasellus id pharetra orci, sed gravida ligula. Curabitur at velit vel nibh fringilla posuere. Aenean sit amet quam sed ex tempus rhoncus quis a justo. In hac habitasse platea dictumst. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.

Etiam dui risus, pharetra quis mi finibus, posuere mattis nisi. Quisque varius ex ante, vitae euismod nunc ultricies nec. Mauris et lobortis metus, ut fermentum tellus. Integer finibus commodo dui ac condimentum. Integer dapibus sollicitudin tristique. Cras quis tincidunt odio. Morbi commodo mauris lorem, ut ullamcorper neque eleifend ut. Aenean non mauris eu nibh efficitur posuere. Sed non faucibus dui. Suspendisse blandit porttitor ligula at placerat. Lorem ipsum dolor sit amet, conLorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam vulputate ante turpis, eget accumsan tellus iaculis sed. Suspendisse in vehicula arcu. Nullam eget dui vehicula, molestie mi sed, scelerisque dui. Vestibulum non augue porttitor, condimentum arcu quis, interdum nulla. Proin sollicitudin arcu non gravida cursus. Nullam tincidunt ipsum vel elit faucibus faucibus. In varius erat sit amet felis porta lobortis et sit amet nisi. Duis vestibulum, arcu vel aliquet suscipit, lorem tellus rutrum ligula, a sollicitudin lorem erat a augue. Maecenas ornare, dui id tincidunt imperdiet, erat ligula pulvinar metus, eu rutrum leo felis nec justo. Proin sed pellentesque orci, nec congue est. Curabitur sed egestas nulla.

Donec eget tempor nibh. Ut ligula sem, vehicula vitae fermentum et, viverra ac libero. Curabitur rutrum elit neque. Integer semper eleifend auctor. Sed interdum tincidunt nisl, et fringilla nunc convallis quis. Duis in laoreet arcu. Duis interdum consequat interdum. Nunc tempus est ac vehicula cursus. Sed convallis nisl a diam iaculis, non feugiat lorem vestibulum. In eu nibh feugiat, mattis quam dignissim, finibus tortor.

Nam quis quam sed ante consectetur sagittis non nec felis. Aenean eget neque sed orci fermentum consequat. Donec vestibulum mi a luctus vulputate. Donec sollicitudin, enim eu dignissim pulvinar, purus massa lacinia felis, et vulputate arcu enim pharetra libero. Integer tempor metus vitae dapibus dapibus. Phasellus id pharetra orci, sed gravida ligula. Curabitur at velit vel nibh fringilla posuere. Aenean sit amet quam sed ex tempus rhoncus quis a justo. In hac habitasse platea dictumst. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.

Etiam dui risus, pharetra quis mi finibus, posuere mattis nisi. Quisque varius ex ante, vitae euismod nunc ultricies nec. Mauris et lobortis metus, ut fermentum tellus. Integer finibus commodo dui ac condimentum. Integer dapibus sollicitudin tristique. Cras quis tincidunt odio. Morbi commodo mauris lorem, ut ullamcorper neque eleifend ut. Aenean non mauris eu nibh efficitur posuere. Sed non faucibus dui. Suspendisse blandit porttitor ligula at placerat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer iaculis at sem non ullamcorper. Sed vel felis placerat enim fermentum suscipit. Aenean ut lacus rutrum, tincidunt sapien commodo, congue ligula. Ut consequat nibh quis nibh posuere, ut rutrum odio posuere. Nunc ultricies ipsum vel nulla interdum, ut faucibus felis feugiat.

Sed at enim at dolor aliquam commodo. Ut dapibus sollicitudin varius. Aliquam eu lorem arcu. Etiam ac felis non magna sagittis gravida non et eros. Sed vitae finibus lectus. In tristique id nisl nec efficitur. Donec tincidunt, mauris sed hendrerit varius, leo nisl ultrices velit, quis dapibus leo libero commodo elit.sectetur adipiscing elit. Integer iaculis at sem non ullamcorper. Sed vel felis placerat enim fermentum suscipit. Aenean ut lacus rutrum, tincidunt sapien commodo, congue ligula. Ut consequat nibh quis nibh posuere, ut rutrum odio posuere. Nunc ultricies ipsum vel nulla interdum, ut faucibus felis feugiat.

Sed at enim at dolor aliquam commodo. Ut dapibus sollicitudin varius. Aliquam eu lorem arcu. Etiam ac felis non magna sagittis gravida non et eros. Sed vitae finibus lectus. In tristique id nisl nec efficitur. Donec tincidunt, mauris sed hendrerit varius, leo nisl ultrices velit, quis dapibus leo libero commodo elit. amet.</p></div>
    </li>
  </ul>


<script src="https://code.jquery.com/jquery-2.2.3.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/js/materialize.min.js"></script>

References

• materialize.js#L377 (slideDown duration)
• materialize.js#L411 (click event selector)