Tagged: ,

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • December 10, 2020 at 1:43 pm #1266292
    Anna

    Hi,
    I’m trying to do this : https://kriesi.at/documentation/enfold/button/#toggle-id-7
    but nothing happens when I click on the button…
    Do you have any idea where the problem may come from?

    December 10, 2020 at 3:19 pm #1266309
    Anna

    jQuery(“.toggle-button a”).on(“click”, function(e) {
    replaced by
    jQuery(“.toggle-button a”).on(“click”, function() {
    work now

    Is there a way to animate the opening and closing of the section so that the transition is less ‘abrupt’?

    • This reply was modified 4 years ago by Anna.
    December 14, 2020 at 12:40 pm #1267106
    Ismael

    Hi,

    Thank you for the inquiry.

    Instead of using toggleClass, try to use the animate function so that you can specify the duration of the transition.

    // https://api.jquery.com/animate/

    Example:

    

$( "#clickme" ).click(function() {
  $( "#book" ).animate({
    opacity: 0.25,
    left: "+=50",
    height: "toggle"
  }, 5000, function() {
    // Animation complete.
  });
});

    Best regards,
    Ismael

    December 14, 2020 at 4:11 pm #1267200
    Anna

    where can i had this function ? for the moment i have this in functions.php:

    //——————————-
    // Toggle section
    //——————————-

    function toggle_on_click(){
    ?>
    <script>

    jQuery(window).load(function(){

    // Button onClick event

    jQuery(“.toggle-button a”).on(“click”, function() {

    // Add your button events here

    console.log(“toggle section”);

    jQuery(“#toggle-section”).toggleClass(“hide-me”);

    console.log(“Prevent default”);

    e.preventDefault();

    });

    });
    </script>
    <?php
    }
    add_action(‘wp_footer’, ‘toggle_on_click’);

    function add_custom_href_remove(){
    ?>
    <script>
    jQuery(window).load(function(){
    jQuery(‘.toggle-button a’).removeAttr(‘href’);
    });
    </script>
    <?php
    }
    add_action(‘wp_footer’, ‘add_custom_href_remove’);

    December 16, 2020 at 1:17 pm #1267811
    Ismael

    Hi,

    It should go inside the on function or inside the event listener. Please look for this line..

    
jQuery(“#toggle-section”).toggleClass(“hide-me”);

    .. and replace it with:

    jQuery( "#toggle-section" ).animate({
    opacity: 1,
}, 1500, function() {

});

    Best regards,
    Ismael

    December 16, 2020 at 1:33 pm #1267819
    Anna

    Thanks Ismael, it’s ok now. here is the final code :

    //-------------------------------
// Toggle section
//-------------------------------

function toggle_on_click(){
?>
<script>
	
jQuery(window).load(function(){	

// Button onClick event

jQuery(".toggle-button a").on("click", function() {

	
	// Add your button events here

	console.log("toggle section");

jQuery( "#toggle-section" ).animate({
    opacity: 1,
    height: "toggle"
  }, 1500, function() {
    // Animation complete.
  });

	console.log("Prevent default");

	e.preventDefault();

});

});
</script>
<?php
}
add_action('wp_footer', 'toggle_on_click');

function add_custom_href_remove(){
?>
<script>
jQuery(window).load(function(){
jQuery('.toggle-button a').removeAttr('href');
});
</script>
<?php
}
add_action('wp_footer', 'add_custom_href_remove');
    December 18, 2020 at 2:51 pm #1268419
    Ismael

    Hi,

    Happy to help! Thank you for sharing. Please feel free to open a new thread if you need anything else.

    Have a nice day. :)

    Best regards,
    Ismael

  • Author
    Posts
Viewing 7 posts - 1 through 7 (of 7 total)
  • The topic ‘Toggle a section when a button is clicked’ is closed to new replies.