Uwaga! Wszystkie informacje i solucje zawarte w postach typu DYI mogą z czasem przestać być aktualne. Niektóre publikowane kody źródłowe, będąc zależnymi od używanych konfiguracji platform i sprzętu, mogą nie działać, lub działać nieprawidłowo u niektórych użytkowników. Stosując opisane rozwiązania przyjmujesz do wiadomości i zgadzasz się, że nie ponoszę odpowiedzialności za ich finalne efekty.
– Darku, ale to nie jest dobra koncepcja, żeby ekipę prezentować w formie zakładek. – stwierdziła z namysłem. – To powinno być tak, że wyświetlają się grafiki postaci i ich funkcje tytularne, a po kliknięciu w boks rozwija się szersza informacja o nich. To będzie lepszy sposób, nikt nie będzie się czuł pokrzywdzony.
Zgodziłem się z tą argumentacją po chwili zastanowienia. I wymyśliłem taki koncept:
<div class="content-container">
<center>
<img src="https://www.repro.cam.ac.uk/sites/www.repro.cam.ac.uk/files/images/profile/no-photo.png" alt="" width="100" height="100" class="imgscrap"><br>
<h3>John Doe</h3>
<p>Doktor habilitowany nauk o wszystkim<br>Uniwersytet Trzeciego Wieku</p>
</center>
<div class="additional-content">
<strong>Osiągnięcia:</strong><br><br>
Morbi suscipit cursus augue, sed condimentum nisi dictum eget. Fusce sodales eget diam non faucibus. Nulla dictum luctus leo, vitae pulvinar nunc lobortis aliquam. Aenean risus tortor, scelerisque sed purus non, lobortis tempor odio. Sed in egestas nisl. Donec eget libero vitae risus imperdiet ornare a a est. Donec laoreet tellus non neque volutpat posuere. Etiam eu elit magna. Morbi lacinia, dui et facilisis sodales, dolor risus congue risus, non commodo urna ante nec dui. Suspendisse posuere id nunc quis hendrerit. Aliquam non tortor metus. Nulla ut vestibulum metus, nec laoreet nibh. Ut pellentesque pharetra nibh id facilisis.<br><br>
<strong>Dodatkowe informacje:</strong><br><br>
Morbi suscipit cursus augue, sed condimentum nisi dictum eget. Fusce sodales eget diam non faucibus. Nulla dictum luctus leo, vitae pulvinar nunc lobortis aliquam. Aenean risus tortor, scelerisque sed purus non, lobortis tempor odio. Sed in egestas nisl. Donec eget libero vitae risus imperdiet ornare a a est. Donec laoreet tellus non neque volutpat posuere. Etiam eu elit magna. Morbi lacinia, dui et facilisis sodales, dolor risus congue risus, non commodo urna ante nec dui. Suspendisse posuere id nunc quis hendrerit. Aliquam non tortor metus. Nulla ut vestibulum metus, nec laoreet nibh. Ut pellentesque pharetra nibh id facilisis.
</div>
<div class="centered-toggle">
<div class="toggle-icon" onclick="toggleContent(this)"></div> <!-- Wycentrowana strzałka -->
</div>
</div>
<script>
function toggleContent(element) {
const contentContainer = element.closest('.content-container');
const allContainers = document.querySelectorAll('.content-container');
allContainers.forEach(container => {
if (container !== contentContainer && container.classList.contains('expanded')) {
container.classList.remove('expanded');
}
});
contentContainer.classList.toggle('expanded');
}
</script>
<style>
.content-container {
width: 400px;
padding: 10px;
border: 1px solid #ccc;
border-radius: 8px;
box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
position: relative;
transition: height 0.3s ease;
font-size: 13px;
margin-bottom: 10px;
}
.toggle-icon {
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-top: 10px solid #ee6899;
cursor: pointer;
margin-top: 10px !important;
margin: 0 auto;
}
.content-container.expanded .toggle-icon {
border-top: none;
border-bottom: 10px solid #ee6899;
}
.additional-content {
display: none;
font-size: 13px;
}
.content-container.expanded .additional-content {
display: block;
}
.centered-toggle {
text-align: center;
}
.imgscrap {
width: 194px !important;
height: 194px !important;
border-radius: 50% !important;
border: 6px solid #ee6899 !important;
box-sizing: border-box !important;
}
</style>
Taki kod można z powodzeniem wykorzystać w Elementorze. Wystarczy tylko utworzyć trzykolumnowy „row”, w każdej kolumnie stworzyć sekcję html. Kod CSS wklejamy w edytorze stylów, a JS w sekcji stopki w pluginie „WPCode Lite”. Enjoy!