Best way to create Dropdown/Accordion?

aaronfeng

Hi,

I've been having trouble making these dropdown elements("Project Info" and "Project Type") work even though I read and tried numerous ways from the posts here in this forum. Is there a way anyone could help me figure this out?

Thank you in advance!![alt text]
Desktop - 27.png
Desktop - 28.png

arminunruh

i will code an accordion element for this one day

ok here it goes

in lay options → custom html & css in "custom <head> content" enter this:

<script>
    window.laytheme.on('newpageshown', function(){
        jQuery(".accordion-title").on("click", function(){
            jQuery(this.parentNode).toggleClass("active")
        })
    })
</script>
<style>
    .accordion-title{
        cursor: pointer;
    }
    .accordion .minus, .accordion .plus{
        margin-left: 30px;
    }
    .accordion .minus{
        display: none;
    }
    .accordion .accordion-content{
        display: none;
        margin-top: 20px;
    }
    .accordion.active .minus{
        display: inline;
    }
    .accordion.active .plus{
        display: none;
    }
    .accordion.active .accordion-content{
        display: block;
    }
    .accordion-title{
        display: inline-block;
    }
</style>

then in the gridder go +more → +html
and enter this:

<div class="accordion">
    <div class="accordion-title lay-textformat-parent"><span>Title</span> <span class="plus">+</span><span class="minus">-</span></div>
    <div class="accordion-content lay-textformat-parent">
        <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt.</p>
        <p>Mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio.</p>
    </div>
</div>

aaronfeng

Thank you so much @arminunruh! If I want the accordion content to fade in/out or a slight delay, what should I add in jQuery?

And if I want to make this aligned to the right with the image at all times, how can I achieve that?
Screen Shot 2022-09-17 at 9.46.42 PM.png

Thank you thank you thank you!!

arminunruh

hey you can use a css transition

and to align sth to the right probably a float right

sry im so busy atm i dont have time to code this

aaronfeng

Thank you @Armin-Unruh! I tried the css animation, it doesn't work for me. Could you help me out when you get a chance? really appreciate it! Thank you

arminunruh

hey aaron

super busy, if you like email me at info@laytheme.com and i can do this for some €€, maybe theres more custom coding u want for that website and yea

Lay Theme Forum

Best way to create Dropdown/Accordion?

Before you post:

When you post:

Online Users