-
AuthorPosts
-
March 10, 2016 at 11:14 pm #596606
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 #596884Have 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, 9 months ago by M1000000.
March 11, 2016 at 3:07 pm #596894 -
AuthorPosts
- The topic ‘avia.js – disable / change .show / .hide animation’ is closed to new replies.