<div data-controller="dropdown"
class="w-full flex flex-col gap-12 md:flex-row sm:max-w-[400px] md:max-w-[450px] lg:max-w-[500px] text-[#868686]">
<div class="md:min-h-[450px] w-full mt-3">
<h4 class="text-4xl font-semibold px-4 pb-3">FAQ's</h4>
<div data-dropdown-target="background" class=" py-4 px-4">
<div data-action="click->dropdown#onToggle" data-dropdown-target="button" class="cursor-pointer flex justify-between items-center">
<h5 class="text-xl font-bold">Waar hebben jullie nieuwe tuinen aangelegd? </h5><span
data-dropdown-target="expand" class="font-light text-[18px] self-start">+</span>
</div>
<p data-dropdown-target="drop" class="hidden">Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed
do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<div data-dropdown-target="background" class=" py-4 px-4">
<div data-action="click->dropdown#onToggle" data-dropdown-target="button" class="cursor-pointer flex justify-between items-center">
<h5 class="text-xl font-bold">Waar moet een goede hovenier aan voldoen?</h5><span
data-dropdown-target="expand" class="font-light text-[18px] self-start">+</span>
</div>
<p data-dropdown-target="drop" class="hidden ">Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed
do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<div data-dropdown-target="background" class="py-4 px-4">
<div data-action="click->dropdown#onToggle" data-dropdown-target="button" class="cursor-pointer flex justify-between items-center">
<h5 class="text-xl font-bold">Wat kost de aanleg van een nieuwe tuin? </h5><span
data-dropdown-target="expand" class="font-light text-[18px] self-start">+</span>
</div>
<p data-dropdown-target="drop" class="hidden">Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed
do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<div data-dropdown-target="background" class="py-4 px-4">
<div data-action="click->dropdown#onToggle" data-dropdown-target="button" class="cursor-pointer flex justify-between items-center">
<h5 class="text-xl font-bold">Zijn de afspraken vrijblijvend?</h5><span data-dropdown-target="expand"
class="font-light text-[18px] ml-auto self-start">+</span>
</div>
<p data-dropdown-target="drop" class="hidden">Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
</div>
</div>
import { Controller } from "@hotwired/stimulus";
export default class extends Controller {
static targets = ["background", "drop", "expand", "button"];
static values = { accordionValue: Number };
connect() {
console.log("Drop Down connected");
}
initialize() {
this.isOpen = true;
}
onToggle = (e) => {
Array.prototype.forEach.call(this.buttonTargets, function (element, index) {
element.addEventListener("click", function () {
console.log(index)
this.isOpen ? this.show() : this.hide()
this.isOpen = !this.isOpen
})
})
};
show() {
this.dropTarget.className = "block w-full text-base font-light pt-3";
this.backgroundTarget.className = "bg-[#F0F0F0] mb-2 py-6 px-4";
this.expandTarget.innerHTML = "-";
console.log("dropdown is active");
}
hide() {
this.dropTarget.className = "hidden";
this.backgroundTarget.className = "bg-white -mb-2 w-full py-6 px-4";
this.expandTarget.innerHTML = "+";
console.log("dropdown is closed");
}
}