Lay Theme Forum

works! beyond happy now – thanks :) I´ll do.

Thanks so much! 🤗 Looking foward for many more to come.

And sorry, I have to ask again – I´m new to the game trying to learn.

I inserted it like this now and think I made sth wrong, because now the pictures on the whole website are not loading.

<script>

window.laytheme.on('newpageshown', function(){
$(".accordion-title").off("click").on("click", function() {
var content = $(this).next(".accordion-content");

if (content.is(":visible")) {
    content.slideUp(300).css("display", "none");
    $(this).removeClass("active");
} else {
    $(".accordion-content").slideUp(300).css("display", "none"); // Alle schließen
    $(".accordion-title").removeClass("active");

    content.css("display", "block").hide().slideDown(300); // Sichtbar machen
    $(this).addClass("active");
}

});
});

</script>

I use an accordion on this website for the services description, here:
https://zahnarztpraxis-alteglofsheim.de/leistungen/

I have inserted it as custom code. It is inserted as follows:

1. html-Element on my specific page "services" in pages:

<div class="custom-accordion">
<div class="accordion-item">
<button class="accordion-title">XXX</button>
<div class="accordion-content">
<p>XXX</p>
</div>
</div>

2. CSS in Lay Theme Options Custom Code:

.custom-accordion {
max-width: 800px;
margin: 0 auto;
}

.accordion-item {
border-bottom: 1px solid #ccc;
}

.accordion-title {
width: 100%;
text-align: left;
padding: 15px;
background: none;
border: none;
font-size: 40px;
font-family: 'Belwe Std light';
cursor: pointer;
transition: all 0.3s ease;
color: #e4e1da
}

.accordion-title:hover {
color: #000;
}

.accordion-content {
display: none;
overflow: hidden;
opacity: 1;
max-height: none;
color: #000;
padding: 10px 15px;
animation: fadeIn 0.3s ease-in-out;
font-size: 16px;
color: #000;
line-height: 1.5;
font-family: 'PTMono-Regular';
text-align: left;
}

3. HTML-Code footer in Lay Theme Options Custom Code

<script>

jQuery(document).ready(function($) {
$(".accordion-title").off("click").on("click", function() {
var content = $(this).next(".accordion-content");

    if (content.is(":visible")) {
        content.slideUp(300).css("display", "none");
        $(this).removeClass("active");
    } else {
        $(".accordion-content").slideUp(300).css("display", "none"); // Alle schließen
        $(".accordion-title").removeClass("active");

        content.css("display", "block").hide().slideDown(300); // Sichtbar machen
        $(this).addClass("active");
    }
});

});

</script>

NOW: the problem :)

The accordion is showing, working super fine, BUT only if I do a hard refresh loading on the site. The accordion doesn´t work/open when the page is loading for the first time. So I feel like the jQuery needs the hard refresh to work.

Is there any way to fix this issue?

Thanks so much for advices!