feat:model accordion

src/containers/App/App.css

@@ -945,3 +945,46 @@ span.formula_line::-webkit-scrollbar-track {
     white-space: nowrap; 
 }
 
+.accordion {
+  width: 95%;
+  margin: 20px auto;
+  /* border: 1px solid #ccc; */
+  border-radius: 8px;
+  overflow: hidden;
+}
+
+.accordion-header {
+  background-color: #e4dfb4;
+  padding: 15px;
+  width: 100%;
+  cursor: pointer;
+  user-select: none; 
+  transition: background-color 0.3s ease;
+}
+
+.accordion-header:hover {
+  background-color: #e0e0e0;
+  cursor: url('https://static.igem.wiki/teams/5378/image/dg-pointer2.png') 18 18, pointer;
+}
+
+.accordion-content {
+  max-height: 0;
+  overflow: hidden;
+  transition: max-height 0.4s ease;
+  background-color: #fff;
+  padding: 0 15px;
+}
+
+.accordion-content.open {
+  max-height: 100vh; 
+  padding: 15px;
+  margin-left: 5px;
+  border-left:3px solid #5bc0de ;
+  background-color: rgb(245, 245, 220);
+}
+
+.accordion-content p {
+  margin: 0;
+  font-size: 16px;
+  color: #333;
+}
\ No newline at end of file

src/contents/model.tsx

@@ -44,6 +44,10 @@ export function Model() {
     }, []);
     // sidenavbar end
 
+    const [isOpen, setIsOpen] = useState(false);
+    const toggleAccordion = () => {
+      setIsOpen(!isOpen);
+    };
 
 
   return (
@@ -923,6 +927,17 @@ export function Model() {
                <div className="bd-callout bd-callout-info bg-gray">
                   <h1>What do we do to ...? See...</h1>
                 </div>
+
+                <div className="accordion">
+
+      <div className="accordion-header" onClick={toggleAccordion}>
+        <h3>{isOpen ? 'Collapse' : 'Learn more about'} ......</h3>
+      </div>
+      <div className={`accordion-content ${isOpen ? 'open' : ''}`}>
+        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam possimus consequatur nesciunt iure labore voluptatem! Unde, voluptates ipsam et soluta minima hic, aliquid, nam doloribus illo quas odit ducimus? Vero?Lorem ipsum dolor, sit amet consectetur adipisicing elit. Rem laudantium asperiores tempore quisquam repellendus deleniti corporis ratione dolores eligendi, atque impedit esse dolore eum sequi harum cum cumque quae necessitatibus!longerlore!</p>
+      </div>
+
+    </div>
               
               <Element name="section2" className="element" id='section2'>
                 <h2>Section 2</h2>