Update accordion docs
This commit is contained in:
Marcus Kammer
parent
abe7847ab1
commit
f2cf270a1f
2 changed files with 155 additions and 34 deletions
|
|
@ -10,16 +10,15 @@
|
|||
<body>
|
||||
<h1 class=visually-hidden>Accordion Example</h1>
|
||||
<main class=container>
|
||||
<div class=accordion id=accordionExample>
|
||||
<div class=accordion id=firstAccordion>
|
||||
<div class=accordion-item>
|
||||
<h2 class=accordion-header>
|
||||
<button class=accordion-button type=button data-bs-toggle=collapse
|
||||
data-bs-target=#collapse-accordionExample-1
|
||||
aria-expanded=true aria-controls=collapse-accordionExample-1>What is the purpose of this website?</button>
|
||||
data-bs-target=#collapse-firstAccordion-1 aria-expanded=true
|
||||
aria-controls=collapse-firstAccordion-1>What is the purpose of this website?</button>
|
||||
</h2>
|
||||
<div class="accordion-collapse collapse show"
|
||||
id=collapse-accordionExample-1
|
||||
data-bs-parent=#accordionExample>
|
||||
id=collapse-firstAccordion-1 data-bs-parent=#firstAccordion>
|
||||
<div class=accordion-body>
|
||||
This website is designed to provide information and resources on various topics related to user experience, design
|
||||
thinking, and agile methodologies.
|
||||
|
|
@ -30,12 +29,11 @@
|
|||
<h2 class=accordion-header>
|
||||
<button class="accordion-button collapsed" type=button
|
||||
data-bs-toggle=collapse
|
||||
data-bs-target=#collapse-accordionExample-2
|
||||
aria-expanded=false aria-controls=collapse-accordionExample-2>How can I contact the support team?</button>
|
||||
data-bs-target=#collapse-firstAccordion-2 aria-expanded=false
|
||||
aria-controls=collapse-firstAccordion-2>How can I contact the support team?</button>
|
||||
</h2>
|
||||
<div class="accordion-collapse collapse"
|
||||
id=collapse-accordionExample-2
|
||||
data-bs-parent=#accordionExample>
|
||||
id=collapse-firstAccordion-2 data-bs-parent=#firstAccordion>
|
||||
<div class=accordion-body>
|
||||
You can reach our support team by sending an email to support@example.com. We'll be happy to assist you with any
|
||||
questions or issues you may have.
|
||||
|
|
@ -46,12 +44,11 @@
|
|||
<h2 class=accordion-header>
|
||||
<button class="accordion-button collapsed" type=button
|
||||
data-bs-toggle=collapse
|
||||
data-bs-target=#collapse-accordionExample-3
|
||||
aria-expanded=false aria-controls=collapse-accordionExample-3>Is there a mobile app available?</button>
|
||||
data-bs-target=#collapse-firstAccordion-3 aria-expanded=false
|
||||
aria-controls=collapse-firstAccordion-3>Is there a mobile app available?</button>
|
||||
</h2>
|
||||
<div class="accordion-collapse collapse"
|
||||
id=collapse-accordionExample-3
|
||||
data-bs-parent=#accordionExample>
|
||||
id=collapse-firstAccordion-3 data-bs-parent=#firstAccordion>
|
||||
<div class=accordion-body>
|
||||
Yes, we have a mobile app available for both iOS and Android devices. You can download it from the App Store or Google
|
||||
Play Store.
|
||||
|
|
@ -62,12 +59,11 @@
|
|||
<h2 class=accordion-header>
|
||||
<button class="accordion-button collapsed" type=button
|
||||
data-bs-toggle=collapse
|
||||
data-bs-target=#collapse-accordionExample-4
|
||||
aria-expanded=false aria-controls=collapse-accordionExample-4>What payment methods do you accept?</button>
|
||||
data-bs-target=#collapse-firstAccordion-4 aria-expanded=false
|
||||
aria-controls=collapse-firstAccordion-4>What payment methods do you accept?</button>
|
||||
</h2>
|
||||
<div class="accordion-collapse collapse"
|
||||
id=collapse-accordionExample-4
|
||||
data-bs-parent=#accordionExample>
|
||||
id=collapse-firstAccordion-4 data-bs-parent=#firstAccordion>
|
||||
<div class=accordion-body>
|
||||
We accept payments through credit cards, PayPal, and bank transfers. You can choose the payment method that suits you
|
||||
best during the checkout process.
|
||||
|
|
@ -78,12 +74,11 @@
|
|||
<h2 class=accordion-header>
|
||||
<button class="accordion-button collapsed" type=button
|
||||
data-bs-toggle=collapse
|
||||
data-bs-target=#collapse-accordionExample-5
|
||||
aria-expanded=false aria-controls=collapse-accordionExample-5>How do I reset my password?</button>
|
||||
data-bs-target=#collapse-firstAccordion-5 aria-expanded=false
|
||||
aria-controls=collapse-firstAccordion-5>How do I reset my password?</button>
|
||||
</h2>
|
||||
<div class="accordion-collapse collapse"
|
||||
id=collapse-accordionExample-5
|
||||
data-bs-parent=#accordionExample>
|
||||
id=collapse-firstAccordion-5 data-bs-parent=#firstAccordion>
|
||||
<div class=accordion-body>
|
||||
To reset your password, go to the login page and click on the 'Forgot Password' link. Follow the instructions
|
||||
sent to your registered email address to create a new password.
|
||||
|
|
@ -94,13 +89,11 @@
|
|||
<h2 class=accordion-header>
|
||||
<button class="accordion-button collapsed" type=button
|
||||
data-bs-toggle=collapse
|
||||
data-bs-target=#collapse-accordionExample-6
|
||||
aria-expanded=false aria-controls=collapse-accordionExample-6>Can I contribute to your knowledge sharing
|
||||
initiatives?</button>
|
||||
data-bs-target=#collapse-firstAccordion-6 aria-expanded=false
|
||||
aria-controls=collapse-firstAccordion-6>Can I contribute to your knowledge sharing initiatives?</button>
|
||||
</h2>
|
||||
<div class="accordion-collapse collapse"
|
||||
id=collapse-accordionExample-6
|
||||
data-bs-parent=#accordionExample>
|
||||
id=collapse-firstAccordion-6 data-bs-parent=#firstAccordion>
|
||||
<div class=accordion-body>
|
||||
Absolutely! We encourage contributions from our community. You can participate in our knowledge sharing initiatives by
|
||||
joining our forums and sharing your insights and experiences.
|
||||
|
|
@ -111,13 +104,119 @@
|
|||
<h2 class=accordion-header>
|
||||
<button class="accordion-button collapsed" type=button
|
||||
data-bs-toggle=collapse
|
||||
data-bs-target=#collapse-accordionExample-7
|
||||
aria-expanded=false aria-controls=collapse-accordionExample-7>What is the schedule for upcoming webinars and
|
||||
data-bs-target=#collapse-firstAccordion-7 aria-expanded=false
|
||||
aria-controls=collapse-firstAccordion-7>What is the schedule for upcoming webinars and events?</button>
|
||||
</h2>
|
||||
<div class="accordion-collapse collapse"
|
||||
id=collapse-firstAccordion-7 data-bs-parent=#firstAccordion>
|
||||
<div class=accordion-body>
|
||||
You can find the schedule for upcoming webinars and events on our Events page. We regularly update it with details of
|
||||
upcoming sessions.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class=accordion id=secondAccordion>
|
||||
<div class=accordion-item>
|
||||
<h2 class=accordion-header>
|
||||
<button class=accordion-button type=button data-bs-toggle=collapse
|
||||
data-bs-target=#collapse-secondAccordion-1 aria-expanded=true
|
||||
aria-controls=collapse-secondAccordion-1>What is the purpose of this website?</button>
|
||||
</h2>
|
||||
<div class="accordion-collapse collapse show"
|
||||
id=collapse-secondAccordion-1 data-bs-parent=#secondAccordion>
|
||||
<div class=accordion-body>
|
||||
This website is designed to provide information and resources on various topics related to user experience, design
|
||||
thinking, and agile methodologies.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class=accordion-item>
|
||||
<h2 class=accordion-header>
|
||||
<button class="accordion-button collapsed" type=button
|
||||
data-bs-toggle=collapse
|
||||
data-bs-target=#collapse-secondAccordion-2
|
||||
aria-expanded=false aria-controls=collapse-secondAccordion-2>How can I contact the support team?</button>
|
||||
</h2>
|
||||
<div class="accordion-collapse collapse"
|
||||
id=collapse-secondAccordion-2 data-bs-parent=#secondAccordion>
|
||||
<div class=accordion-body>
|
||||
You can reach our support team by sending an email to support@example.com. We'll be happy to assist you with any
|
||||
questions or issues you may have.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class=accordion-item>
|
||||
<h2 class=accordion-header>
|
||||
<button class="accordion-button collapsed" type=button
|
||||
data-bs-toggle=collapse
|
||||
data-bs-target=#collapse-secondAccordion-3
|
||||
aria-expanded=false aria-controls=collapse-secondAccordion-3>Is there a mobile app available?</button>
|
||||
</h2>
|
||||
<div class="accordion-collapse collapse"
|
||||
id=collapse-secondAccordion-3 data-bs-parent=#secondAccordion>
|
||||
<div class=accordion-body>
|
||||
Yes, we have a mobile app available for both iOS and Android devices. You can download it from the App Store or Google
|
||||
Play Store.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class=accordion-item>
|
||||
<h2 class=accordion-header>
|
||||
<button class="accordion-button collapsed" type=button
|
||||
data-bs-toggle=collapse
|
||||
data-bs-target=#collapse-secondAccordion-4
|
||||
aria-expanded=false aria-controls=collapse-secondAccordion-4>What payment methods do you accept?</button>
|
||||
</h2>
|
||||
<div class="accordion-collapse collapse"
|
||||
id=collapse-secondAccordion-4 data-bs-parent=#secondAccordion>
|
||||
<div class=accordion-body>
|
||||
We accept payments through credit cards, PayPal, and bank transfers. You can choose the payment method that suits you
|
||||
best during the checkout process.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class=accordion-item>
|
||||
<h2 class=accordion-header>
|
||||
<button class="accordion-button collapsed" type=button
|
||||
data-bs-toggle=collapse
|
||||
data-bs-target=#collapse-secondAccordion-5
|
||||
aria-expanded=false aria-controls=collapse-secondAccordion-5>How do I reset my password?</button>
|
||||
</h2>
|
||||
<div class="accordion-collapse collapse"
|
||||
id=collapse-secondAccordion-5 data-bs-parent=#secondAccordion>
|
||||
<div class=accordion-body>
|
||||
To reset your password, go to the login page and click on the 'Forgot Password' link. Follow the instructions
|
||||
sent to your registered email address to create a new password.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class=accordion-item>
|
||||
<h2 class=accordion-header>
|
||||
<button class="accordion-button collapsed" type=button
|
||||
data-bs-toggle=collapse
|
||||
data-bs-target=#collapse-secondAccordion-6
|
||||
aria-expanded=false aria-controls=collapse-secondAccordion-6>Can I contribute to your knowledge sharing
|
||||
initiatives?</button>
|
||||
</h2>
|
||||
<div class="accordion-collapse collapse"
|
||||
id=collapse-secondAccordion-6 data-bs-parent=#secondAccordion>
|
||||
<div class=accordion-body>
|
||||
Absolutely! We encourage contributions from our community. You can participate in our knowledge sharing initiatives by
|
||||
joining our forums and sharing your insights and experiences.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class=accordion-item>
|
||||
<h2 class=accordion-header>
|
||||
<button class="accordion-button collapsed" type=button
|
||||
data-bs-toggle=collapse
|
||||
data-bs-target=#collapse-secondAccordion-7
|
||||
aria-expanded=false aria-controls=collapse-secondAccordion-7>What is the schedule for upcoming webinars and
|
||||
events?</button>
|
||||
</h2>
|
||||
<div class="accordion-collapse collapse"
|
||||
id=collapse-accordionExample-7
|
||||
data-bs-parent=#accordionExample>
|
||||
id=collapse-secondAccordion-7 data-bs-parent=#secondAccordion>
|
||||
<div class=accordion-body>
|
||||
You can find the schedule for upcoming webinars and events on our Events page. We regularly update it with details of
|
||||
upcoming sessions.
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
#+title: Using cl-sbt/accordion Macros in a Web Application
|
||||
#+title: Using dev.metalisp.sbt/component/accordion Macros in a Web Application
|
||||
#+author: Marcus Kammer
|
||||
#+email: marcus.kammer@mailbox.org
|
||||
#+date: 2024-02-04T20:18+01:00
|
||||
#+date: 2024-02-06T10:12+01:00
|
||||
* Introduction
|
||||
|
||||
The accordion component is a popular UI element that helps to organize and
|
||||
|
|
@ -34,7 +34,7 @@ how it works:
|
|||
- Bootstrap's JavaScript library manages the animations and transitions for
|
||||
smooth content expansion and collapse.
|
||||
|
||||
* Integrating cl-sbt/accordion Macros
|
||||
* Integrating dev.metalisp.sbt/component/accordion Macros
|
||||
|
||||
To create Bootstrap-style accordions in your Common Lisp web application, you
|
||||
can use the cl-sbt/accordion macros. These macros provide a convenient way to
|
||||
|
|
@ -55,7 +55,29 @@ can integrate them into your project:
|
|||
"Generates an HTML page with accordion using accordion macros."
|
||||
(with-output-to-string (spinneret:*html*)
|
||||
(with-page (:title "Accordion Example" :main-con t)
|
||||
(accordion ()
|
||||
(accordion (:id "firstAccordion")
|
||||
"What is the purpose of this website?"
|
||||
"This website is designed to provide information and resources on various topics related to user experience, design thinking, and agile methodologies."
|
||||
|
||||
"How can I contact the support team?"
|
||||
"You can reach our support team by sending an email to support@example.com. We'll be happy to assist you with any questions or issues you may have."
|
||||
|
||||
"Is there a mobile app available?"
|
||||
"Yes, we have a mobile app available for both iOS and Android devices. You can download it from the App Store or Google Play Store."
|
||||
|
||||
"What payment methods do you accept?"
|
||||
"We accept payments through credit cards, PayPal, and bank transfers. You can choose the payment method that suits you best during the checkout process."
|
||||
|
||||
"How do I reset my password?"
|
||||
"To reset your password, go to the login page and click on the 'Forgot Password' link. Follow the instructions sent to your registered email address to create a new password."
|
||||
|
||||
"Can I contribute to your knowledge sharing initiatives?"
|
||||
"Absolutely! We encourage contributions from our community. You can participate in our knowledge sharing initiatives by joining our forums and sharing your insights and experiences."
|
||||
|
||||
"What is the schedule for upcoming webinars and events?"
|
||||
"You can find the schedule for upcoming webinars and events on our Events page. We regularly update it with details of upcoming sessions.")
|
||||
|
||||
(accordion (:id "secondAccordion")
|
||||
"What is the purpose of this website?"
|
||||
"This website is designed to provide information and resources on various topics related to user experience, design thinking, and agile methodologies."
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue