2023-09-01 12:42:01 +02:00
|
|
|
#+title: Using cl-sbt/accordion Macros in a Web Application
|
2023-09-01 13:44:50 +02:00
|
|
|
#+author: Marcus Kammer
|
|
|
|
|
#+email: marcus.kammer@mailbox.org
|
|
|
|
|
#+date: [2023-09-01 Fri]
|
|
|
|
|
* Introduction
|
2023-09-01 12:42:01 +02:00
|
|
|
|
2023-09-01 13:44:50 +02:00
|
|
|
The accordion component is a popular UI element that helps to organize and
|
|
|
|
|
present content in a space-efficient manner. Accordions consist of a list of
|
|
|
|
|
headers that users can click on to toggle the visibility of associated content.
|
|
|
|
|
This is particularly useful for presenting large amounts of information in a
|
|
|
|
|
confined space while keeping the interface clean and uncluttered. The Accordion
|
|
|
|
|
component is perfect for FAQ sections, multi-part forms, or any situation where
|
|
|
|
|
you need to present the user with a range of options or information, but you
|
|
|
|
|
want to keep the interface uncluttered by hiding content that isn't immediately
|
|
|
|
|
necessary.
|
2023-09-01 12:42:01 +02:00
|
|
|
|
2023-09-01 13:44:50 +02:00
|
|
|
** Bootstrap Accordions
|
2023-09-01 12:42:01 +02:00
|
|
|
|
2023-09-01 13:44:50 +02:00
|
|
|
[[https://getbootstrap.com/docs/][Bootstrap]] is a popular front-end framework that provides ready-to-use
|
|
|
|
|
components for building responsive and modern web applications. One of its
|
|
|
|
|
components is the [[https://getbootstrap.com/docs/5.3/components/accordion/][accordion]], which enhances the user experience by providing a
|
|
|
|
|
user-friendly way to display and interact with content.
|
|
|
|
|
|
|
|
|
|
*** How Bootstrap Accordions Work
|
|
|
|
|
|
|
|
|
|
Bootstrap accordions are created using HTML, CSS, and JavaScript. The Bootstrap
|
|
|
|
|
JavaScript library adds the necessary interactivity to the accordion. Here's
|
|
|
|
|
how it works:
|
|
|
|
|
|
|
|
|
|
- Each accordion item consists of a header and content section.
|
|
|
|
|
- Clicking on an accordion item's header toggles the visibility of its content.
|
|
|
|
|
- By default, only one item's content is visible at a time. Clicking on a
|
|
|
|
|
header closes any open content before opening the clicked item's content.
|
|
|
|
|
- Bootstrap's JavaScript library manages the animations and transitions for
|
|
|
|
|
smooth content expansion and collapse.
|
|
|
|
|
|
|
|
|
|
* Integrating cl-sbt/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
|
|
|
|
|
generate the necessary HTML structure for accordion components. Here's how you
|
|
|
|
|
can integrate them into your project:
|
|
|
|
|
|
|
|
|
|
#+begin_src lisp
|
|
|
|
|
(defpackage my-web-app
|
|
|
|
|
(:use :cl :cl-sbt/accordion)
|
|
|
|
|
(:export :generate-accordion-page))
|
|
|
|
|
|
|
|
|
|
(in-package :my-web-app)
|
|
|
|
|
|
|
|
|
|
(defun generate-accordion-page ()
|
|
|
|
|
"Generates an HTML page with an accordion using cl-sbt/accordion macros."
|
|
|
|
|
(spinneret:with-html-string
|
|
|
|
|
(:html
|
|
|
|
|
(:head
|
2023-09-01 12:42:01 +02:00
|
|
|
(:title "Accordion Example")
|
|
|
|
|
;; Include Bootstrap CSS and JavaScript links here
|
|
|
|
|
)
|
2023-09-01 13:44:50 +02:00
|
|
|
(:body
|
|
|
|
|
(:h1 "Accordion Example")
|
|
|
|
|
(accordion "myAccordion"
|
|
|
|
|
(:target "collapseOne" :name "Section 1" :show t :content "Content for section 1.")
|
|
|
|
|
(:target "collapseTwo" :name "Section 2" :content "Content for section 2.")
|
|
|
|
|
(:target "collapseThree" :name "Section 3" :content "Content for section 3."))
|
|
|
|
|
;; Include Bootstrap JavaScript initialization script here
|
|
|
|
|
))))
|
|
|
|
|
|
|
|
|
|
(generate-accordion-page)
|
2023-09-01 12:42:01 +02:00
|
|
|
#+end_src
|
|
|
|
|
|
2023-09-01 13:44:50 +02:00
|
|
|
#+RESULTS:
|
|
|
|
|
#+begin_example
|
|
|
|
|
<html lang=en>
|
|
|
|
|
<head>
|
|
|
|
|
<meta charset=UTF-8>
|
|
|
|
|
<title>Accordion Example</title>
|
|
|
|
|
</head>
|
|
|
|
|
<body>
|
|
|
|
|
<h1>Accordion Example</h1>
|
|
|
|
|
<div class=accordion id=myAccordion>
|
|
|
|
|
<div class=accordion-item>
|
|
|
|
|
<h2 class=accordion-header>
|
|
|
|
|
<button class=accordion-button type=button data-bs-toggle=collapse
|
|
|
|
|
data-bs-target=#collapseOne aria-expanded=true
|
|
|
|
|
aria-controls=#collapseOne>Section 1</button>
|
|
|
|
|
</h2>
|
|
|
|
|
<div class="accordion-collapse collapse show" id=collapseOne
|
|
|
|
|
data-bs-parent=#myAccordion>
|
|
|
|
|
<div class=accordion-body>
|
|
|
|
|
Content for section 1.
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class=accordion-item>
|
|
|
|
|
<h2 class=accordion-header>
|
|
|
|
|
<button class=accordion-button type=button data-bs-toggle=collapse
|
|
|
|
|
data-bs-target=#collapseTwo aria-expanded=false
|
|
|
|
|
aria-controls=#collapseTwo>Section 2</button>
|
|
|
|
|
</h2>
|
|
|
|
|
<div class="accordion-collapse collapse" id=collapseTwo
|
|
|
|
|
data-bs-parent=#myAccordion>
|
|
|
|
|
<div class=accordion-body>
|
|
|
|
|
Content for section 2.
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class=accordion-item>
|
|
|
|
|
<h2 class=accordion-header>
|
|
|
|
|
<button class=accordion-button type=button data-bs-toggle=collapse
|
|
|
|
|
data-bs-target=#collapseThree aria-expanded=false
|
|
|
|
|
aria-controls=#collapseThree>Section 3</button>
|
|
|
|
|
</h2>
|
|
|
|
|
<div class="accordion-collapse collapse" id=collapseThree
|
|
|
|
|
data-bs-parent=#myAccordion>
|
|
|
|
|
<div class=accordion-body>
|
|
|
|
|
Content for section 3.
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
|
|
|
|
#+end_example
|
|
|
|
|
|
2023-09-01 12:42:01 +02:00
|
|
|
This example demonstrates how to integrate the cl-sbt/accordion macros into a
|
|
|
|
|
web application to create an interactive accordion component. The macros help
|
|
|
|
|
generate the necessary HTML structure for the accordion, which allows users to
|
|
|
|
|
navigate through content conveniently.
|
|
|
|
|
|
|
|
|
|
To get started, follow these steps:
|
|
|
|
|
|
|
|
|
|
1. Make sure you have included the Bootstrap CSS and JavaScript libraries in
|
|
|
|
|
your HTML. Also, include the Spinneret library for HTML generation.
|
|
|
|
|
|
|
|
|
|
2. Define your web application package and import the necessary packages,
|
|
|
|
|
including cl-sbt/accordion.
|
|
|
|
|
|
|
|
|
|
3. Implement the `generate-accordion-page` function. This function generates an
|
|
|
|
|
HTML page with an accordion using the cl-sbt/accordion macros.
|
|
|
|
|
|
|
|
|
|
4. Call the `generate-accordion-page` function within your application's logic
|
|
|
|
|
to generate the HTML page with the accordion.
|
|
|
|
|
|
|
|
|
|
5. Bootstrap's JavaScript library will handle the expansion and collapse
|
|
|
|
|
animations of the accordion content, providing an interactive user
|
|
|
|
|
experience.
|
|
|
|
|
|
|
|
|
|
By using these macros, you can easily create accordion components that allow
|
|
|
|
|
users to navigate and view content in a user-friendly manner within your web
|
|
|
|
|
application.
|
