Accordion: disable content jumping

[dennisbern]

Hi all, I have an accordion on my site.

When the page is opened on a desktop page, the content of the oppsite page jumps down the end of the gridder (for mobile this function is perfect). Can I use a CSS code so that this won`t happen?

The page is built like this:
Left side: a stack with "headline text" and below it the "accordion code". on the right side of the gridder a "text block":

https://biografie.art/die-eigenen-grenzen-anerkennen-radikal-copy

All the best, Dennis

[arminunruh]

hello!

you could try this Enter this css in "lay options" -> "custom css & html" -> "custom css for desktop":

.accordion-content{
position: absolute;
}

[dennisbern]

Awesome. Works perfectly! Thanks a lot!

[alasdair17]

@dennisbern hey, I really like the way you have setup an accordion, is this via a plugin or custom code? It works really smoothly.

[dennisbern]

This is a custom code. Which I actually found in this forum. I think it was a code from @arminunruh

I put it in an edit html box:

<div class="accordion">
<div class="accordion-title _accordion_title">
<span>Title</span>
<span class="plus">+</span>
<span class="minus">-</span>
</div>
<div class="accordion-content _accordeon_laufschrift">
<p>TEXT
</div>
</div>

[dennisbern]

Hey a question about my code :)

I have blue links (desktop version) in my accordion. where can I edit them so that they are black?

Another thing: I want the links to open in a separate tab or window. How can I do that with the HTML code?

[arminunruh]

Links need to have a target blank attribute for them to be opened in a new tab.

target="_blank"

<a href="…" target="_blank">asd</a>

Blue links to black is just CSS.

.accordion a{
color: black!important;
}

[arminunruh]

Thanks for providing the code for @alasdair17 , but I think it's missing the JavaScript part.

[dennisbern]

@arminunruh True:

<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>

[dennisbern]

@arminunruh Thanks a lot. Works also perfect!

[alasdair17]

@arminunruh @dennisbern cheers!