How To Create a Panel Tab in the AMP HTML Blog Post

How To Create a Panel Tab in the AMP HTML Blog Post - With the panel tab we can make posts more simple and short when posting has several sections. With the panel tab, visitors are easier to read the posting sections.

And for AMP HTML, we can create panel tabs using amp-selector. With this element we can make the panel tab easier. We can also add the read more function to the content tab panel so that the panel tab display becomes more simple.

Actually there are many ways to create a panel tab, namely by jquery, but of course it can't be used on html. Therefore I will provide a way to create a panel tab with CSS only so that it can be used by blogs and non-amps. And now we will create a special panel tab for blog amp with amp-selector. We will also add a read more function to the content tab panel by using css selector for elements with special identities and css selector for elements outside of other elements.

How To Create a Panel Tab in the AMP HTML Blog Post

To start creating a panel tab with amp-selector on the blog amp, please save the following code above the code </head>.

<script async="async" custom-element="amp-selector" src="https://cdn.ampproject.org/v0/amp-selector-0.1.js"></script>

Then add the following css to your amp-custom blog amp style.

.ampTabContainer{display:flex;flex-wrap:wrap}
amp-selector [option][selected]{outline:0;background:#efefef;border:1px solid #ddd;border-radius:4px 4px 0 0;border-bottom:none}
.tabButton{list-style:none;flex-grow:1;text-align:center;cursor:pointer;padding:10px 0;border:1px solid transparent;margin-bottom:-1px;z-index:1;font-size:16px;font-weight:bold;color:#333;text-transform:uppercase;}
.tabContent{display:none;width:100%;order:1;background:#efefef;border:1px solid #ddd;padding:10px 15px 25px;position:relative;}
.tabButton[selected]+.tabContent{display:block;max-height:unset;overflow:hidden}
#content-more[style="display: none;"]~.tabContent,#content-more[hidden]~.tabContent{max-height:150px;}
.tabContent .more{position:absolute;left:0;bottom:0;width:100%;background:0 0;height:25px;line-height:25px;cursor:pointer}
#content-more[style="display: none;"]~.tabContent .more,#content-more[hidden]~.tabContent .more{background:#fff;}
.tabContent .more:before{content:"Content Less";text-transform:uppercase;font-size:90%;font-weight:bold;display:block;text-align:center;}
#content-more[style="display: none;"]~.tabContent .more:before,#content-more[hidden]~.tabContent .more:before{content:"Read More";}
.tabContent .more:after{content:"";background:#fff;background: -moz-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%);background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%);background:linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%);position:absolute;bottom:100%;left:0;width:100%;height:70px;display:none;}
#content-more[style="display: none;"]~.tabContent .more:after,#content-more[hidden]~.tabContent .more:after{display:block;}
:focus,:active{outline:0;}

Then to display the panel tab in the post, please follow the steps below.

1. Tab Panel without Read More

Please use the following code in the html mode post if you want to like the picture above.

<amp-selector role="tablist" layout="container" class="ampTabContainer">
        <div role="tab" class="tabButton" selected option="a">Tab one</div>
        <div role="tabpanel" class="tabContent">
Content save here ....        </div>
        <div role="tab" class="tabButton" option="b">Tab two</div>
        <div role="tabpanel" class="tabContent">
Content save here ....        </div>
        <div role="tab" class="tabButton" option="c">Tab three</div>
        <div role="tabpanel" class="tabContent">
Content save here ....        </div>
</amp-selector>

2. Tab Panel with Read More

Please use the following code in the html mode post if you want to like the picture above.

<amp-selector role="tablist" layout="container" class="ampTabContainer">
    <div id="content-more" hidden></div>
        <div role="tab" class="tabButton" selected option="a" on="tap:content-more.hide">Tab one</div>
        <div role="tabpanel" class="tabContent">
Content save here ....<div class="more" on="tap:content-more.toggleVisibility" aria-label="More" role="button" tabindex="0"></div>
        </div>
        <div role="tab" class="tabButton" option="b" on="tap:content-more.hide">Tab two</div>
        <div role="tabpanel" class="tabContent">
Content save here ....<div class="more" on="tap:content-more.toggleVisibility" aria-label="More" role="button" tabindex="0"></div>
        </div>
        <div role="tab" class="tabButton" option="c" on="tap:content-more.hide">Tab three</div>
        <div role="tabpanel" class="tabContent">
Content save here ....<div class="more" on="tap:content-more.toggleVisibility" aria-label="More" role="button" tabindex="0"></div>
        </div>
    </amp-selector>

That's the tutorial I can share this time about How To Create a Tab Panel in the AMP HTML Blog Post. Hopefully with this short article, it can be useful and good luck.

Share :