Flip-cards на IOS устройствах. Текст бликует при закрытии карточки
Всем привет! У меня такая проблема. Я создал флип-кард. При нажатии на карточку она переворачивается. Есть сразу несколько карточек. Есть открытая карта и при нажатии на другую закрытую карту открытая закрывается. НО прикол в том что на IOS устройствах при закрытии карточки другой текст на ней бликует и потом только карточка переворачивается.
Пример вот тут: https://infallible-mcnulty-5e21fc.netlify.app/ (в самой нижней части сайта есть 12 карточек (FAQ)).
В хроме на андроиде и на десктоп версии работает норм. А на IOS не работает.
<div class="faq" id="faq">
<div class="swiper-container" id="swiper-faq">
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="element-card" id="elm-card">
<div class="front-facing">
<p>Что можно и что нельзя делать на самокате.</p>
<svg width="58" height="92" viewBox="0 0 58 92" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path opacity="0.1"
d="M16.6487 52.816C16.6487 50.6667 17.3514 48.8893 18.7567 47.484C20.1621 45.996 21.9394 45.252 24.0887 45.252C27.4781 45.252 30.5367 44.756 33.2647 43.764C35.9927 42.6893 38.142 40.9947 39.7127 38.68C41.3661 36.3653 42.1927 33.3067 42.1927 29.504C42.1927 26.6933 41.49 24.2133 40.0847 22.064C38.7621 19.9147 36.9021 18.22 34.5047 16.98C32.19 15.74 29.5447 15.12 26.5687 15.12C24.2541 15.12 22.0634 15.5333 19.9967 16.36C18.0127 17.1867 16.194 18.3027 14.5407 19.708C13.2181 20.8653 11.606 21.7333 9.70472 22.312C7.88605 22.808 6.02605 22.3533 4.12472 20.948C2.14072 19.46 1.06605 17.6827 0.900716 15.616C0.735382 13.5493 1.52072 11.648 3.25672 9.91198C6.23272 6.85332 9.70472 4.49732 13.6727 2.84399C17.7234 1.10799 22.0221 0.23999 26.5687 0.23999C32.2727 0.23999 37.398 1.56266 41.9447 4.20799C46.5741 6.77066 50.2527 10.2427 52.9807 14.624C55.7087 19.0053 57.0727 23.9653 57.0727 29.504C57.0727 33.6373 56.4527 37.316 55.2127 40.54C53.9727 43.6813 52.1954 46.4093 49.8807 48.724C47.6487 50.956 45.0034 52.7747 41.9447 54.18C38.9687 55.5027 35.7034 56.4533 32.1487 57.032C31.9834 57.1147 31.818 57.1973 31.6527 57.28C31.57 57.3627 31.5287 57.4867 31.5287 57.652V62.24C31.5287 64.3893 30.8261 66.208 29.4207 67.696C28.0154 69.1013 26.2381 69.804 24.0887 69.804C21.9394 69.804 20.1621 69.1013 18.7567 67.696C17.3514 66.208 16.6487 64.3893 16.6487 62.24V52.816ZM23.4687 92C21.0714 92 19.2114 91.38 17.8887 90.14C16.6487 88.8173 16.0287 86.9573 16.0287 84.56V82.452C16.0287 80.0547 16.6487 78.236 17.8887 76.996C19.2114 75.6733 21.0714 75.012 23.4687 75.012H25.0807C27.4781 75.012 29.2967 75.6733 30.5367 76.996C31.8594 78.236 32.5207 80.0547 32.5207 82.452V84.56C32.5207 86.9573 31.8594 88.8173 30.5367 90.14C29.2967 91.38 27.4781 92 25.0807 92H23.4687Z"
fill="#62505E" />
</svg>
</div>
<div class="back-facing">
<div class="d-none fs-20">
<p>
Lorem ipsum dolor sit amet. Lorem ipsum dolor sit. Lorem, ipsum dolor sit amet.
</p>
<svg width="58" height="92" viewBox="0 0 58 92" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path opacity="0.1"
d="M16.6487 52.816C16.6487 50.6667 17.3514 48.8893 18.7567 47.484C20.1621 45.996 21.9394 45.252 24.0887 45.252C27.4781 45.252 30.5367 44.756 33.2647 43.764C35.9927 42.6893 38.142 40.9947 39.7127 38.68C41.3661 36.3653 42.1927 33.3067 42.1927 29.504C42.1927 26.6933 41.49 24.2133 40.0847 22.064C38.7621 19.9147 36.9021 18.22 34.5047 16.98C32.19 15.74 29.5447 15.12 26.5687 15.12C24.2541 15.12 22.0634 15.5333 19.9967 16.36C18.0127 17.1867 16.194 18.3027 14.5407 19.708C13.2181 20.8653 11.606 21.7333 9.70472 22.312C7.88605 22.808 6.02605 22.3533 4.12472 20.948C2.14072 19.46 1.06605 17.6827 0.900716 15.616C0.735382 13.5493 1.52072 11.648 3.25672 9.91198C6.23272 6.85332 9.70472 4.49732 13.6727 2.84399C17.7234 1.10799 22.0221 0.23999 26.5687 0.23999C32.2727 0.23999 37.398 1.56266 41.9447 4.20799C46.5741 6.77066 50.2527 10.2427 52.9807 14.624C55.7087 19.0053 57.0727 23.9653 57.0727 29.504C57.0727 33.6373 56.4527 37.316 55.2127 40.54C53.9727 43.6813 52.1954 46.4093 49.8807 48.724C47.6487 50.956 45.0034 52.7747 41.9447 54.18C38.9687 55.5027 35.7034 56.4533 32.1487 57.032C31.9834 57.1147 31.818 57.1973 31.6527 57.28C31.57 57.3627 31.5287 57.4867 31.5287 57.652V62.24C31.5287 64.3893 30.8261 66.208 29.4207 67.696C28.0154 69.1013 26.2381 69.804 24.0887 69.804C21.9394 69.804 20.1621 69.1013 18.7567 67.696C17.3514 66.208 16.6487 64.3893 16.6487 62.24V52.816ZM23.4687 92C21.0714 92 19.2114 91.38 17.8887 90.14C16.6487 88.8173 16.0287 86.9573 16.0287 84.56V82.452C16.0287 80.0547 16.6487 78.236 17.8887 76.996C19.2114 75.6733 21.0714 75.012 23.4687 75.012H25.0807C27.4781 75.012 29.2967 75.6733 30.5367 76.996C31.8594 78.236 32.5207 80.0547 32.5207 82.452V84.56C32.5207 86.9573 31.8594 88.8173 30.5367 90.14C29.2967 91.38 27.4781 92 25.0807 92H23.4687Z"
fill="#62505E" />
</svg>
<div class="link-div pt-3" id="link-div">
<a class="flip-link " href="/faq1.html">-Daha ətraflı</a>
</div>
</div>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="element-card" id="elm-card">
<div class="front-facing">
<p>Что можно и что нельзя делать на самокате.</p>
<svg width="58" height="92" viewBox="0 0 58 92" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path opacity="0.1"
d="M16.6487 52.816C16.6487 50.6667 17.3514 48.8893 18.7567 47.484C20.1621 45.996 21.9394 45.252 24.0887 45.252C27.4781 45.252 30.5367 44.756 33.2647 43.764C35.9927 42.6893 38.142 40.9947 39.7127 38.68C41.3661 36.3653 42.1927 33.3067 42.1927 29.504C42.1927 26.6933 41.49 24.2133 40.0847 22.064C38.7621 19.9147 36.9021 18.22 34.5047 16.98C32.19 15.74 29.5447 15.12 26.5687 15.12C24.2541 15.12 22.0634 15.5333 19.9967 16.36C18.0127 17.1867 16.194 18.3027 14.5407 19.708C13.2181 20.8653 11.606 21.7333 9.70472 22.312C7.88605 22.808 6.02605 22.3533 4.12472 20.948C2.14072 19.46 1.06605 17.6827 0.900716 15.616C0.735382 13.5493 1.52072 11.648 3.25672 9.91198C6.23272 6.85332 9.70472 4.49732 13.6727 2.84399C17.7234 1.10799 22.0221 0.23999 26.5687 0.23999C32.2727 0.23999 37.398 1.56266 41.9447 4.20799C46.5741 6.77066 50.2527 10.2427 52.9807 14.624C55.7087 19.0053 57.0727 23.9653 57.0727 29.504C57.0727 33.6373 56.4527 37.316 55.2127 40.54C53.9727 43.6813 52.1954 46.4093 49.8807 48.724C47.6487 50.956 45.0034 52.7747 41.9447 54.18C38.9687 55.5027 35.7034 56.4533 32.1487 57.032C31.9834 57.1147 31.818 57.1973 31.6527 57.28C31.57 57.3627 31.5287 57.4867 31.5287 57.652V62.24C31.5287 64.3893 30.8261 66.208 29.4207 67.696C28.0154 69.1013 26.2381 69.804 24.0887 69.804C21.9394 69.804 20.1621 69.1013 18.7567 67.696C17.3514 66.208 16.6487 64.3893 16.6487 62.24V52.816ZM23.4687 92C21.0714 92 19.2114 91.38 17.8887 90.14C16.6487 88.8173 16.0287 86.9573 16.0287 84.56V82.452C16.0287 80.0547 16.6487 78.236 17.8887 76.996C19.2114 75.6733 21.0714 75.012 23.4687 75.012H25.0807C27.4781 75.012 29.2967 75.6733 30.5367 76.996C31.8594 78.236 32.5207 80.0547 32.5207 82.452V84.56C32.5207 86.9573 31.8594 88.8173 30.5367 90.14C29.2967 91.38 27.4781 92 25.0807 92H23.4687Z"
fill="#62505E" />
</svg>
</div>
<div class="back-facing">
<div class="d-none fs-20">
<p>
Lorem ipsum dolor sit amet. Lorem ipsum dolor sit. Lorem, ipsum dolor sit amet.
</p>
<svg width="58" height="92" viewBox="0 0 58 92" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path opacity="0.1"
d="M16.6487 52.816C16.6487 50.6667 17.3514 48.8893 18.7567 47.484C20.1621 45.996 21.9394 45.252 24.0887 45.252C27.4781 45.252 30.5367 44.756 33.2647 43.764C35.9927 42.6893 38.142 40.9947 39.7127 38.68C41.3661 36.3653 42.1927 33.3067 42.1927 29.504C42.1927 26.6933 41.49 24.2133 40.0847 22.064C38.7621 19.9147 36.9021 18.22 34.5047 16.98C32.19 15.74 29.5447 15.12 26.5687 15.12C24.2541 15.12 22.0634 15.5333 19.9967 16.36C18.0127 17.1867 16.194 18.3027 14.5407 19.708C13.2181 20.8653 11.606 21.7333 9.70472 22.312C7.88605 22.808 6.02605 22.3533 4.12472 20.948C2.14072 19.46 1.06605 17.6827 0.900716 15.616C0.735382 13.5493 1.52072 11.648 3.25672 9.91198C6.23272 6.85332 9.70472 4.49732 13.6727 2.84399C17.7234 1.10799 22.0221 0.23999 26.5687 0.23999C32.2727 0.23999 37.398 1.56266 41.9447 4.20799C46.5741 6.77066 50.2527 10.2427 52.9807 14.624C55.7087 19.0053 57.0727 23.9653 57.0727 29.504C57.0727 33.6373 56.4527 37.316 55.2127 40.54C53.9727 43.6813 52.1954 46.4093 49.8807 48.724C47.6487 50.956 45.0034 52.7747 41.9447 54.18C38.9687 55.5027 35.7034 56.4533 32.1487 57.032C31.9834 57.1147 31.818 57.1973 31.6527 57.28C31.57 57.3627 31.5287 57.4867 31.5287 57.652V62.24C31.5287 64.3893 30.8261 66.208 29.4207 67.696C28.0154 69.1013 26.2381 69.804 24.0887 69.804C21.9394 69.804 20.1621 69.1013 18.7567 67.696C17.3514 66.208 16.6487 64.3893 16.6487 62.24V52.816ZM23.4687 92C21.0714 92 19.2114 91.38 17.8887 90.14C16.6487 88.8173 16.0287 86.9573 16.0287 84.56V82.452C16.0287 80.0547 16.6487 78.236 17.8887 76.996C19.2114 75.6733 21.0714 75.012 23.4687 75.012H25.0807C27.4781 75.012 29.2967 75.6733 30.5367 76.996C31.8594 78.236 32.5207 80.0547 32.5207 82.452V84.56C32.5207 86.9573 31.8594 88.8173 30.5367 90.14C29.2967 91.38 27.4781 92 25.0807 92H23.4687Z"
fill="#62505E" />
</svg>
<div class="link-div pt-3" id="link-div">
<a class="flip-link " href="/faq1.html">-Daha ətraflı</a>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Add Pagination -->
<div class="swiper-pagination"></div>
</div>
<div class="container">
<div class="row">
<div class="col">
<div class="faq-cards">
<div class="element-card">
<div class="front-facing">
<p>Что можно и что нельзя делать на самокате.</p>
<svg width="58" height="92" viewBox="0 0 58 92" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path opacity="0.1"
d="M16.6487 52.816C16.6487 50.6667 17.3514 48.8893 18.7567 47.484C20.1621 45.996 21.9394 45.252 24.0887 45.252C27.4781 45.252 30.5367 44.756 33.2647 43.764C35.9927 42.6893 38.142 40.9947 39.7127 38.68C41.3661 36.3653 42.1927 33.3067 42.1927 29.504C42.1927 26.6933 41.49 24.2133 40.0847 22.064C38.7621 19.9147 36.9021 18.22 34.5047 16.98C32.19 15.74 29.5447 15.12 26.5687 15.12C24.2541 15.12 22.0634 15.5333 19.9967 16.36C18.0127 17.1867 16.194 18.3027 14.5407 19.708C13.2181 20.8653 11.606 21.7333 9.70472 22.312C7.88605 22.808 6.02605 22.3533 4.12472 20.948C2.14072 19.46 1.06605 17.6827 0.900716 15.616C0.735382 13.5493 1.52072 11.648 3.25672 9.91198C6.23272 6.85332 9.70472 4.49732 13.6727 2.84399C17.7234 1.10799 22.0221 0.23999 26.5687 0.23999C32.2727 0.23999 37.398 1.56266 41.9447 4.20799C46.5741 6.77066 50.2527 10.2427 52.9807 14.624C55.7087 19.0053 57.0727 23.9653 57.0727 29.504C57.0727 33.6373 56.4527 37.316 55.2127 40.54C53.9727 43.6813 52.1954 46.4093 49.8807 48.724C47.6487 50.956 45.0034 52.7747 41.9447 54.18C38.9687 55.5027 35.7034 56.4533 32.1487 57.032C31.9834 57.1147 31.818 57.1973 31.6527 57.28C31.57 57.3627 31.5287 57.4867 31.5287 57.652V62.24C31.5287 64.3893 30.8261 66.208 29.4207 67.696C28.0154 69.1013 26.2381 69.804 24.0887 69.804C21.9394 69.804 20.1621 69.1013 18.7567 67.696C17.3514 66.208 16.6487 64.3893 16.6487 62.24V52.816ZM23.4687 92C21.0714 92 19.2114 91.38 17.8887 90.14C16.6487 88.8173 16.0287 86.9573 16.0287 84.56V82.452C16.0287 80.0547 16.6487 78.236 17.8887 76.996C19.2114 75.6733 21.0714 75.012 23.4687 75.012H25.0807C27.4781 75.012 29.2967 75.6733 30.5367 76.996C31.8594 78.236 32.5207 80.0547 32.5207 82.452V84.56C32.5207 86.9573 31.8594 88.8173 30.5367 90.14C29.2967 91.38 27.4781 92 25.0807 92H23.4687Z"
fill="#62505E" />
</svg>
</div>
<div class="back-facing py-5 d-none">
<p>
Lorem ipsum dolor sit amet. Lorem ipsum dolor sit. Lorem, ipsum dolor sit amet.
</p>
<svg width="58" height="92" viewBox="0 0 58 92" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path opacity="0.1"
d="M16.6487 52.816C16.6487 50.6667 17.3514 48.8893 18.7567 47.484C20.1621 45.996 21.9394 45.252 24.0887 45.252C27.4781 45.252 30.5367 44.756 33.2647 43.764C35.9927 42.6893 38.142 40.9947 39.7127 38.68C41.3661 36.3653 42.1927 33.3067 42.1927 29.504C42.1927 26.6933 41.49 24.2133 40.0847 22.064C38.7621 19.9147 36.9021 18.22 34.5047 16.98C32.19 15.74 29.5447 15.12 26.5687 15.12C24.2541 15.12 22.0634 15.5333 19.9967 16.36C18.0127 17.1867 16.194 18.3027 14.5407 19.708C13.2181 20.8653 11.606 21.7333 9.70472 22.312C7.88605 22.808 6.02605 22.3533 4.12472 20.948C2.14072 19.46 1.06605 17.6827 0.900716 15.616C0.735382 13.5493 1.52072 11.648 3.25672 9.91198C6.23272 6.85332 9.70472 4.49732 13.6727 2.84399C17.7234 1.10799 22.0221 0.23999 26.5687 0.23999C32.2727 0.23999 37.398 1.56266 41.9447 4.20799C46.5741 6.77066 50.2527 10.2427 52.9807 14.624C55.7087 19.0053 57.0727 23.9653 57.0727 29.504C57.0727 33.6373 56.4527 37.316 55.2127 40.54C53.9727 43.6813 52.1954 46.4093 49.8807 48.724C47.6487 50.956 45.0034 52.7747 41.9447 54.18C38.9687 55.5027 35.7034 56.4533 32.1487 57.032C31.9834 57.1147 31.818 57.1973 31.6527 57.28C31.57 57.3627 31.5287 57.4867 31.5287 57.652V62.24C31.5287 64.3893 30.8261 66.208 29.4207 67.696C28.0154 69.1013 26.2381 69.804 24.0887 69.804C21.9394 69.804 20.1621 69.1013 18.7567 67.696C17.3514 66.208 16.6487 64.3893 16.6487 62.24V52.816ZM23.4687 92C21.0714 92 19.2114 91.38 17.8887 90.14C16.6487 88.8173 16.0287 86.9573 16.0287 84.56V82.452C16.0287 80.0547 16.6487 78.236 17.8887 76.996C19.2114 75.6733 21.0714 75.012 23.4687 75.012H25.0807C27.4781 75.012 29.2967 75.6733 30.5367 76.996C31.8594 78.236 32.5207 80.0547 32.5207 82.452V84.56C32.5207 86.9573 31.8594 88.8173 30.5367 90.14C29.2967 91.38 27.4781 92 25.0807 92H23.4687Z"
fill="#62505E" />
</svg>
<div class="link-div pt-3">
<a id="flip-link" href="/faq1.html">-Daha ətraflı</a>
</div>
</div>
</div>
<div class="element-card">
<div class="front-facing">
<p>Что можно и что нельзя делать на самокате.</p>
<svg width="58" height="92" viewBox="0 0 58 92" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path opacity="0.1"
d="M16.6487 52.816C16.6487 50.6667 17.3514 48.8893 18.7567 47.484C20.1621 45.996 21.9394 45.252 24.0887 45.252C27.4781 45.252 30.5367 44.756 33.2647 43.764C35.9927 42.6893 38.142 40.9947 39.7127 38.68C41.3661 36.3653 42.1927 33.3067 42.1927 29.504C42.1927 26.6933 41.49 24.2133 40.0847 22.064C38.7621 19.9147 36.9021 18.22 34.5047 16.98C32.19 15.74 29.5447 15.12 26.5687 15.12C24.2541 15.12 22.0634 15.5333 19.9967 16.36C18.0127 17.1867 16.194 18.3027 14.5407 19.708C13.2181 20.8653 11.606 21.7333 9.70472 22.312C7.88605 22.808 6.02605 22.3533 4.12472 20.948C2.14072 19.46 1.06605 17.6827 0.900716 15.616C0.735382 13.5493 1.52072 11.648 3.25672 9.91198C6.23272 6.85332 9.70472 4.49732 13.6727 2.84399C17.7234 1.10799 22.0221 0.23999 26.5687 0.23999C32.2727 0.23999 37.398 1.56266 41.9447 4.20799C46.5741 6.77066 50.2527 10.2427 52.9807 14.624C55.7087 19.0053 57.0727 23.9653 57.0727 29.504C57.0727 33.6373 56.4527 37.316 55.2127 40.54C53.9727 43.6813 52.1954 46.4093 49.8807 48.724C47.6487 50.956 45.0034 52.7747 41.9447 54.18C38.9687 55.5027 35.7034 56.4533 32.1487 57.032C31.9834 57.1147 31.818 57.1973 31.6527 57.28C31.57 57.3627 31.5287 57.4867 31.5287 57.652V62.24C31.5287 64.3893 30.8261 66.208 29.4207 67.696C28.0154 69.1013 26.2381 69.804 24.0887 69.804C21.9394 69.804 20.1621 69.1013 18.7567 67.696C17.3514 66.208 16.6487 64.3893 16.6487 62.24V52.816ZM23.4687 92C21.0714 92 19.2114 91.38 17.8887 90.14C16.6487 88.8173 16.0287 86.9573 16.0287 84.56V82.452C16.0287 80.0547 16.6487 78.236 17.8887 76.996C19.2114 75.6733 21.0714 75.012 23.4687 75.012H25.0807C27.4781 75.012 29.2967 75.6733 30.5367 76.996C31.8594 78.236 32.5207 80.0547 32.5207 82.452V84.56C32.5207 86.9573 31.8594 88.8173 30.5367 90.14C29.2967 91.38 27.4781 92 25.0807 92H23.4687Z"
fill="#62505E" />
</svg>
</div>
<div class="back-facing py-5 d-none">
<p>
Lorem ipsum dolor sit amet. Lorem ipsum dolor sit. Lorem, ipsum dolor sit amet.
</p>
<svg width="58" height="92" viewBox="0 0 58 92" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path opacity="0.1"
d="M16.6487 52.816C16.6487 50.6667 17.3514 48.8893 18.7567 47.484C20.1621 45.996 21.9394 45.252 24.0887 45.252C27.4781 45.252 30.5367 44.756 33.2647 43.764C35.9927 42.6893 38.142 40.9947 39.7127 38.68C41.3661 36.3653 42.1927 33.3067 42.1927 29.504C42.1927 26.6933 41.49 24.2133 40.0847 22.064C38.7621 19.9147 36.9021 18.22 34.5047 16.98C32.19 15.74 29.5447 15.12 26.5687 15.12C24.2541 15.12 22.0634 15.5333 19.9967 16.36C18.0127 17.1867 16.194 18.3027 14.5407 19.708C13.2181 20.8653 11.606 21.7333 9.70472 22.312C7.88605 22.808 6.02605 22.3533 4.12472 20.948C2.14072 19.46 1.06605 17.6827 0.900716 15.616C0.735382 13.5493 1.52072 11.648 3.25672 9.91198C6.23272 6.85332 9.70472 4.49732 13.6727 2.84399C17.7234 1.10799 22.0221 0.23999 26.5687 0.23999C32.2727 0.23999 37.398 1.56266 41.9447 4.20799C46.5741 6.77066 50.2527 10.2427 52.9807 14.624C55.7087 19.0053 57.0727 23.9653 57.0727 29.504C57.0727 33.6373 56.4527 37.316 55.2127 40.54C53.9727 43.6813 52.1954 46.4093 49.8807 48.724C47.6487 50.956 45.0034 52.7747 41.9447 54.18C38.9687 55.5027 35.7034 56.4533 32.1487 57.032C31.9834 57.1147 31.818 57.1973 31.6527 57.28C31.57 57.3627 31.5287 57.4867 31.5287 57.652V62.24C31.5287 64.3893 30.8261 66.208 29.4207 67.696C28.0154 69.1013 26.2381 69.804 24.0887 69.804C21.9394 69.804 20.1621 69.1013 18.7567 67.696C17.3514 66.208 16.6487 64.3893 16.6487 62.24V52.816ZM23.4687 92C21.0714 92 19.2114 91.38 17.8887 90.14C16.6487 88.8173 16.0287 86.9573 16.0287 84.56V82.452C16.0287 80.0547 16.6487 78.236 17.8887 76.996C19.2114 75.6733 21.0714 75.012 23.4687 75.012H25.0807C27.4781 75.012 29.2967 75.6733 30.5367 76.996C31.8594 78.236 32.5207 80.0547 32.5207 82.452V84.56C32.5207 86.9573 31.8594 88.8173 30.5367 90.14C29.2967 91.38 27.4781 92 25.0807 92H23.4687Z"
fill="#62505E" />
</svg>
<div class="link-div pt-3">
<a id="flip-link" href="/faq1.html">-Daha ətraflı</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
CSS
.faq {
display: flex;
justify-content: center;
flex-direction: column;
padding-top: 5rem;
padding-bottom: 10rem;
background-color: $bg-color;
.element-card {
background-color: white;
width: 100%;
height: 190px;
border-radius: 8px;
color: $jblack;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin-bottom: 2rem;
transform-style: preserve-3d;
transform: rotatey(0deg) translatex(0px) translatey(0px);
-webkit-transform: rotatey(0deg) translatex(0px) translatey(0px);
transition: 0.3s;
-webkit-transition: 0.3s;
-webkit-transition-duration: 0.3s;
cursor: pointer;
border-radius: 8px;
&.open {
transform: rotatey(-180deg) translatex(0px) translatey(0px);
-webkit-transform: rotatey(-180deg) translatex(0px) translatey(0px);
}
&:hover {
background-color: $primary-color;
margin-top: -15px;
}
.front-facing {
transform: rotateY( 0deg ) translateZ( 2px );
-webkit-transform: rotateY( 0deg ) translateZ( 2px );
&:hover {
svg {
display: flex;
}
}
p {
font-size: 0.9em;
font-weight: bold;
padding: 17px;
z-index: 2;
margin-bottom: 0rem;
}
svg {
z-index: 1;
position: absolute;
top: 0rem;
left: 4.5rem;
display: none;
}
}
.back-facing {
transform: rotateY( 180deg ) translateZ( 0px );
-webkit-transform: rotateY( 180deg ) translateZ( 0px );
display: flex;
flex-direction: column;
flex-wrap: nowrap;
justify-content: space-evenly;
align-items: flex-start;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
border-radius: 8px;
padding: 17px;
//overflow: hidden;
//transition: 0.3s;
p {
text-align: left;
display: flex;
font-size: 0.9em;
font-weight: bold;
z-index: 2;
margin-bottom: 0rem;
}
svg {
z-index: 1;
position: absolute;
top: 1.5rem;
left: 4.5rem;
display: none;
}
div {
display: flex;
justify-content: flex-end;
width: 100%;
a {
color: #333333;
font-weight: 600;
&:hover {
text-decoration: underline;
}
}
}
}
}
.faq-cards {
display: grid;
grid-column-gap: 20px;
grid-template-columns: repeat(6, 1fr);
grid-template-rows: repeat(1fr);
}
#swiper-faq {
display: none;
}
a {
text-decoration: none;
color: $jblack;
}
.faq_card:hover {
transform: translate(0px, -10px);
transition: 0.3s;
filter: drop-shadow(0px 16px 30px rgba(250, 179, 24, 0.25));
background-color: $primary-color;
cursor: pointer;
svg {
display: flex;
}
}
Jquery
$(document).ready(function(){
$('.element-card').on('click', function(){
if ( $(this).hasClass('open') ) {
$(this).removeClass('open');
$('.fs-20').removeClass("d-block").addClass("d-none");
} else {
$('.element-card').removeClass('open');
$(this).addClass('open');
$('.fs-20').removeClass("d-none").addClass("d-block");
}
});
});