IMPR: Add some options to Accordion element

src/Elements/AccordionElement.php

@@ -9,6 +9,7 @@
 namespace A2nt\ElementalBasics\Elements;
 
 use DNADesign\ElementalList\Model\ElementList;
+use SilverStripe\Forms\CheckboxField;
 
 class AccordionElement extends ElementList
 {
@@ -21,6 +22,11 @@ class AccordionElement extends ElementList
 
     private static $table_name = 'AccordionElement';
 
+	private static $db = [
+		'OpenFirst' => 'Boolean(0)',
+		'KeepOpenned' => 'Boolean(0)',
+	];
+
     public function getType()
     {
         return self::$singular_name;
@@ -30,4 +36,16 @@ class AccordionElement extends ElementList
     {
         return $this->Elements()->renderWith(static::class.'_AccordionArea');
     }
+
+	public function getCMSFields()
+	{
+		$fields = parent::getCMSFields();
+
+		$fields->addFieldsToTab('Root.Main', [
+			CheckboxField::create('OpenFirst', 'Open first accordion element on page load'),
+			CheckboxField::create('KeepOpenned', 'Keep elements oppened'),
+		]);
+
+		return $fields;
+	}
 }

templates/A2nt/ElementalBasics/Elements/AccordionElement_AccordionArea.ss

@@ -6,7 +6,7 @@
 				<button
 					data-bs-toggle="collapse"
 					data-bs-target="#ElementContent{$ID}"
-					aria-expanded="false"
+					aria-expanded="<% if $First && $OpenFirst %>true<% else %>false<% end_if %>"
 					aria-controls="ElementContent{$ID}"
 					class="accordion-button collapsed"
 				>$Title</button>
@@ -14,9 +14,11 @@
 
 			<div
 				id="ElementContent{$ID}"
-				class="accordion-collapse collapse"
+				class="accordion-collapse collapse<% if $First && $OpenFirst %> show<% end_if %>"
 				aria-labelledby="ElementHeader{$ID}"
-				data-bs-parent="#ElementAccordion{$Parent.ID}"
+				<% if not $Up.KeepOpenned %>
+					data-bs-parent="#ElementAccordion{$Parent.ID}"
+				<% end_if %>
 			>
 				<div class="accordion-body">$Me</div>
 			</div>