From 853eb065bf74008a7d1858366808b1374c7ea555 Mon Sep 17 00:00:00 2001
From: Xingan Zhao <2081098605@qq.com>
Date: Sun, 29 Sep 2024 18:40:00 +0800
Subject: [PATCH] feat:model accordion
---
src/containers/App/App.css | 43 ++++++++++++++++++++++++++++++++++++++
src/contents/model.tsx | 15 +++++++++++++
2 files changed, 58 insertions(+)
diff --git a/src/containers/App/App.css b/src/containers/App/App.css
index 8793f83..9a51547 100644
--- a/src/containers/App/App.css
+++ b/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
diff --git a/src/contents/model.tsx b/src/contents/model.tsx
index 37b75dc..02c92d4 100644
--- a/src/contents/model.tsx
+++ b/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>
--
GitLab