diff --git a/news.html b/news.html
index 4e79f4c..24af8d4 100644
--- a/news.html
+++ b/news.html
@@ -144,13 +144,12 @@
.story-body {
max-height: 0;
overflow: hidden;
- transition: max-height 0.3s cubic-bezier(0, 1, 0, 1);
+ transition: max-height 0.35s ease-in-out;
background: rgba(0, 0, 0, 0.2);
}
.story-card.open .story-body {
- max-height: 3000px; /* high value to guarantee no truncation */
- transition: max-height 0.3s ease-in;
+ /* Transition is controlled dynamically via JS max-height for perfect animations */
}
.story-content {
@@ -289,17 +288,38 @@
});
}
- // Interactive in-place accordion expansion
+ // Interactive in-place accordion expansion with scroll-to-focus
function toggleStory(headerElement) {
const card = headerElement.parentElement;
+ const body = card.querySelector('.story-body');
const isOpen = card.classList.contains('open');
- // Close all other story cards in the same list to keep it neat
- const allCards = card.parentElement.querySelectorAll('.story-card');
- allCards.forEach(c => c.classList.remove('open'));
+ // Close ALL other story cards globally across all categories
+ const allCards = document.querySelectorAll('.story-card');
+ allCards.forEach(c => {
+ if (c !== card) {
+ c.classList.remove('open');
+ const b = c.querySelector('.story-body');
+ if (b) {
+ b.style.maxHeight = '0px';
+ }
+ }
+ });
if (!isOpen) {
card.classList.add('open');
+ if (body) {
+ body.style.maxHeight = body.scrollHeight + 'px';
+ }
+ // Smoothly scroll the newly opened story card to the top of the viewport
+ setTimeout(() => {
+ card.scrollIntoView({ behavior: 'smooth', block: 'start' });
+ }, 100);
+ } else {
+ card.classList.remove('open');
+ if (body) {
+ body.style.maxHeight = '0px';
+ }
}
}