Develop Reference

Javascript Accordian

I have a simple accordion working, except for one thing. I would like to be able to re-click the same accordion item again, and be able to set height to '0'.
Currently, the open accordion item closes when I click a different accordion item, which is exactly what I want to do — but I also want the ability to re-click the open accordion item and have that one close, when clicked. See working example below:
https://codepen.io/celli/pen/BaNLJWb
// set heights to 0
gsap.set('.content', {
height: 0
});
// click function
$('.accordianItem').click(function() {
if ($('.accordianItem').hasClass('on')) {
gsap.to($('.content'), {
duration: .25,
height: 0
});
$('.accordianItem').removeClass('on');
}
gsap.to($(this).children('.content'), {
duration: .25,
height: "auto"
});
$(this).addClass('on');
});
What code can I add to add this extra functionality?

I have modified your code by adding another if that checks if the element clicked has 'on' class already. It should now work as you intended it to (hide when the user clicks on the already opened header).
// set heights to 0
gsap.set('.content', {height:0});
// click function
$('.accordianItem').click(function() {
if($(this).hasClass("on")){
gsap.to($('.content'), {duration:.25, height:0});
$('.accordianItem').removeClass('on');
}
else{
if ($('.accordianItem').hasClass('on')) {
gsap.to($('.content'), {duration:.25, height:0});
$('.accordianItem').removeClass('on');
}
gsap.to($(this).children('.content'), {duration:.25, height:"auto"});
$(this).addClass('on');
}
});

You can do this much more simply than how you're currently doing it:
// Create the animation that you need
const tl = gsap.timeline({paused: true});
tl.to('.content', {duration: 0.25, height:0});
// Set the timeline to its end state
tl.progress(1);
// Toggle the timeline's direction
$('.accordianItem').click(function() {
tl.reversed() ? tl.play() : tl.reverse();
});
Demo
I highly recommend checking out the GreenSock forums. They're super useful and you can get quick help from people who are experts in GSAP and web animation :)

How can I animate a div to the right when it is pressed, and then, when it is pressed again, return it back to its first position with jQuery?

I have multiple clickable panels made with Bootstrap class panel, organized in this way:
Image of my website naoh
For example, when I click on the first panel, some other panels appear and cool stuff happens.
When you click a panel.
But I want that the panel that I clicked to be at the center. And then, when that same panel is clicked, I want to return everything to normal (which right now works with the specific panels per panel), including the main panel, so it should move to the left. The panels at the center doesn't require animation, and the right ones should animate to the left and back to the right.
Here is my jQuery code for the panels, lets say panel 2:
//Panel 2
if ($("#panel_2").data("clicked")) {
$(".navegadores").toggle(function () { });
} else {
$(".navegadores").hide();
}
$("#panel_2").click(function () {
$("#panel_2").data('clicked', true);
$(".navegadores").toggle(function () { });
console.log($("#panel_2").data("clicked"));
});
I feel I would need to use the .toggle method somehow, or the .slideToggle, but I'm quite confused atm.

Something like this should get you started:
$('#panel2').click(function(){
if ( $(this).data('clickstate') == 0 ){
$(this).animate({
marginLeft: '200px'
},1000, function(){
$(this).data('clickstate', '1');
});
}else{
$(this).animate({
marginLeft: '0'
},1000, function(){
$(this).data('clickstate', '0');
});
}
});
#panel2{position:relative;height:100px;width:100px;background:green;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="panel2" data-clickstate="0"></div>

qTip2 hiding - combine unfocus, inactive and fixed

I'm using qTip2 for tooltips. I want to have this tooltip hiding behavior:
- toopltip hides when I click close button on title (button: true)
- tooltip hides when I click elsewhere on the page (event: 'unfocus')
- tooltip hides when I don't interact with it for 3 seconds (inactive: 3000), but only if my mouse cursor is not on the tooltip (fixed: true)
Hiding when close button is pressed is fine:
content: {
title: {
button: true
}
}
Hiding when unfocus is also ok:
hide: {
event: 'unfocus'
}
Hiding when I don't interact with it is still no problem:
hide: {
event: 'unfocus',
inactive: 3000
}
Now I can close the tooltip by clicking elsewhere on the page, or on close button, or by not moving mouse over the tooltip for 3 seconds. But when my mouse is on tooltip and it doesn't move for 3 seconds, the tooltip is also closed - this is undesirable.
For staying visible when mousing onto tooltip I can use this:
hide: {
fixed: true,
delay: 3000
}
Now it closes when mouse is not on tooltip for 3 seconds. But not when I click elsewhere on the page. So let's combine unfocus and fixed:
hide: {
event: 'unfocus',
fixed: true,
delay: 3000
}
Now it will close when I click elsewhere on the page, but not after 3 seconds after leaving tooltip. So let's try adding inactive:
hide: {
event: 'unfocus',
inactive: 3000,
fixed: true,
delay: 3000
}
Now it will close when I click elsewhere on the page, also after 3 seconds after leaving the tooltip, but also after 3 seconds of inactivity when I'm on the tooltip.
How can I close tooltip when I click elsewhere on the page and after 3 seconds after leaving the tooltip, but not when I'm still on it?

I had a similar requirement and as xr280xr mentions, the only solution I see is to implement the 'unfocus' part yourself. So you end up with your configuration being:
$el.qtip({
content: {
title: {
button: true
}
},
hide: {
fixed: true,
delay: 3000
}
})
and then to implement the unfocus behaviour:
var api = $el.qtip('api');
$el.closest('html').on('mousedown touchstart', function(e) {
api.hide(e)
});
In a fiddle: http://jsfiddle.net/pvanb/n04qL8jg/

jQuery cycle for text animation on a slideshow

I'm trying to find a way to animate the image title and caption for each slide of a slideshow and sync their animation effects with the ones of the slideshow. i.e. as soon as the slide transition effect has ended, the title goes from right to left and the caption from top to bottom, and when the slide transition effect kicks in, the whole text would fade out at the same time the slide fades out, and let the new slide and text fade in.
I figured out how to make my image title and caption move using .animate ( http://jsfiddle.net/S8F9Y/ ) :
var $j = jQuery.noConflict();
$j(document).ready(function() {
// Get the slideshow options
var $slidespeed = parseInt( meteorslidessettings.meteorslideshowspeed );
var $slidetimeout = parseInt( meteorslidessettings.meteorslideshowduration );
var $slideheight = parseInt( meteorslidessettings.meteorslideshowheight );
var $slidewidth = parseInt( meteorslidessettings.meteorslideshowwidth );
var $slidetransition = meteorslidessettings.meteorslideshowtransition;
var $captionduration = $slidetimeout - ($slidespeed*2);
$j('.meteor-slides h1').delay($slidespeed).animate({left: '30',opacity: 1}, 600, function(){/*Animation complete.*/});
$j('.meteor-slides p').delay($slidespeed + 200).animate({top: '70',opacity: 1}, 600, function(){/*Animation complete.*/});
$j('.meteor-slides h1').delay($captionduration).animate({opacity: 0}, $slidespeed, function(){/*Animation complete.*/});
$j('.meteor-slides p').delay($captionduration - 200).animate({opacity: 0}, $slidespeed, function(){/*Animation complete.*/});
// Setup jQuery Cycle
$j('.meteor-slides').cycle({
cleartypeNoBg: true,
fit: 1,
fx: $slidetransition,
height: $slideheight,
next: '#meteor-next',
pager: '#meteor-buttons',
pagerEvent: 'click',
pause: 1,
prev: '#meteor-prev',
slideExpr: '.mslide',
speed: $slidespeed,
timeout: $slidetimeout,
width: $slidewidth
});
// Setup jQuery TouchWipe
$j('.meteor-slides').touchwipe({
wipeLeft: function() {
$j('.meteor-slides').cycle('next');
},
wipeRight: function() {
$j('.meteor-slides').cycle('prev');
},
preventDefaultEvents: false
});
// Add class to hide and show prev/next nav on hover
$j('.meteor-slides').hover(function () {
$j(this).addClass('navhover');
}, function () {
$j(this).removeClass('navhover');
});
// Set a fixed height for prev/next nav in IE6
if(typeof document.body.style.maxWidth === 'undefined') {
$j('.meteor-nav a').height($slideheight);
}
// Add align class if set in metadata
$j('.meteor-slides').each(function () {
meteormetadata = $j(this).metadata();
if (meteormetadata.align == 'left') {
$j(this).addClass('meteor-left');
} else if (meteormetadata.align == 'right') {
$j(this).addClass('meteor-right');
} else if (meteormetadata.align == 'center') {
$j(this).addClass('meteor-center');
}
});
});
The 1st problem is that there's no cycle so the text animation only
plays once,
the 2nd problem is that text effects are not in sync with slide effects,
the 3rd problem is that there's no slide transition for the first slide so if this is the first slide, the text animation should start right away for h1 and +200ms for p, with no additional delay ($slidespeed).
Thanks in advance,
Kim

Use the callback of each slide instead of trying to sync them by time.
$j('.meteor-slides').cycle({
after: function (currSlideElement) {
// Place all your animations here
// Example:
$j(currSlideElement).find('h1').animate();
// ...
},
cleartypeNoBg: true,
fit: 1,
fx: $slidetransition,
height: $slideheight,
next: '#meteor-next',
pager: '#meteor-buttons',
pagerEvent: 'click',
pause: 1,
prev: '#meteor-prev',
slideExpr: '.mslide',
speed: $slidespeed,
timeout: $slidetimeout,
width: $slidewidth
});
Place any captions and animations where it says // Place all your animations here and they will show after each slide has loaded.
You can also use before depending on what's best suited for your slideshow.
Demo here
Find more about how they are used here.

carouFredSel: Create a function for next / prev buttons?

I'm using carouFredSel to create multiple carousels on the same page. If you look at this JSFiddle you will see that there are two carousels, but only one is able to be scrolled with the next / prev buttons.
Without adding a class or ID, I am trying to tell the buttons to only scroll the corresponding carousel. I believe this be accomplished with a function, but I'm not entirely sure how. Something like this:
prev: {
button: function() {
$(this).next('.prev');
}
},

Give this a look, it's right in the documentation:
prev: {
button: function() {
return $(this).parent().siblings(".prev");
}
},
next: {
button: function() {
return $(this).parent().siblings(".next");
}
}
Working JSFiddle demo
oh and notice, I took out the key, because then you would have to have the carousels synchronized... and you can have one or the other, not both. (unless you conditionally assigned keys, but there goes your small code)
--
http://caroufredsel.frebsite.nl/code-examples/configuration.php
search: "Get the HTML-elements for the buttons and the container dynamically"

I think thats better set an ID.
$("#list1").carouFredSel({
direction: "up",
auto : false,
items: 3,
prev : "#prev1",
next : "#next1"
});
$("#list2").carouFredSel({
direction: "up",
auto : false,
items: 3,
prev : "#prev2",
next : "#next2"
});
See a working demo.

may be this one is usefull for you.in my page its workin good.
prev: {
button : ".prev"
},
next: {
button : ".next"
},