[MD settings] collapse cookie details in subpage

chrome/browser/resources/settings/site_settings/site_data_details_subpage.html

+<link rel="import" href="chrome://resources/cr_elements/cr_expand_button/cr_expand_button.html">
 <link rel="import" href="chrome://resources/html/polymer.html">
+<link rel="import" href="chrome://resources/polymer/v1_0/iron-collapse/iron-collapse.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-icon-button/paper-icon-button.html">
 <link rel="import" href="/route.html">
 <link rel="import" href="/settings_shared_css.html">
 <link rel="import" href="/site_settings/cookie_tree_behavior.html">
 
 <dom-module id="site-data-details-subpage">
   <template>
     <style include="settings-shared md-select">
       [first] {
         border-top: none;
       }
     </style>
     <template is="dom-repeat" items="[[entries_]]">
       <div class="settings-box" first$="[[!index]]">
         <div class="start">[[getEntryDescription_(item)]]</div>
-        <!-- TODO(dschuyler): expand/collapse details. -->
+        <cr-expand-button expanded="{{item.expanded_}}">
+        </cr-expand-button>
         <paper-icon-button data-id$="[[item.id]]" icon="cr:close"
             on-tap="onRemove_">
         </paper-icon-button>
       </div>
-      <div class="list-frame vertical-list">
+      <iron-collapse class="list-frame vertical-list"
+          opened="[[item.expanded_]]">
         <template is="dom-repeat" items="[[getCookieNodes_(item)]]">
           <div class="list-item two-line">
             <div class="start">
               [[item.label]]
               <div class="secondary">[[item.content]]</div>
             </div>
           </div>
         </template>
-      </div>
+      </iron-collapse>
     </template>
   </template>
   <script src="cookie_info.js"></script>
   <script src="cookie_tree_node.js"></script>
   <script src="site_data_details_subpage.js"></script>
 </dom-module>