Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • March 10, 2016 at 11:14 pm #596606
    M1000000

    Hi,

    I’m using the following in avia.js to create three links that show and hide divs based on their class:

    		$( ".show-FAQ1" ).click(function() {
	  	$( ".hide-FAQ1" ).show( "fast", function() {
		// Animation complete.
	  });
		$( ".hide-FAQ2" ).hide( "fast", function() {
	  	// Animation complete.
	  });
	  	$( ".hide-FAQ3" ).hide( "fast", function() {
	  	// Animation complete.
	  });
	});

		$( ".show-FAQ2" ).click(function() {
	  	$( ".hide-FAQ2" ).show( "fast", function() {
		// Animation complete.
	  });
		$( ".hide-FAQ1" ).hide( "fast", function() {
	  	// Animation complete.
	  });
	  	$( ".hide-FAQ3" ).hide( "fast", function() {
	  	// Animation complete.
	  });
	});

		$( ".show-FAQ3" ).click(function() {
	  	$( ".hide-FAQ3" ).show( "fast", function() {
		// Animation complete.
	  });
		$( ".hide-FAQ1" ).hide( "fast", function() {
	  	// Animation complete.
	  });
	  	$( ".hide-FAQ2" ).hide( "fast", function() {
	  	// Animation complete.
	  });
	});

    Clicking link .show-FAQ1 shows the div .hide-FAQ1 and closes the others (.hide-FAQ2 and .hide-FAQ3). Clicking link .show-FAQ2 shows the div .hide-FAQ2 and closes the others (.hide-FAQ1 and .hide-FAQ3). Etc.

    All is working well but there is a transition animation that slides in from the left making the whole process clunky (I know it is already but seems simpler than trying to nest an accordion into a tab box for a similar effect).

    Is it possible to disable this animation or make it a simple fade?

    Many Thanks.

    March 11, 2016 at 2:35 pm #596884
    M1000000

    Have refined this a bit – now working as required

        $(".show-FAQ1").click(function(){
        $(".hide-FAQ1").toggle();
        $(".hide-FAQ2").hide();
        $(".hide-FAQ3").hide();	
    });
    $(".show-FAQ2").click(function(){
        $(".hide-FAQ2").toggle();
        $(".hide-FAQ1").hide();
        $(".hide-FAQ3").hide();			
    });	
    $(".show-FAQ3").click(function(){
        $(".hide-FAQ3").toggle();
        $(".hide-FAQ1").hide();
        $(".hide-FAQ2").hide();			
    });

    V handy – can toggle/show/hide entire color sections from a link on an icon (or other) element and all content still manageable in layout builder.

    • This reply was modified 8 years, 8 months ago by M1000000.
    March 11, 2016 at 3:07 pm #596894
    Yigit

    Hi!

    Glad you figured it out and thank you for sharing your solution! :)

    Cheers!
    Yigit

  • Author
    Posts
Viewing 3 posts - 1 through 3 (of 3 total)
  • The topic ‘avia.js – disable / change .show / .hide animation’ is closed to new replies.