Как открыть аккордеон плавно и без резких движений?

Для плавного открытия аккордеона можно использовать анимацию или переходы CSS. В HTML-разметке аккордеона можно применить классы и атрибуты, чтобы контролировать его состояние и стиль. Например:

HTML:
```html
<div class="accordion">
  <div class="accordion-item">
    <h3 class="accordion-title">Заголовок 1</h3>
    <div class="accordion-content">
      <p>Содержимое 1</p>
    </div>
  </div>
  <div class="accordion-item">
    <h3 class="accordion-title">Заголовок 2</h3>
    <div class="accordion-content">
      <p>Содержимое 2</p>
    </div>
  </div>
</div>
```

CSS:
```css
.accordion-item {
  overflow: hidden;
}

.accordion-title {
  cursor: pointer;
}

.accordion-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease; /* добавляем анимацию перехода */
}

.accordion-content.show {
  max-height: 500px; /* устанавливаем значение высоты для плавного раскрытия */
}
```

JavaScript (если нужно программно управлять аккордеоном):
```javascript
document.addEventListener('DOMContentLoaded', function() {
  var accordionItems = document.querySelectorAll('.accordion-item');
  
  accordionItems.forEach(function(item) {
    var title = item.querySelector('.accordion-title');
    var content = item.querySelector('.accordion-content');
    
    title.addEventListener('click', function() {
      content.classList.toggle('show');
    });
  });
});
```

При клике на заголовок аккордеона, класс "show" применяется к элементу содержимого, что позволяет ему плавно открываться и закрываться с использованием анимации перехода. Высота контента изменяется плавно благодаря свойству "transition" в CSS.

const details = document.querySelector('details');

details.addEventListener('click', (e)=> {
  e.preventDefault();
  // .... оставшаяся часть кода
}); 

 const details = document.querySelector('details'); 

 details.addEventListener('click', (e)=> { 

 e.preventDefault(); 

 //....rest code 

 })