Accordion // Jqueri loading issues

[Sarah Delling]

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!

[arminunruh]

https://laytheme.com/documentation/custom-javascript.html#newpage-events

use

window.laytheme.on('newpageshown', function(){

})

instead of jquery document ready

content is loaded in through ajax,
jquery document ready only triggers on a hard refresh / load though

[arminunruh]

nicely done the website! <3

[Sarah Delling]

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>

[arminunruh]

i think u need to use jQuery instead of $

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

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

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

[arminunruh]

actually i notice now all youre doing is binding a click event, so you can instead just do it like this:

<script>
jQuery(document).on('click', '.accordion-title', function() {
    var content = jQuery(this).next(".accordion-content");

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

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

as you can read here:
https://laytheme.com/documentation/custom-javascript.html#binding-click-events

please read the docs ^^

[Sarah Delling]

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

[arminunruh]

i think it doesnt work. when i click to a different page and then go back to that page, the accordion doesnt open