const PADDING = 20; const createStyle = () => { const styleElement = document.createElement('style'); styleElement.innerHTML = ` .init { overflow: hidden; transition: all 0.5s ease-out; } .closed { transform: rotate(0); transition: transform 0.3s ease-out; } .closed:hover { fill: "#116dff"; } .active { transform: rotate(45deg); transition: transform 0.3s ease-out; } .active:hover { fill: "#116dff"; } `; return styleElement; }; class AnimationEffect extends HTMLElement { constructor() { super(); this.targetIds = []; } connectedCallback() { const style = createStyle(); document.head.appendChild(style); } show(panel) { panel.style.padding = PADDING; panel.style.maxHeight = panel.scrollHeight + PADDING + "px"; panel.style.marginBottom = PADDING; const svg = panel.parentElement.querySelector('svg'); svg.classList.toggle('active'); } hide(panel) { panel.style.padding = "0px"; panel.style.maxHeight = "0px"; const svg = panel.parentElement.querySelector('svg'); svg.classList.remove('active'); } attributeChangedCallback(prop, oldVal, newValue) { if (prop === 'toggle') { const [targetId] = newValue.split(','); this.targetIds.forEach(id => { const panel = document.getElementById(id); if (id === targetId) { const hasMaxHeight = panel.style.maxHeight !== "0px"; hasMaxHeight ? this.hide(panel) : this.show(panel); } else { this.hide(panel); } }) } if (prop === 'init') { const targetIds = newValue.split(','); this.targetIds = targetIds; targetIds.forEach((target, idx) => { const panel = document.getElementById(target); if (!panel) return; panel.classList.add('init'); panel.style.maxHeight = 0; panel.style.padding = 0; const svg = panel.parentElement.querySelector('svg'); svg.classList.add('closed'); }); } } static get observedAttributes() { return ['init', 'toggle'] } } customElements.define('accordion-animate', AnimationEffect);
top of page

SHARE. COLLABORATE. TAKE ACTION.

JRAN%20v3%20transparent_edited.png

ABOUT US

We are a network of grassroots and charitable organisations working with refugees and asylum seekers in the UK, supported by One-to-One Children's Fund.

 

Find out more.

Discover what JRAN does.

Find out the latest news from JRAN.

Find out who our current members are and how to join us!

News

Ukraine Forum Findings.jpeg
refugees-book.jpg

To play, press and hold the enter key. To stop, release the enter key.

press to zoom
press to zoom
press to zoom
press to zoom
press to zoom
press to zoom
press to zoom
press to zoom
press to zoom
press to zoom
press to zoom
press to zoom
press to zoom
press to zoom
press to zoom
press to zoom
press to zoom
press to zoom
press to zoom
press to zoom
press to zoom
press to zoom
press to zoom
press to zoom
press to zoom
press to zoom
press to zoom
press to zoom
press to zoom
press to zoom
press to zoom
press to zoom
press to zoom
press to zoom
press to zoom
press to zoom
press to zoom
press to zoom
press to zoom
press to zoom
press to zoom
press to zoom
press to zoom
press to zoom
bottom of page