How do I use MDL Tabs to link to places within page without hiding other content

I am using the Material Design Light "Text Heavy" template page as a basis for a page I am creating. I would like to use the tabs up the top to link to places within the page without hiding other content: ie scroll down to a card, without hiding card above and below.

How can this be accomplished?

Solution

Using tabs as navigation isn't supported in v1.0.x, sadly. It's been added in master, though, so it'll be coming in v1.1!

For now, your best bet is to override styling for panels. So just code up everything as normal, as if you wanted your panels to be hidden, and then override their styles:

/* Use an extra class to make sure you only target the
   ones you want. I used 'my-panel' in this example. */
.my-panel.mdl-layout__tab-panel {
  display: block !important;
}

That should override the mdl-layout__tab-panel's default behaviour, which is to hide.

If this doesn't work, just share a codepen and I should be able to help further!