Polymer Iron-Collapse

The <iron-collapse> elements are used to collapse a content. You can use opened or toggle() with <iron-collapse> element to show or hide the content.

The max-height/max-width of the collapsible element is automatically adjusted by the iron-collapse element.

You can use custom properties and mixins for styling <iron-collapse> element.

--iron-collapse-transition-duration: It specifies the duration of animation transition. Its default value is 300ms.

Example

Open command prompt and use the following commands to navigate to your project folder and implement iron-collapse element.

<p><strong>bower install PolymerElements/iron-collapse --save</strong></p>
<img src="https://static.javatpoint.com/polymerjs/images/iron-collapse1.png" alt="iron collapse 1"/>
<p><strong>bower install PolymerElements/paper-toggle-button --save</strong></p>
<img src="https://static.javatpoint.com/polymerjs/images/iron-collapse2.png" alt="iron collapse 2"/>
<p>This command will install both the elements in bower_components folder and then you can import both files in your index page. </p>
<p><strong>For example:</strong></p>
<div class="codeblock"><textarea name="code" class="html">
<link rel = "import" href = "iron-collapse/iron-collapse.html">
<link rel = "import" href = "paper-toggle-button/paper-toggle-button.html">

See this example:

<!DOCTYPE html>
<html>
   <head>
      <title>iron-collapse</title>
      <base href = "http://polygit.org/polymer+:master/components/">
      <link rel = "import" href = "polymer/polymer.html">
      <link rel = "import" href = "paper-toggle-button/paper-toggle-button.html">
      <link rel = "import" href = "iron-collapse/iron-collapse.html">

      <style>
         #coll {
            display: flex;
            width: 500px;
         }
         demo-collapse{
            border: 2px solid LightGrey;
            width: 50%;
         }
      </style>
   </head>

   <body>
      <h3>Iron Collapse Example</h3>
      <dom-module id = "demo-collapse">
         <template>
            <paper-toggle-button checked = "{{opened}}">Collapse this</paper-toggle-button>
            <iron-collapse opened = "[[opened]]">
               <div><p>This is polymerjs iron-collapse.</p></div>
            </iron-collapse>
         </template>
      </dom-module>

      <script>
         Polymer ({
            is: 'demo-collapse',
         });
      </script>

      <div id = "coll">
         <demo-collapse></demo-collapse>
      </div>
   </body>
</html>

Output: