Merge pull request #780 from dod-ccpo/toggle-multiple

Toggle multiple

templates/portfolios/applications/index.html

@@ -35,11 +35,13 @@
 
     <div class='application-list'>
       {% for application in portfolio.applications|sort(attribute='name') %}
-        <div is='toggler' v-cloak class='accordion application-list-item'>
-          <template slot-scope='props'>
+        {% set section_name = "application-{}".format(application.id) %}
+
+        <toggler inline-template>
+          <div class='accordion application-list-item'>
             <header class='accordion__header row'>
               <div class='col col-grow'>
-                <h3 class='icon-link accordion__title' v-on:click="props.toggle">{{ application.name }}</h3>
+                <h3 class='icon-link accordion__title' v-on:click="toggleSection('{{ section_name }}')">{{ application.name }}</h3>
                 <span class='accordion__description'>{{ application.description }}</span>
                 <div class='accordion__actions'>
                   {% if user_can(permissions.VIEW_APPLICATION) %}
@@ -59,17 +61,17 @@
                 </div>
               </div>
               <div class='col'>
-                <span v-on:click="props.toggle" class='icon-link toggle-link'>
-                  <template v-if="props.isVisible">
+                <span class='icon-link toggle-link' v-on:click="toggleSection('{{ section_name }}')">
+                  <span v-if="selectedSection === '{{ section_name }}'">
                     {{ Icon('minus') }}
-                  </template>
-                  <template v-else>
+                  </span>
+                  <span v-else>
                     {{ Icon('plus') }}
-                  </template>
+                  </span>
                 </span>
               </div>
             </header>
-            <ul v-if="props.isVisible">
+            <ul v-show="selectedSection === '{{ section_name }}'">
               {% for environment in application.environments %}
                 <li class='accordion__item application-list-item__environment'>
                   <div class='application-list-item__environment__name'>
@@ -83,8 +85,8 @@
                 </li>
               {% endfor %}
             </ul>
-          </template>
-        </div>
+          </div>
+        </toggler>
       {% endfor %}
     </div>