fix phases to drop down

docs/.vuepress/components/IterativeCycle.vue

@@ -10,21 +10,21 @@
       </select>
     </div>
 
-    <!-- Phases Display -->
+    <!-- Cycles Display -->
     <div v-if="selectedModule !== null" class="cycle">
       <h2>{{ modules[selectedModule].title }}</h2>
-      <div v-if="modules[selectedModule].phases" class="phase-selector">
-        <label for="phase">Select Phase:</label>
-        <select id="phase" v-model="selectedPhase" class="phase-dropdown">
-          <option v-for="(phase, index) in modules[selectedModule].phases" :key="index" :value="index">
-            {{ phase.title }}
-          </option>
-        </select>
-      </div>
-
-      <div v-if="selectedPhase !== null" class="phase">
-        <h3>{{ modules[selectedModule].phases[selectedPhase].title }}</h3>
-        <p>{{ modules[selectedModule].phases[selectedPhase].description }}</p>
+      <div v-for="(cycle, index) in modules[selectedModule].cycles" :key="index" class="cycle-container">
+        <button @click="toggleCycle(index)" class="cycle-button">
+          {{ cycle.title }}
+        </button>
+        <div v-if="isCycleOpen(index)" class="cycle-details">
+          <h3>Phases:</h3>
+          <ul>
+            <li v-for="(phase, phaseIndex) in cycle.phases" :key="phaseIndex">
+              <strong>{{ phase.title }}:</strong> {{ phase.description }}
+            </li>
+          </ul>
+        </div>
       </div>
     </div>
   </div>
@@ -35,50 +35,87 @@ export default {
   data() {
     return {
       selectedModule: 0, // Default module selected
-      selectedPhase: 0, // Default phase selected
+      openCycles: [], // Track which cycles are open
       modules: [
         {
           title: 'Module 1: DBTL Cycles',
-          phases: [
-            { title: 'Design Cycle 1', description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.' },
-            { title: 'Build Cycle 1', description: 'Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.' },
-            { title: 'Test Cycle 1', description: 'Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.' },
-            { title: 'Learn Cycle 1', description: 'Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore.' },
-            { title: 'Design Cycle 2', description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.' },
-            { title: 'Build Cycle 2', description: 'Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.' },
-            { title: 'Test Cycle 2', description: 'Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.' },
-            { title: 'Learn Cycle 2', description: 'Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore.' },
-            { title: 'Design Cycle 3', description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.' },
-            { title: 'Build Cycle 3', description: 'Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.' },
-            { title: 'Test Cycle 3', description: 'Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.' },
-            { title: 'Learn Cycle 3', description: 'Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore.' },
+          cycles: [
+            {
+              title: 'Cycle 1',
+              phases: [
+                { title: 'Design', description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.' },
+                { title: 'Build', description: 'Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.' },
+                { title: 'Test', description: 'Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.' },
+                { title: 'Learn', description: 'Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore.' },
+              ]
+            },
+            {
+              title: 'Cycle 2',
+              phases: [
+                { title: 'Design', description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.' },
+                { title: 'Build', description: 'Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.' },
+                { title: 'Test', description: 'Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.' },
+                { title: 'Learn', description: 'Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore.' },
+              ]
+            },
+            {
+              title: 'Cycle 3',
+              phases: [
+                { title: 'Design', description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.' },
+                { title: 'Build', description: 'Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.' },
+                { title: 'Test', description: 'Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.' },
+                { title: 'Learn', description: 'Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore.' },
+              ]
+            }
           ]
         },
         {
           title: 'Module 2: Design & Build',
-          phases: [
-            { title: 'Design', description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.' },
-            { title: 'Build', description: 'Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.' }
+          cycles: [
+            {
+              title: 'Cycle 1',
+              phases: [
+                { title: 'Design', description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.' },
+                { title: 'Build', description: 'Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.' }
+              ]
+            }
           ]
         },
         {
           title: 'Module 3: Design Only',
-          phases: [
-            { title: 'Design', description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.' }
+          cycles: [
+            {
+              title: 'Cycle 1',
+              phases: [
+                { title: 'Design', description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.' }
+              ]
+            }
           ]
         },
         {
           title: 'Module 4: Design Only',
-          phases: [
-            { title: 'Design', description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.' }
+          cycles: [
+            {
+              title: 'Cycle 1',
+              phases: [
+                { title: 'Design', description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.' }
+              ]
+            }
           ]
         }
       ]
     };
   },
-  watch: {
-    selectedModule() {
-      this.selectedPhase = 0; // Reset phase selection when module changes
+  methods: {
+    toggleCycle(index) {
+      if (this.openCycles.includes(index)) {
+        this.openCycles = this.openCycles.filter(i => i !== index);
+      } else {
+        this.openCycles.push(index);
+      }
+    },
+    isCycleOpen(index) {
+      return this.openCycles.includes(index);
     }
   }
 };
@@ -101,8 +138,7 @@ export default {
   text-align: center;
 }
 
-.module-dropdown,
-.phase-dropdown {
+.module-dropdown {
   padding: 10px;
   font-size: 16px;
   border: 1px solid #3498db;
@@ -111,8 +147,7 @@ export default {
   transition: border-color 0.3s ease;
 }
 
-.module-dropdown:focus,
-.phase-dropdown:focus {
+.module-dropdown:focus {
   border-color: #2980b9;
 }
 
@@ -120,13 +155,29 @@ export default {
   margin-top: 20px;
 }
 
-.phase-selector {
-  margin-bottom: 20px;
+.cycle-container {
+  margin: 10px 0;
 }
 
-.phase {
-  margin-top: 20px;
-  padding: 15px;
+.cycle-button {
+  width: 100%;
+  padding: 10px;
+  font-size: 16px;
+  background-color: #3498db;
+  color: white;
+  border: none;
+  border-radius: 5px;
+  cursor: pointer;
+  transition: background-color 0.3s ease;
+}
+
+.cycle-button:hover {
+  background-color: #2980b9;
+}
+
+.cycle-details {
+  margin-top: 10px;
+  padding: 10px;
   border: 1px solid #ddd;
   border-radius: 5px;
   background-color: #ffffff;
@@ -143,7 +194,11 @@ h3 {
   margin-bottom: 10px;
 }
 
-p {
+ul {
+  margin-left: 20px;
+}
+
+li {
   color: #555;
 }
 </style>