Toggle for users; unstyled

templates/fragments/applications/environments.html

@@ -11,6 +11,8 @@
     </a>
   </header>
 
+  <div is='toggler' v-cloak>
+    <template slot-scope='props'>
     <table>
       <thead>
         <tr>
@@ -22,11 +24,29 @@
       <tbody>
           {% for environment in application.environments %}
             <tr>
-            <td>{{ environment.name }}</td>
+              <td v-on:click="props.toggle">{{ environment.name }}</td>
+
+              <template v-if="props.isVisible">
+                <span v-on:click="props.toggle" class='icon-link toggle-link'>
+                <td>Hide Members({{ environment.num_users }}){{ Icon('caret_up') }}</td>
+              </template>
+              <template v-else>
+                <span v-on:click="props.toggle" class='icon-link toggle-link'>
                 <td>Show Members({{ environment.num_users }}){{ Icon('caret_down') }}</td>
+              </template>
+
+              <tr v-if="props.isVisible">
+                <td class='accordian__item application-list-item__environment'>
+                  <div class='application-list-item__environment__name'>
+                    <span>User Name here</span>
+                  </div>
+                </td>
+              </tr>
+
             </tr>
           {% endfor %}
       </tbody>
     </table>
-
+    </template>
+  </div>
 </div>