<button type="button" class="rte-expanded-btn" aria-controls="expanded-block" id="rte-area-trigger" data-show-more="Show More" data-show-less="Show Less">Show More</button>
<div class="expanded-rte js-expanded-rte" id="rte-area">
<section class="panel
panel--compact ">
<div class="panel__inner">
<div class="row row--justify-around">
<div class="col col--span-12 col--span-m-8 col--span-l-8 col--span-xl-8">
<h1>Room Units</h1>
<p>To feel good and comfortable in everyday life you need a good indoor climate. Quiet, no draft and with a look that blends in with the environment our diffusers offer just that.</p>
<p>There is a lot of factors that decides what diffuser is right but with our varied offering it's easy to meet the deciding requirements. After meticulous quality testing our diffusers are developed to minimize both the draft and noise while the flexibility still is high enough to fit the current need. With unique constructions it's easier than ever to adjust the spread pattern and design when the environment changes.</p>
<ul>
<li>High comfort, quite and draft free!</li>
<li>Easy customization to the function of the room</li>
<li>Appealing design that fits different environments</li>
<li>High flexibility during installation and placement</li>
</ul>
</div>
</div>
</div>
</section>
</div>
<button type="button" class="rte-expanded-btn" aria-controls="expanded-block" id="{{ rtePanelId }}-trigger" data-show-more="Show More" data-show-less="Show Less">Show More</button>
{{render "@expanded-rte"}}
{
"rtePanelId": "rte-area"
}
import scrollPage from '../../functions/scrollPage';
import getElementPosition from '../../functions/getElementPosition';
const ExpandedRteTrigger = (el) => {
const expandedPanel = el;
const expandedPanelBtn = document.getElementById(el.id + '-trigger');
const init = () => {
expandedPanel.addEventListener('transitionend', (event) => {
if (event.propertyName === 'height' && expandedPanel.clientHeight > 0) {
scrollPage(getElementPosition(expandedPanel));
}
});
expandedPanelBtn.addEventListener('click', () => {
if (expandedPanel.style.height === '') {
expandedPanel.style.height = '100%';
expandedPanelBtn.textContent = expandedPanelBtn.dataset.showLess;
setTimeout(expandedPanel.scrollTo());
} else {
expandedPanel.style.height = '';
expandedPanelBtn.textContent = expandedPanelBtn.dataset.showMore;
}
});
};
init();
};
export default ExpandedRteTrigger;
.rte-expanded-btn {
cursor: pointer;
font-size: 20px;
line-height: 32px;
text-decoration: underline;
margin: 20px 0 0;
&:hover {
text-decoration: none;
}
@include dark-theme {
color: $color-white;
}
}
import ExpandedRteTrigger from './ExpandedRteTrigger';
const els = document.querySelectorAll('.js-expanded-rte');
for (let el of els) {
new ExpandedRteTrigger(el);
}
No notes defined.