Elementor – Dodatkowy guzik „x” na dole przy rozwiniętym akordeonie.

14 kwietnia, 2023
3:44 pm

Aby dodać przycisk „x” do widżetu akordeonu w Elementorze i umożliwić jego zamknięcie, można dodać niestandardowy kod JavaScript/jQuery i CSS do strony. Oto sposób, aby to zrobić globalnie dla wszystkich akordeonów na podstronach:

Zaloguj się do swojego panelu administracyjnego WordPress.
Przejdź do „Wygląd” > „Edytor motywów” (lub „Edytor kodu”, w zależności od motywu).
Znajdź plik footer.php w strukturze plików po lewej stronie i kliknij go, aby go edytować.
Dodaj poniższy kod przed znacznikiem </body>:



<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha384-KyZXEAg3QhqLMpG8r+Knujsl5/6en8XCp+HHAAK5GSLf2xlYtvJ8U2Q4U+9cuEnJoa3" crossorigin="anonymous"></script>
<script>
jQuery(document).ready(function($) {
  // Dodaj przycisk zamykania do każdego akordeonu w Elementorze
  $('.elementor-widget-accordion .elementor-tab-content').append('<button class="accordion-close-button">x</button>');

  // Zamknij akordeon po kliknięciu na przycisk zamykania
  $('.accordion-close-button').on('click', function() {
    $(this).closest('.elementor-accordion-item').find('.elementor-tab-title').trigger('click');
  });
});
</script>
<style>
.accordion-close-button {
  position: absolute;
  bottom: 10px;
  right: 10px;
  background-color: #f1f1f1;
  color: #333;
  border: none;
  padding: 5px 10px;
  border-radius: 3px;
  font-size: 14px;
  cursor: pointer;
}

.accordion-close-button:hover {
  background-color: #ddd;
}
</style>

Ten kod dodaje przycisk „x” do każdego akordeonu w Elementorze oraz umożliwia zamknięcie akordeonu po kliknięciu na przycisku zamykania.

Po dodaniu tego kodu zapisz zmiany w pliku footer.php, a przycisk „x” zostanie dodany do akordeonów na wszystkich podstronach.