Q1. How do i know if a product is available in boutiques?
This is the Accordion to place text below when clicking.
<div class="py-4 px-8">
<div class="w-full">
<!-- Question 1 -->
<hr class="w-full lg:mt-10 md:mt-12 md:mb-8 my-8" />
<div class="w-full md:px-6">
<div
id="mainHeading"
class="flex justify-between items-center w-full"
>
<div class="">
<p
class="flex justify-center items-center dark:text-white font-medium text-base leading-6 md:leading-4 text-gray-800"
>
<span
class="lg:mr-6 mr-4 dark:text-white lg:text-2xl md:text-xl text-lg leading-6 md:leading-5 lg:leading-4 font-semibold text-gray-800"
>Q1.</span
> How do i know if a product is available in boutiques?
</p>
</div>
<button
aria-label="toggler"
class="focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-800"
data-menu
>
<img
class="transform dark:hidden"
src="https://tuk-cdn.s3.amazonaws.com/can-uploader/faq-8-svg2.svg"
alt="toggler"
/>
<img
class="transform dark:block hidden"
src="https://tuk-cdn.s3.amazonaws.com/can-uploader/faq-8-svg2dark.svg"
alt="toggler"
/>
</button>
</div>
<div id="menu" class="hidden mt-6 w-full">
<p
class="text-base leading-6 text-gray-600 dark:text-gray-300 font-normal"
>
Remember you can query the status of your orders any time in
My orders in the My account section. if you are not
resigered at Mango.com, you can access dierectly in the
Orders section. In this cause, you will have enter your
e-mail address and order number.
</p>
</div>
</div>
<!-- Question 2 -->
<hr class="w-full lg:mt-10 my-8" />
<div class="w-full md:px-6">
<div
id="mainHeading"
class="flex justify-between items-center w-full"
>
<div class="">
<p
class="flex justify-center items-center dark:text-white font-medium text-base leading-6 lg:leading-4 text-gray-800"
>
<span
class="lg:mr-6 dark:text-white mr-4 lg:text-2xl md:text-xl text-lg leading-6 md:leading-5 lg:leading-4 font-semibold text-gray-800"
>Q2.</span
> How can i find the prices or get other information about
chanel products?
</p>
</div>
<button
aria-label="toggler"
class="focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-800"
data-menu
>
<img
class="transform dark:hidden"
src="https://tuk-cdn.s3.amazonaws.com/can-uploader/faq-8-svg2.svg"
alt="toggler"
/>
<img
class="transform dark:block hidden"
src="https://tuk-cdn.s3.amazonaws.com/can-uploader/faq-8-svg2dark.svg"
alt="toggler"
/>
</button>
</div>
<div id="menu" class="hidden mt-6 w-full">
<p
class="text-base leading-6 text-gray-600 dark:text-gray-300 font-normal"
>
Remember you can query the status of your orders any time in
My orders in the My account section. if you are not
resigered at Mango.com, you can access dierectly in the
Orders section. In this cause, you will have enter your
e-mail address and order number.
</p>
</div>
</div>
<!-- Question 3 -->
<hr class="w-full lg:mt-10 my-8" />
<div class="w-full md:px-6">
<div
id="mainHeading"
class="flex justify-between items-center w-full"
>
<div class="">
<p
class="flex justify-center items-center dark:text-white font-medium text-base leading-6 lg:leading-4 text-gray-800"
>
<span
class="lg:mr-6 dark:text-white mr-4 lg:text-2xl md:text-xl text-lg leading-6 md:leading-5 lg:leading-4 font-semibold text-gray-800"
>Q3.</span
>How many collections come out every year?
</p>
</div>
<button
aria-label="toggler"
class="focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-800"
data-menu
>
<img
class="transform dark:hidden"
src="https://tuk-cdn.s3.amazonaws.com/can-uploader/faq-8-svg2.svg"
alt="toggler"
/>
<img
class="transform dark:block hidden"
src="https://tuk-cdn.s3.amazonaws.com/can-uploader/faq-8-svg2dark.svg"
alt="toggler"
/>
</button>
</div>
<div id="menu" class="hidden mt-6 w-full">
<p
class="text-base leading-6 text-gray-600 dark:text-gray-300 font-normal"
>
Remember you can query the status of your orders any time in
My orders in the My account section. if you are not
resigered at Mango.com, you can access dierectly in the
Orders section. In this cause, you will have enter your
e-mail address and order number.
</p>
</div>
</div>
<hr class="w-full lg:mt-10 my-8" />
</div>
</div>
<script>
let elements = document.querySelectorAll("[data-menu]");
for (let i = 0; i < elements.length; i++) {
let main = elements[i];
main.addEventListener("click", function () {
let element = main.parentElement?.parentElement;
let indicators = main.querySelectorAll("img");
let child = element?.querySelector("#menu");
let h = element?.querySelector("#mainHeading>div>p");
h?.classList.toggle("font-semibold");
child?.classList.toggle("hidden");
// console.log(indicators[0]);
indicators[0].classList.toggle("rotate-180");
});
}
</script>
Q1. How do i know if a product is available in boutiques?
Q2. How can i find the prices or get other information about chanel products?
Q3.How many collections come out every year?