First, create the button, with its onclick handler toggleCoronaData.
|
1 2 3 4 |
<button type="button" id="openCorona" onclick="toggleCoronaData()" class="btn--link site-header__icon"> {% include 'icon-chevron-down' %} <span class="icon__fallback-text">{{ 'layout.navigation.search' | t }}</span> </button> |
Then implement toggleCoronaData.
If its closed, we animate the shifting of the div height, or whatever attribute you want to move.
If its open, we animate the opposite way.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 |
<script> let opened = false; function toggleCoronaData(evt) { let coronaWrapper = document.getElementById('CoronaWrapper'); let btn = document.getElementById('openCorona'); if (!opened) { for (let i = 0; i < 61; i++) { setTimeout( function() { btn.style.transform = 'rotate( ' + i*3 + 'deg)'; coronaWrapper.style.height = (i===60) ? 170 + 'px': 2.85 * i + 'px'; }, 4 * i); } } else { for (let i = 0; i < 61; i++) { setTimeout( function() { btn.style.transform = 'rotate( ' + (180-i*3) + 'deg)'; coronaWrapper.style.height = (i === 60) ? 0 + 'px' : (170 - 2.85 * i) + 'px'; }, 4 * i); } } opened = !opened; } // default, let's open it toggleCoronaData(); </script> |