Tabs Apple style – very easy!

Create Tabs Apple style with several tabs. The Apple Style Tabs Block is a block that is not really recognizable as ‘tabs’ in the traditional sense. Of course, it is technically just a Tab Block, but the way it is adjusted, it creates an entirely different look. It is made with the normal tab from Kadence Blocks.

To be honest, it’s pretty simple. Just a standard row, one section and a Block tab inside that section. I just added some CSS to hide the subtitles until the tab is opened. The code is visible under the showcase of the Apple style tabs.

Afbeelding op mobiel
Autocomplete LearnDash Lessons and Topics
easily-add-custom-fields-to-the-woocommerce-block-based-checkout

CSS you need- Tabs Apple style

/* hide the tab sub-title */
selector .kt-tab-title-inactive span.kt-title-sub-text {
    max-height: 0;
    margin: 0px !important;
    opacity: 0;
}

The second piece of CSS gives a small effect on Tab Change. It is not necessary for this tab-block layout ‘tabs apple style’.

/* A bit of effect on the tab change */
selector span.kt-title-sub-text {
    transition: all 0.9s cubic-bezier(.4, .63, .57, 1), visibility .3s step-end;
}

Place the CSS in the Advanced section, Custom CSS.

Curious about Kadence blocks? – It’s a TOP Block builder