| <html> |
| <head> |
| <title>details-sk and summary-sk demo</title> |
| <meta charset="utf-8"> |
| <meta http-equiv="X-UA-Compatible" content="IE=edge"> |
| <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes"> |
| <script src="/res/common/js/common.js"></script> |
| <script src="/res/imp/bower_components/webcomponentsjs/webcomponents-lite.js"></script> |
| <link rel="stylesheet" href="/res/common/css/md.css"> |
| <link rel="import" href="/res/imp/bower_components/polymer/polymer.html"> |
| <link rel="import" href="details-summary.html"> |
| <style type="text/css" media="screen"> |
| body { |
| font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; |
| } |
| |
| summary-sk { |
| font-weight: bold; |
| } |
| |
| #stuff { |
| border: solid 1px lightgray; |
| padding: 1em; |
| margin: 1em; |
| } |
| |
| details-sk { |
| display: block; |
| } |
| </style> |
| </head> |
| <body> |
| <h1>Details/Summary Demo</h1> |
| |
| <h2>Default</h2> |
| <details-sk> |
| <summary-sk>This is a summary. </summary-sk> |
| <div id=stuff> |
| These are the details. |
| </div> |
| <div id=stuff> |
| These are more details. |
| </div> |
| </details-sk> |
| |
| <h2>Open at start</h2> |
| <details-sk open> |
| <summary-sk>This is a summary. </summary-sk> |
| <div id=stuff> |
| This should be open by default. |
| </div> |
| </details-sk> |
| |
| <h2>Toggle using open attribute</h2> |
| <details-sk id=bybutton> |
| <summary-sk>This is a summary. </summary-sk> |
| <div id=stuff> |
| This should be open by default. |
| </div> |
| </details-sk> |
| <div> |
| <button id=open>Open</button> |
| <button id=close>Close</button> |
| </div> |
| <script type="text/javascript" charset="utf-8"> |
| $$$('#open').addEventListener('click', function(){ |
| $$$('#bybutton').open = true; |
| }); |
| $$$('#close').addEventListener('click', function(){ |
| $$$('#bybutton').open = false; |
| }); |
| </script> |
| </body> |
| </html> |
