Accordion Block
The Accordion Block creates a disclosure widget, which allows you to hide or reveal content on your web page. It’s typically used to provide additional information or options that can be displayed when a user interacts with the widget.
Example Accordion
Choose either a single or multiple panels to be automatically opened. Specify the header level from h2 to h5. Here’s an example using FAQs:
What are the main causes of environmental issues?
Environmental issues are often caused by factors such as:
- deforestation,
- industrial pollution,
- greenhouse gas emissions,
- over-exploitation of natural resources and habitat destruction.

Photo: Ales Krivec
These activities can lead to problems like:
- climate change,
- air and water pollution,
- loss of biodiversity and more.
How does climate change affect the environment, and what are its consequences?
Climate change can lead to rising global temperatures, which in turn cause melting glaciers, sea-level rise, more frequent and severe weather events, and disruptions to ecosystems. These changes can impact agriculture, water resources, and human health, and can also lead to the displacement of communities.
What is the significance of biodiversity, and why is its loss a concern for the environment?
Biodiversity refers to the variety of life on Earth, including different species, genetic diversity, and ecosystems. Loss of biodiversity can disrupt ecological balance, reduce ecosystem resilience, and lead to negative impacts on human well-being. It’s crucial for maintaining ecosystem services, including food production, clean water, and climate regulation.
How can individuals contribute to addressing environmental issues in their daily lives?
Individuals can make a positive impact by adopting sustainable practices:
- Reducing energy and water consumption,
- Recycling,
- Using public transportation or carpooling,
- Supporting renewable energy,
- Being mindful of their consumption habits.
Supporting policies and initiatives that promote environmental protection is also important.
The accordion uses the HTML details
element and is enhanced by javascript for animation and styling.
Resize images
To resize images, like the image in the first section of the Accordion above, you can use a custom resize KirbTag. Unlike the image tag, this will produce a resized version of the image:
(resize:image.jpg width:400)