Scope of what I am trying to do: Various numbers of FAQ's are being pulled in upon build via yaml file which will have only the Question showing by default and then upon click the appropriate Answer will show.
I have figured out how to add a unique class for each question and each answer but I can't figure out how to toggle answer1 when question1 is clicked.
I appreciate any help! I am still learning javascript/jquery and get lost easily so if you could help explain or point to documentation of what I am missing I would appreciate it!
https://jsfiddle.net/texobyte/jns7v9ox/
$(".faqQuestion").each(function (i) {
$(this).addClass("question" + (i + 1));
});
$(".faqAnswer").each(function (i) {
$(this).addClass("answer" + (i + 1));
});
$("#toggle-faq h5").hide();
$("#toggle-faq").click(function () {
$("#toggle-faq h5").slideToggle("slow", function () {});
});
You could also try this (after changing the id "toggle-faq" to a class, as the other answer says):
$(".toggle-faq h5").hide();
$(".toggle-faq").on('click', function () {
if ($(this).hasClass("active")) {
$(this).children("h5").slideToggle();
$(this).removeClass("active");
return;
}
$(".active").children("h5").slideToggle();
$(".active").removeClass("active");
$(this).addClass("active");
$(this).children("h5").slideToggle();
});
The "this" means that it will only toggle the .toggle-faq that has been clicked on, and not all of them.
I have worked on you Fiddle and made few modifications to make it working. Here is the LINK
I have replace id="toggle-faq" with class="toggle-faq"; we should not repeat ids:
<div class="toggle-faq">
Also replaced this code:
$("#toggle-faq h5").hide();
$("#toggle-faq").click(function () {
$("#toggle-faq h5").slideToggle("slow", function () {});
});
With a better and working code:
// hide all answers at first
$( '.faqAnswer' ).hide();
$( '.toggle-faq' ).on('click', function () {
var $this = $(this);
// if this is already open
if ( $this.hasClass('active') ) {
return;
};
// close any other already open...
if ( !!currentSelected ) {
currentSelected.find( '.faqAnswer' ).slideToggle( 'slow' );
};
// ...and then open the clicked item
$this.find( '.faqAnswer' )
.slideToggle( 'slow', function () {
// now, make sure this is currentSelected
currentSelected = $this;
});
});
Let me know if you have any doubts. Good luck, have fun!
Related
Note: The examples are tested with chrome.
Firefox ia not working.
I have this js code to append css transitions.
For a single image (working):
var isTransition = false;
var isRemoveQueue = false;
$( ".text" ).bind( "webkitTransitionEnd mozTransitionEnd transitionEnd", function () {
isTransition = false;
if ( isRemoveQueue ) {
$( this ).removeClass("animated-hover");
}
});
$(".text").on( 'mouseenter', function () {
$(this).addClass("animated-hover");
isTransition = true;
isRemoveQueue = false;
});
$(".text").on( 'mouseleave', function () {
if ( !isTransition ) {
$( this ).removeClass( "animated-hover" );
} else {
isRemoveQueue = true;
}
});
fiddle: https://jsfiddle.net/drecodeam/3pb38v4f/6/
It was important to me, that the transition does not stop if you just hover quick over the image. It is working good with one image.
Here is the thing: If i am using more images than one, i have weird effects, like the transition getting stuck e.g.
Example with more images:
https://jsfiddle.net/3pb38v4f/9/
Beside it is not working correctly, it is also not working with firefox.
You could just use
$(".text").on( 'mouseleave', function () {
$( this ).removeClass( "animated-hover" );
isRemoveQueue = true;
});
I think you over thought it a little :)
Hoverflow is exactly what i was looking for.
It can handle the queuing in js very nice and clean :)
http://www.2meter3.de/code/hoverFlow/
I am using on my site the plugin Quickflip with tabs on my site .
However if by exemple I click too fast on var2 and then var1 there is a bug.
That is why I am trying to put a timeout of 1s on each click of the tab so that it would wait for the flip to do.
Here is how I call the quickflip function (and tab)
$('document').ready(function () {
$('#flip-container').quickFlip();
$('#flip-navigation li a').each(function () {
$(this).click(function () {
$('#flip-navigation li').each(function () {
$(this).removeClass('selected');
});
$(this).parent().addClass('selected');
var flipid = $(this).attr('id').substr(4);
$('#flip-container').quickFlipper({}, flipid, 1);
return false;
});
});
});
Is there a solution to this please ?
I try to test your code and find out the problem that you mentioned.
[EDIT]
You want tabs can't be clicked until flip animation stop. I check the quickflip lib implementation and find out when div is flipping all the flip content display style will be set to "none". So I implement a "is animating" checking function.
Try this:
$('#flip-navigation li a').each(function () {
$(this).click(function () {
$('#flip-navigation li').each(function () {
$(this).removeClass('selected');
});
$(this).parent().addClass('selected');
var flipid = $(this).attr('id').substr(4);
var isAnimating = true;
$("#flip-container>div").each(function(index){
if($(this).css("display")!=="none"&&index<3){
isAnimating=false;
}
});
if(!isAnimating){
$('#flip-container').quickFlipper({}, flipid, 1);
}
return false;
});
});
[EDIT]
And this is the updated answer jsfiddle demo
Hope this is helpful for you.
There are few solutions that i know can solve your problem.
Have a look at Callback which is used to make another function wait to the other function to finish first before performing, and you can put it together with Unbind function or Event.Prevent
Code may look something like this:
$('document').ready(function () {
$('#flip-container').quickFlip();
$('#flip-navigation li a').each(function () {
$(this).click(function () {
$('#flip-navigation li').each(function () {
$(this).removeClass('selected');
$(this).$('#flip-navigation li a').unbind('click', handler); //Mod 1
});
$(this).parent().addClass('selected');
var flipid = $(this).attr('id').substr(4);
//Mod 2 ---- Start
$('#flip-container').quickFlipper({}, flipid, 1, function(){
$(this).$('#flip-navigation li a').bind('click', handler);
});
//Mod 2 ---- End
return false;
});
});
});
I am not entirely sure how to implement callback on the plugin, but here is a link to you that might be able to give you some idea how to implement callback on the quickflip plugin.
I have a function that hides and shows divs on scroll based on pageY position, but I also need the ability to have it automatically hide and show divs in order(only the ones with children), sort of like a fake animated Gif, looping forever.
I tried this:
function autoPlay() {
$('.conP').each(function(){
if ($(this).children().length > 0) {
setInterval(function(){
$(this).show().delay('100').hide();
},300);
}
});
}
which is not returning any errors, but it's not hiding or showing any of the divs with class="conP".
Any suggestions as to what I'm doing wrong/how I could improve this?
try this -
function autoPlay() {
$('.conP').each(function(){
if ($(this).children().length > 0) {
var $that = $(this);
setInterval(function(){
$that.show().delay('100').hide();
},300);
}
});
}
You have an incorrect reference to this in your setInterval closure. Refer to "How this works" in JavaScript Garden.
In your case you should save the reference to this in a variable:
$('.conP').each(function() {
var $element = $(this);
setInterval(function () {
$(element).show().delay('100').hide();
}, 300);
});
Or, better use the first argument passed to each, which is equal to $(this) in this case.
Not sure it's a great idea to run intervals inside loops, but I'm guessing the issue is scope inside the interval function :
function autoPlay() {
$('.conP').each(function(i, elem){
if ( $(elem).children().length ) {
setInterval(function(){
$(elem).show().delay(100).hide();
},300);
}
});
}
I really appreciate all the help guys, I seem to have figured out the animation part:
setInterval( function() {
autoPlay();
},120);
function autoPlay() {
var backImg = $('#outterLax div:first');
backImg.hide();
backImg.remove();
$('#outterLax').append(backImg);
backImg.show();
}
By hiding whichever div is first, and removing it from-then appending it back into-the containing div, and showing the new first div, it animates quite nicely!
I'm trying to do this in javascript but more optimized and with toggle function working !
My js code :
$(document).ready(function() {
$('a.details').click(function(e){
var id= '';
$('a.details').each(function() {
id = $(this).attr('href');
$('#'+id).hide();
});
$(this).addClass('active');
id = $(this).attr('href');
$('#'+id).toggle();
e.preventDefault();
});
});
Here is my take on this WITHOUT changing the html except for adding a t to the ID of the rows
http://jsfiddle.net/mplungjan/Rfn8z/
Comments welcome (especially if voting down)
$(document).ready(function() {
$('a.details').each(function() {
var tr = $("#t"+parseInt($(this).html()));
var link = this;
$(this).toggle(
function(e){tr.show(); $(this).addClass('active'); e.preventDefault();},
function(e){tr.hide(); $(this).removeClass('active');e.preventDefault();}
);
});
});
Terrible way of doing things. Instead take a look at this:
http://jsfiddle.net/xzpkq/
Maybe you will be inspired to produce better code
Hopefully this is a simple request. I found this code that will work perfectly for what I want to do (Rotate through list items while fading in and out) http://jsfiddle.net/gaby/S5Cjm/1/ . However, I am looking to have the animation pause on mouse over and resume on mouse out. I am a novice at the moment with Javascript and JQuery, so any help would be appreciated.
Thanks.
EDIT: Side questions: Is there a benefit to using JQuery to do this? Would a stand alone script be more appropriate?
I attached the hover event to your list items. The over function stops the animation and all following animations using jQuery.stop(true). The out function resumes the animation:
http://jsfiddle.net/US4Fc/1/
var duration = 1000
function InOut(elem) {
elem.delay(duration).fadeIn(duration).delay(duration).fadeOut(
function() {
if (elem.next().length > 0) {
InOut(elem.next());
}
else {
InOut(elem.siblings(':first'));
}
});
}
$(function() {
$('#content li').hide().hover(
function() {
$(this).stop(true)
},
function() {
var curOp = Number($(this).css("opacity"));
$(this).fadeTo(duration*(1-curOp), 1, function() {
InOut($(this))
});
}
);
InOut($('#content li:first'));
});
Will this work for you?
$(function(){
var active;
$('#content li').hide().hover(
function(){
active = $(this).stop();
},
function(){
active && InOut(active);
}
);
InOut( $('#content li:first') );
});