We can bring together some of the things we've learned in this and previous chapters, to build a more complete product page. Depending on the type of product, it's often useful to present product information as a set of tabs. We can use the same approach to building tabs as we use in the last chapter. This time, the tabs will be Description
, and Delivery
.
We won't dive too deep into the code here, since we covered it in the last chapter. All that's really needed is to put the description and delivery content into tab containers, and add the tab selector buttons, as we did last time:
<amp-selector role="tablist" layout="container" class="tab-container"> <div role="tab" class="tab-selector" selected option="1"> Description </div> <div role="tabpanel" class="tab-content"> ... Description content ... </div> <div role="tab" class="tab-selector" option="2"> Delivery </div> <div role="tabpanel" class...