Fix Dropdown Arrow Direction for “Latest New 2025”

[KomatiBhavaniSankar]

PR: Fix Dropdown Arrow Direction for “Latest New 2025” ( fixes #575)

This PR fixes the issue where the dropdown arrow in “Latest New 2025” always pointed up, even when the menu was closed.

What’s Fixed

• Arrow now points down when closed and up when open.

Let me know if any changes are needed. I’m open to suggestions.
Also, I’ll make sure to improve my PR workflow next time; I couldn’t raise the PR earlier as I was out of state. Thank you for assigning me this issue!

[cwhite911]

No changes were made to this file. Please remove it file from the PR.

[KomatiBhavaniSankar]

No changes were made to this file. Please remove it file from the PR.

Yes. I will remove it. Thank you.

[cwhite911]

These libraries are already imported and don' t need to be include here.

[cwhite911]

We don't need this extra Javascript.

[cwhite911]

You can use this without the extra Javascript, and please be careful to maintain the proper indentation. I know it is not great everywhere, but we should at least improve it when we are making a change.

Suggested change

	<a class="d-block h3 text-dark text-decoration-none"
	data-bs-toggle="collapse"
	data-bs-target="#{{ $collapseID }}"
	aria-expanded="{{ if eq $year $currentYear }}true{{ else }}false{{ end }}"
	aria-controls="{{ $collapseID }}">
	<i id="icon-{{ $collapseID }}"
	class="fa-solid {{ if eq $year $currentYear }}fa-chevron-up{{ else }}fa-chevron-down{{ end }} me-2">
	</i>
	{{ $year }}
	</a>
	<a class="d-block h3 text-dark text-decoration-none"
	data-bs-toggle="collapse"
	data-bs-target="#{{ $collapseID }}"
	role="button"
	href="#{{ $collapseID }}"
	aria-expanded="{{ if eq $year $currentYear }}true{{ else }}false{{ end }}"
	aria-controls="{{ $collapseID }}">
	<i
	id="icon-{{ $collapseID }}"
	class="fa-solid fa-chevron-{{ if eq $year $currentYear }}down{{ else }}right{{ end }}">
	</i>
	{{ $year }}
	</a>

[cwhite911]

Suggested change

	<script>
	document.addEventListener("DOMContentLoaded", function () {
	document.querySelectorAll('[data-bs-toggle="collapse"]').forEach(function (toggle) {
	toggle.addEventListener("click", function () {
	const targetId = toggle.getAttribute("data-bs-target");
	const icon = document.querySelector("#icon-" + targetId.replace("#", ""));
	if (!icon) return;
	const target = document.querySelector(targetId);
	target.addEventListener("shown.bs.collapse", function () {
	icon.classList.remove("fa-chevron-down");
	icon.classList.add("fa-chevron-up");
	});
	target.addEventListener("hidden.bs.collapse", function () {
	icon.classList.remove("fa-chevron-up");
	icon.classList.add("fa-chevron-down");
	});
	});
	});
	});
	</script>

[neteler]

Continued in #580