Loading
Челик 2
Работает так себе, но человек хороший
Описание аккордеона
Крутой челик, хорошо работает
Заголовок аккордеона
Челик 1
Krons astrosåning hivis. Neopatologi dir alltså byhår. Tok okaska.
Lörem ipsum pren ången dågt donar. Pixlig pseudor plagenade. Kadat. Presk dedade.
Bev tevis när dorar.
Stereotris tiprerat, inte pres dost fanat.
Jobbstopparpolitik tilov. Megahijånat krorade avis asam.
Dison pneumameter, zorra ifall spenäck dekaspevis. Entologi nyråssa. Spim råvis.
Jåsm öråd.
Milig stenost torggängare utan terastik.
Lådvinsalkoholism poras i lar nönilig. Benikana näbagt i bende den ev, att pyheten. Lande bet ben att jåsamma, vabel.
Stereotris tiprerat, inte pres dost fanat. Desstik rögt.
Челик 2
Описание аккордеона
Заголовок аккордеона
Челик 1
Инструкция
(скрыть)
  1. Панель со стрелкой и аватарками помести в отдельный зеро-блок. Аватаркам задай класс avatar, описанию — avatar__description, а стрелке — arrow.
  2. Контент, который должен скрывать можно поместить в один блок, а можно сделать несколько.
  3. Заменить в коде при необходимости коэффициент увеличения и указать свои ID блоков.
Один аккордеон - одна строчка, title - id блока с аватарками, content - скрываемые блоки перечисляемые через запятую. Если нужен второй аккордеон, то нужно скопировать строку в фигурных скобках, поставить в конце первой строки запятую и скопированную строку вставить ниже.

const accordionContent = [
      {title: "#rec431859696", content: '#rec431863556, #rec431907827'},
      {title: "#rec431859696", content: '#rec431863556'}
];


Если не работает

1. Проверь, правильно ли указаны классы элементам.

2. Открой консоль Ctrl + Shift + I → Console (на продукции Apple попробуй Command + Option + I) и посмотри ошибки. Иногда, код отображается в редакторе с ошибками, в таком случае ее можно будет там увидеть. Если не хватает каких-то скобок, то их нужно проставить.

3. Скинь мне ссылку на страницу.
<!--Code by Fedyaeva-->
<style>
    :root {--scale: 1.2;}
    .accordion__title {position: relative; cursor: pointer;} 
    .accordion__content {transition: all 0.5s ease;}
</style>
<script>
document.addEventListener("DOMContentLoaded",function(){
const accordionContent = [
    {title: "#rec431859696", content: '#rec431863556, #rec431907827'},
    {title: "#rec431909378", content: '#rec431909550'}
];

let wrapper,contentWrapper;let slideUp=(target,duration=500)=>{target.style.transitionProperty='height, margin, padding';target.style.transitionDuration=duration+'ms';target.style.boxSizing='border-box';target.style.height=target.offsetHeight+'px';target.offsetHeight;target.style.overflow='hidden';target.style.height=0;target.style.paddingTop=0;target.style.paddingBottom=0;target.style.marginTop=0;target.style.marginBottom=0;window.setTimeout(()=>{target.style.display='none';target.style.removeProperty('height');target.style.removeProperty('padding-top');target.style.removeProperty('padding-bottom');target.style.removeProperty('margin-top');target.style.removeProperty('margin-bottom');target.style.removeProperty('overflow');target.style.removeProperty('transition-duration');target.style.removeProperty('transition-property')},duration)}
let slideDown=(target,duration=500)=>{target.style.removeProperty('display');let display=window.getComputedStyle(target).display;if(display==='none')
display='block';target.style.display=display;let height=target.offsetHeight;target.style.overflow='hidden';target.style.height=0;target.style.paddingTop=0;target.style.paddingBottom=0;target.style.marginTop=0;target.style.marginBottom=0;target.offsetHeight;target.style.boxSizing='border-box';target.style.transitionProperty="height, margin, padding";target.style.transitionDuration=duration+'ms';target.style.height=height+'px';target.style.removeProperty('padding-top');target.style.removeProperty('padding-bottom');target.style.removeProperty('margin-top');target.style.removeProperty('margin-bottom');window.setTimeout(()=>{target.style.removeProperty('height');target.style.removeProperty('overflow');target.style.removeProperty('transition-duration');target.style.removeProperty('transition-property')},duration)}
let slideToggle=(target,duration=500)=>{if(window.getComputedStyle(target).display==='none'){return slideDown(target,duration)}else{return slideUp(target,duration)}}
function addAccordeon(){for(let i=0;i<accordionContent.length;i+=1){let titleID=accordionContent[i].title,contentID=accordionContent[i].content;let titleBlock,contentBlock;wrapper=document.createElement('div');wrapper.setAttribute('class','accordion__item');contentWrapper=document.createElement('div');contentWrapper.setAttribute('class','accordion__content');titleBlock=document.querySelector(titleID);titleBlock.classList.add('accordion__title');titleBlock.parentNode.insertBefore(wrapper,titleBlock);wrapper.appendChild(titleBlock);contentBlock=document.querySelectorAll(contentID);contentBlock.forEach((el)=>contentWrapper.appendChild(el));wrapper.appendChild(contentWrapper)}
let accordionTitle=document.querySelectorAll('.accordion__title');let accordionContentBlock=document.querySelectorAll('.accordion__content');accordionContentBlock.forEach(e=>slideUp(e,5));accordionTitle.forEach((el)=>{el.addEventListener('click',function(){let tg=event.target.closest('.accordion__title').nextElementSibling;accordionContentBlock.forEach(e=>{if(e!=event.target.closest('.accordion__title').nextElementSibling){slideUp(e,5)}});event.target.closest('.accordion__title').classList.toggle('accordion__title--active');slideToggle(tg,500)})})}
addAccordeon();
});
</script>
Made on
Tilda