Can't toggle color section

you can insert it as manual and only a #
i tried it – see here https://webers-testseite.de/colorsection-toggle/
and it works with that

i placed a container above the color-section ( all you want ) on my case it is a 2/3rd 1/3rd Column.
In the 1/3rd Column on the right i placed a button with manual link to #
and as described in the thread you mentioned with the custom class .

i edited a bit the code because i like to know what is all about – so my code looks like :

function add_custom_toggler(){
?>
<script>
jQuery(window).load(function(){
jQuery("#toggle-color-section").hide();
jQuery( ".color-section-toggler" ).click(function() {
  jQuery( "#toggle-color-section" ).toggle();
});
});
</script>
<?php
}
add_action('wp_footer', 'add_custom_toggler');

the button gets the custom class: color-section-toggler
the color section gets the unique id: toggle-color-section

you inserted in the field the class with the dot – the dot comes automatically to the class
insert please only : color-section-toggler and not : .color-section-toggler

you did it right with the ID – you don’t insert it with the # – the same with the class

Ikke noe problem

it would be better to insert as button link the page url with the id
so in your case to that site try to insert #toggle-color-section

• This reply was modified 7 years, 3 months ago by Guenni007.

i changed it above try only #toggle-color-section as target of your button

does the other page with the toggler exists too?
try to delete this page or remove the ID from that color section to prove if it is a double ID conflict.

so i played a bit with the code:

as target for the buttons use: #toggle-color-section
and the class goes to buttons is: color-section-toggler

use this code instead (has the opportunity that the color-section is there but with height = 0px )

function add_custom_toggler(){
?>
<script>
jQuery(window).load(function () {
  jQuery("#toggle-color-section").addClass("notseen");
  jQuery(".avia-button-wrap.color-section-toggler").click(function () {
   jQuery("#toggle-color-section").toggleClass("notseen");	  
  });
});
</script>
<?php
}
add_action('wp_footer', 'add_custom_toggler');

and do this to quick css:

.notseen {
    height: 0 !important;
    min-height: 0 !important;
}

see here: https://webers-testseite.de/colorsection-toggle/

allthough i believe that the hide function should work too- but i guess the link to the anchor has no target on click. Because the color-section is on display: none.
here the color-section is allways there (even for seo) but it is not visible

• This reply was modified 7 years, 3 months ago by Guenni007.

and by the way you can replace the text inside your button on click:

In my case on the testpage it is “contact me” to replace

function add_custom_toggler(){
?>
<script>
jQuery(window).load(function () {
  jQuery("#toggle-color-section").addClass("notseen");
  jQuery(".avia-button-wrap.color-section-toggler").click(function () {
   jQuery("#toggle-color-section").toggleClass("notseen");

   jQuery(".avia-button-wrap.color-section-toggler span.avia_iconbox_title").text(function(i, v){
           return v === "contact me" ? "thanks for your interest" : "contact me"
   })	  
  });
});
</script>
<?php
}
add_action('wp_footer', 'add_custom_toggler');

etc. pp