Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script async src="https://cdn.ampproject.org/v0.js"></script>
    <script async custom-element="amp-selector" src="https://cdn.ampproject.org/v0/amp-selector-0.1.js"></script>
    <style amp-custom>
        .ampTabContainer {
            display: flex;
            flex-wrap: wrap;
        }
​
        .tabButton[selected] {
            outline: none;
            background: #ccc;
        }
​
        .tabButton {
            list-style: none;
            flex-grow: 1;
            text-align: center;
            cursor: pointer;
        }
​
        .tabContent {
            display: none;
            width: 100%;
            order: 1; /* must be greater than the order of the tab buttons to flex to the next line */
            border: 1px solid #ccc;
        }
​
        .tabButton[selected]+.tabContent {
            display: block;
        }
​
        /* For example below (not required) */
        .itemCustom {
            border: 1px solid #000;
            height: 280px;
            width: 380px;
            margin: 10px;
            text-align: center;
            padding-top: 140px;
        }
        amp-selector {
            padding: 1rem;
            margin: 1rem;
        }
    </style>
</head>
<body>
​
<amp-selector role="tablist"
              layout="container1"
              class="ampTabContainer">
    <div role="tab"
         class="tabButton"
         selected
         option="a">Tab one</div>
    <div role="tabpanel"
         class="tabContent">
        
      <div>one div
      
      <amp-selector role="tablist"
  layout="container"
  class="ampTabContainer">
  <div role="tab"
    class="tabButton"
    option="a">inside Tab one</div>
  <div role="tabpanel"
    class="tabContent">Tab one content... </div>
  <div role="tab"
    class="tabButton"
    option="b">Tab two</div>
  <div role="tabpanel"
    class="tabContent">Tab two content... </div>
  
</amp-selector>
      
      </div>
  
    </div>
    <div role="tab"
         class="tabButton"
         option="b">Tab two</div>
    <div role="tabpanel"
         class="tabContent">Tab two content... </div>
​
</amp-selector>
​
</body>
</html>
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers