making collapsable cards

docs/.vuepress/components/IterativeCycle.vue

 <template>
-  <div class="iterative-cycle">
+  <div class="collapsible-cards">
     <!-- Module Selector Tabs -->
     <div class="module-tabs">
       <div
@@ -15,11 +15,13 @@
     <!-- Cycles Display -->
     <div v-if="selectedModule !== null" class="cycle">
       <h2>{{ modules[selectedModule].title }}</h2>
-      <div v-for="(cycle, index) in modules[selectedModule].cycles" :key="index" class="cycle-container">
-        <button @click="toggleCycle(index)" class="cycle-button">
+      <div v-for="(cycle, index) in modules[selectedModule].cycles" :key="index" class="card">
+        <h4 @click="toggleCycle(index)">
           {{ cycle.title }}
-        </button>
-        <div v-if="isCycleOpen(index)" class="cycle-details">
+          <span v-if="isCycleOpen(index)">▲</span>
+          <span v-else>▼</span>
+        </h4>
+        <div v-if="isCycleOpen(index)" class="content">
           <h3>Phases:</h3>
           <ul>
             <li v-for="(phase, phaseIndex) in cycle.phases" :key="phaseIndex">
@@ -51,24 +53,7 @@ export default {
                 { 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.' },
-              ]
-            }
+            // Add more cycles as needed
           ]
         },
         {
@@ -78,33 +63,13 @@ export default {
               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',
-          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.' },
               ]
-            }
+            },
+            // Add more cycles as needed
           ]
         },
-        {
-          title: 'Module 4: Design Only',
-          cycles: [
-            {
-              title: 'Cycle 1',
-              phases: [
-                { title: 'Design', description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.' }
-              ]
-            }
-          ]
-        }
+        // Add more modules as needed
       ]
     };
   },
@@ -128,19 +93,40 @@ export default {
 </script>
 
 <style scoped>
-/* Layout styles */
-.iterative-cycle {
-  font-family: 'Arial', sans-serif;
-  max-width: 800px;
-  margin: 20px auto;
+.collapsible-cards {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+  margin: 20px 0;
+}
+
+.card {
+  background-color: #e3f2fd;
+  border: 1px solid #ccc;
+  border-radius: 10px;
   padding: 20px;
-  border: 1px solid #ddd;
-  border-radius: 8px;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
-  background-color: #f9f9f9;
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+  cursor: pointer;
+}
+
+.card h4 {
+  color: #396d7e;
+  margin-bottom: 10px;
+  display: flex;
+  justify-content: space-between;
+}
+
+.card .content {
+  margin-top: 10px;
+  font-size: 1.1em;
+  color: #333;
+}
+
+h1,
+h3 {
+  color: #396d7e;
 }
 
-/* Module Selector Tabs */
 .module-tabs {
   display: flex;
   justify-content: center;
@@ -167,57 +153,4 @@ export default {
   color: white;
   box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
 }
-
-/* Cycle section */
-.cycle {
-  margin-top: 20px;
-}
-
-.cycle-container {
-  margin: 10px 0;
-}
-
-.cycle-button {
-  width: 100%;
-  padding: 10px;
-  font-size: 16px;
-  background-color: #a3c88a; /* Updated button color */
-  color: white;
-  border: none;
-  border-radius: 5px;
-  cursor: pointer;
-  transition: background-color 0.3s ease;
-}
-
-.cycle-button:hover {
-  background-color: #8fb379;
-}
-
-.cycle-details {
-  margin-top: 10px;
-  padding: 10px;
-  border: 1px solid #ddd;
-  border-radius: 5px;
-  background-color: #ffffff;
-  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
-}
-
-/* Typography */
-h2 {
-  color: #2c3e50;
-  text-align: center;
-}
-
-h3 {
-  color: #3498db;
-  margin-bottom: 10px;
-}
-
-ul {
-  margin-left: 20px;
-}
-
-li {
-  color: #555;
-}
-</style>
\ No newline at end of file
+</style>