Add my own JS

[be-laud]

Hi everybody!
I'm Audrey, freelancer art director. I choose Lay Theme for building my first website for a personal project (vertical garden shop) and I want to try & customize some things with the help of Js ans Css animations.

Here is the situation :

[http://codepen.io/be-laud/pen/pROVmz]

I am trying to put this accordion in Lay Theme. HTML and CSS are integrated and both of them work, but I'm not very good in JS. I tried super hard to apply the Lay Theme documentation... but I still miss something!
Could you please tell me how I should write it to make it compatible with Lay Theme ?

Thanks a lot!

Audrey

[arminunruh]

Hey!
Find out the type and id of the page where you want to have the accordion. Typically you can see that for example in the <body> tag, it has a class of id-* and type-*

window.laytheme.on("newpageshown", function(layoutObj, type, obj){
	if(type == "page" && obj.id == 1){
		// Put all of your js, without document ready inside here
	}
});

obviously type "page" and id 1 need to be replaced by the type and id of your page where you want the code executed.

If you have problems making this work please post your code here :)

[be-laud]

Hello Armin!

Thank you for your answer, I've tried it, but I still don't understand.

Here my code (compatible with every version of the Jquery library and it works on a simulator):

window.laytheme.on("newpageshown", function(layoutObj, type, obj){
if(type == "page" && obj.id == 109){

	function close_accordion_section() {
        jQuery('.accordion .title').removeClass('active');
        jQuery('.accordion .section-content').slideUp(300).removeClass('open');
      
    }

    jQuery('.title').click(function(e) {
        // Grab current anchor value
        var currentAttrValue = jQuery(this).attr('href');

        if(jQuery(e.target).is('.active')) {
            close_accordion_section();
        }else {
            close_accordion_section();

            // Add active class to section title
            jQuery(this).addClass('active');
            
            // Open up the hidden content panel
            jQuery('.accordion ' + currentAttrValue).slideDown(300).addClass('open');

        }

        e.preventDefault();
    });
}

});

Thank you for your help :thinking:

Audrey

[arminunruh]

do you have a link to the website where you're trying to make this work please?

[be-laud]

It's on this page, on the accordion:

http://www.fusion-vegetale.fr/tutoriels/

Thanks in advance!

[arminunruh]

hey when I'm on your website I cannot find the javascript code that you posted above on the site.

Are you sure you put <script></script> around your js?

Custom js that I see, is only this:

<script>(function() {

})();</script>

[be-laud]

:scream: !!! Thank you so much!

My js was in the "Custom JS" window of the page, where it's impossible to write <script></script>. I thought it was automatic...

I've put it in the custom header, and IT WORKS!

Merci Merci Merci

[arminunruh]

cool!! :)

hm i think maybe you had it in the custom css window