I want to display the contents only when I click the tabs, to do that what should I do?-CodePudding

I have some tabs in my template, when I load the website I see the content of the first tab, I want to display the contents only when I click the tabs, to do that what should I do?

<mat-tab-group mat-align-tabs="start">
  <mat-tab label="First">Content 1</mat-tab>
  <mat-tab label="Second">Content 2</mat-tab>
  <mat-tab label="Third">Content 3</mat-tab>
</mat-tab-group>

CodePudding user response：

Looking at your profile you ask a lot of similar questions. Please take time to go over some official docs and actually try before asking. Secondly if someone has provided you with an acceptable answer, it wouldn't hurt to mark it accepted. Otherwise you may be wasting other people's time offering answers when actually you've already made up your mind.

Regardless... What you're asking is the default behaviour of tabs. Content of the tab is shown when clicked on the tab. What you want is to not automatically select first tab (perhaps?). That feature is not provided out-of-the-box. Design of the Material tabs is meant so that at least one tab is always selected.

Here are some ideas for a workaround though https://stackoverflow.com/a/53818913/15439733 or use conditional statemanets using *ngIf to either render contents or not.

CodePudding user response：

I think, the best way to do this is hide first tab by SCSS and remove content from this tab.

For example, you can hide first element by something like this (you should specify selector)

// styles.scss - your global files
.mat-tab-label:first-of-type {
  display: none;
}

Please check this DEMO STACKBLITZ

CodePudding user response：

Try this working in Ruby on Rails. See this image

    <ul >
    <%- idx = 0 -%>
    <li >
      <a href="#" data-toggle="tab" data-target="#response" data-slide-to="<%= idx -%>">
       Content 1
      </a>
    </li>
    <%-
      active_tab ||= 0
      idx  = 1
    -%>

    <li >
      <a href="#" data-toggle="tab" data-target="#response" data-slide-to="<%= idx -%>">
        Content 2
      </a>
    </li>
    <%-
      active_tab ||= 1
      idx  = 1
    -%>

    <li >
      <a href="#" data-toggle="tab" data-target="#response" data-slide-to="<%= idx -%>">
        Content 3
      </a>
    </li>
    <%- active_tab ||= 2 -%>
    </ul>

    <div id="response"  data-interval="false">
    <div >
      <div >
        <p>
         Hello Content 1
        </p>
      </div>

     <div >
        <p>
          Hello Content 2
        </p>
      </div>

      <div >
        <p>
          Hello Content 3
        </p>
      </div>
    </div>
    </div>