Mehrere Color-Sections öfnnen und schließen

Hi Victoria,
can you tell me how?
I tried to copy the code and filled it up with the next classes and ids, but this does not work.

I hope you can help me.
Best regards
Grobi

Hi Victoria.
Thank you very much – now it works.
I have no idea how that happened. I’m pretty sure that I haven’t saved the script anywhere. But, that seems to be a mistake on my part …

Victoria, I have one more question to the behaviour of the opened section:
if you have opened the section, the page scrolls to the head of the section in which the button is located – but unfortunately not to the new content that has just opened.
Can you adjust that?

Best regards
Grobi

Hi Mike,
first of all thank you very much for your help.

The changes you have made are almost that want I wanted to get. The delay is not my problem at all, but the movement of the page.
After clicking the button – and delay – the site is “jumping” to the right position, not srolling, what is the normaly style. Thats a pity for me a little bit.
Is there a chance to adjust this?

My seccond question is: how do i have to edit the code, when I want to include more “buttons” into the script. Can you give me an example for that?

Best regards and stay healthy.
Grobi

Hi Mike,
sorry for my late reply.
Thank you very much for editing the script. I replaced the old code with the new “smooth”-script you send, so I got this and uploaded functions.php:

function add_custom_cs(){
?>
<script>
jQuery(window).load(function(){
jQuery(“#hide_company”).hide();
jQuery(“#hide_technology”).hide();
jQuery(“#hide_product”).hide();
jQuery(“#hide_sustainability”).hide();
jQuery( “.companyschalter” ).click(function() {
jQuery( “#hide_company” ).scrollTop(100);
jQuery( “#hide_company” ).toggle();

});
jQuery( “.technologyschalter” ).click(function() {
jQuery( “#hide_technology” ).toggle();
});
jQuery( “.productschalter” ).click(function() {
jQuery( “#hide_product” ).toggle();
});
jQuery( “.sustainabilityschalter” ).click(function() {
jQuery( “#hide_sustainability” ).toggle();
});
});

(function ($) {
$(“.sustainabilityschalter”).click(function(e) {
e.preventDefault();
var elmnt = document.getElementById(“hide_sustainability”);
setTimeout(function () {
elmnt.scrollIntoView({ behavior: ‘smooth’, block: ‘start’ });
}, 1500);
});
$(“.productschalter”).click(function(e) {
e.preventDefault();
var elmnt = document.getElementById(“hide_product”);
setTimeout(function () {
elmnt.scrollIntoView({ behavior: ‘smooth’, block: ‘start’ });
}, 1500);
});
$(“.class-of-button”).click(function(e) {
e.preventDefault();
var elmnt = document.getElementById(“ID-of-hidden-section”);
setTimeout(function () {
elmnt.scrollIntoView({ behavior: ‘smooth’, block: ‘start’ });
}, 1500);
});
})(jQuery);

Unfortunately i got this error-message:
Parse error: syntax error, unexpected end of file in /homepages/10/d85211480/htdocs/subd_foo/wp-content/themes/enfold/functions.php on line 855

Best regards
Grobi

Oh, one week ago – big sorry for my late reply!

Hi Mike!
Thank you very much, of corse this part of the code was missing. Since I can’t write php-code I was not able to recognize that.

One last question to this issue:
after clicking the button to open the section, my site scrolls not exactly to the beginning of the section but about 100 or 110 pixels too far.
This means, that it is not possible to read a heading or the first lines of a text in the just opened section.

Unfortunately this effect is shown on the site I build off-line – not on the test-site you can see…
So, is there a possibility for me – for instance by entering different pixel values ​​- to adjust the gap between the beginning of the section and the position where the scrolling ends?
That would be perfect!!!

Best regards – and stay healthy!!
Grobi

Dear Mike,
thank you very much for your efforts.
I apologize for my late reply but due to a hospital stay I could not answer earlier.

I will check the ideas you suggest, thank you very much.
Again thank you very much for your help.

Best regards
Grobi