I have been working on an accordion and have it close to what I need it to be. However, I can't seem to have the arrow rotate back to 0 degrees after the close "x" icon has been clicked. The toggle closes but the arrow stays in a downward position.
FIDDLE
$('#main').each(function () {
var $accordian = $(this);
$accordian.find('.view-m').on('click', function () {
$accordian.find('.mobile-content-body').slideUp();
$accordian.find('span').css('transform', 'rotate(0deg)');
if (!$(this).next().is(':visible')) {
$(this).next().slideDown();
$(this).find('span').css('transform', 'rotate(90deg)');
$(this).next().slideDown();
$accordian.find('.close').click(function () {
$(this).parent().slideUp(500);
$(this).find('span').css('transform', 'rotate(0deg)');
});
}
});
});
the problem is in this line:
$(this).find('span').css('transform', 'rotate(0deg)');
you are searching for the arrow inside the X button. you need to go 2 elements up, and search there:
Fixed Fiddle
$('#main').each(function () {
var $accordian = $(this);
$accordian.find('.view-m').on('click', function () {
$accordian.find('.mobile-content-body').slideUp();
$accordian.find('span').css('transform', 'rotate(0deg)');
if (!$(this).next().is(':visible')) {
$(this).next().slideDown();
$(this).find('span').css('transform', 'rotate(90deg)');
$(this).next().slideDown();
$accordian.find('.close').click(function () {
$(this).parent().slideUp(500);
$(this).parent().parent().find('span').css('transform', 'rotate(0deg)');
});
}
});
});
Change this line
$(this).find('span').css('transform', 'rotate(0deg)');
with
$(this).parent().prev('.view-m').find('span').css('transform', 'rotate(0deg)');
DEMO
Related
This drop down div is view after click packages and i want to add when select choose your destination change the icon set. i tried but when click drop down item on list main div slide up...
my jquery code is below
//SLIDE UP AND DOWN FUNCTION
$('li.dropdown-packages a').on('click', function(e){
e.preventDefault();
e.stopPropagation();
var $packages = $('.custom-packages');
if($packages.is(":visible")){
$packages.slideUp(350);
setTimeout(function () {
$('li.dropdown-packages').removeClass('dwn-arrow');
}, 800);
}
if($packages.is(":hidden")){
$packages.slideDown(350);
setTimeout(function () {
$('li.dropdown-packages').addClass('dwn-arrow');
},800);
}
});
Use the slideToggle() method.
$('li.dropdown-packages a').on('click', function(e){
e.preventDefault();
e.stopPropagation();
var $packages = $('.custom-packages');
$packages.slideToggle();
});
jQuery is still a learning process for me, but I have an accordion script here and I am looking to add a close icon to each toggle menu that will close the toggle once it has been opened, however I can't seem to get it to work. Thoughts?
FIDDLE
$('#main').each(function () {
var $accordian = $(this);
$accordian.find('.view-m').on('click', function () {
$accordian.find('.mobile-content-body').slideUp();
$accordian.find('span').css('transform', 'rotate(0deg)');
if (!$(this).next().is(':visible')) {
$(this).next().slideDown();
$(this).find('span').css('transform', 'rotate(90deg)');
$(this).next().slideDown();
$accordian.find('.close').slideToggle(500);
}
});
});
You need to replace:
$accordian.find('.close').slideToggle(500);
->
$accordian.find('.close').click(function() {
$(this).parent().slideUp(500);
});
Or
$accordian.find('.close').on('click',function() {
$(this).parent().slideUp(500);
});
JSFiddle
I have a FIDDLE
It's a toggle which shows and hides multiple toggled divs. I have it currently set to also toggle the arrow down when the div is opened, however once the div is closed the arrow still stays in a downward position, I want it to return to a rightward position.
$(this).find('span').css('transform', 'rotate(0deg)');
Full script
$(document).ready(function () {
// Toggles 1st Hidden Desktop Div
$(".dtc-s").click(function () {
$(".dtc-h").slideToggle(500);
$(".dtc-two-h, dtc-three-h").hide(500);
$(this).find('span').css('transform', 'rotate(90deg)');
});
// Toggles 2nd Hidden Desktop Div
$(".dtc-two-s").click(function () {
$(".dtc-two-h").slideToggle(500);
$(".dtc-three-h, .dtc-h").hide(500);
$(this).find('span').css('transform', 'rotate(90deg)');
});
// Toggles 3rd Hidden Desktop Div
$(".dtc-three-s").click(function () {
$(".dtc-three-h").slideToggle(500);
$(".dtc-two-h, .dtc-h").hide(500);
$(this).find('span').css('transform', 'rotate(90deg)');
});
// #1
if ($('.dtc-one').is(':visible')) $(this).next().slideDown();
$(this).find('span').css('transform', 'rotate(0deg)');
// #2
if ($('.dtc-two').is(':visible')) $(this).next().slideDown();
$(this).find('span').css('transform', 'rotate(0deg)');
// #3
if ($('.dtc-three').is(':visible')) $(this).next().slideDown();
$(this).find('span').css('transform', 'rotate(0deg)');
});
Try adding the :visible check inside the click function. Like so:
$(".dtc-s").click(function () {
if($(".dtc-h").is(":visible"))
$(this).find('span').css('transform', 'rotate(0deg)');
else
$(this).find('span').css('transform', 'rotate(90deg)');
$(".dtc-h").slideToggle(500);
$(".dtc-two-h").hide(500);
$(".dtc-three-h").hide(500);
});
Fiddle: http://jsfiddle.net/59kz17d9/1/ (I've done it only for the first arrow)
Hi I have the following: FIDDLE
It's essentially an accordion toggle menu. What I am trying to do is rotate the arrow from the right position to a downward position once the menu has been toggled open. Upon the menu closing I would like the arrow to rotate back its rightward position. I have tried doing it by finding the CSS and
transform: rotate(-90deg)
However, the position of the arrow does not change. Thoughts? This is the <script>
//Dekstop Content
$('.content').each(function () {
var $accordian = $(this);
$accordian.find('.view').on('click', function () {
$accordian.find('.content-body').slideUp();
$accordian.find('span').css("transform", 'rotate(0deg);');
if (!$(this).next().is(':visible')) {
$(this).next().slideDown();
$(this).find('span').css({"transform": 'rotate(90deg);'})
}
});
});
The .css should look like this: .css('Property-Name','Value')
Try this code:
//Dekstop Content
$('#content').each(function () {
var $accordian = $(this);
$accordian.find('.view').on('click', function () {
$accordian.find('.content-body').slideUp();
$accordian.find('span').css('transform','rotate(0deg)'); // Changed
if (!$(this).next().is(':visible')) {
$(this).next().slideDown();
$(this).find('span').css('transform', 'rotate(90deg)'); // Changed
}
});
});
Greetings from Vienna
Hi this is a two in one question. I have the following fiddle:
Fiddle
I am trying to make it so the arrow goes to a downward position when the menu is toggled open and then have the arrow return to an upward position when the menu is closed. I would like it also so that when another "Click Me" is clicked if another is open it closes the previous. It was easier for an accordion style menu, but this has multiple open and closed divs. Thoughts?
$(document).ready(function () {
// Toggles 1st Hidden Desktop Div
$(".dtc-s").click(function () {
$(".dtc-h").slideToggle(500);
$(".dtc-h").find('span').css('transform', 'rotate(90deg)');
});
// Toggles 2nd Hidden Desktop Div
$(".dtc-two-s").click(function () {
$(".dtc-two-h").slideToggle(500);
$(".dtc-two-h").find('span').css('transform', 'rotate(90deg)');
});
// Toggles 3rd Hidden Desktop Div
$(".dtc-three-s").click(function () {
$(".dtc-three-h").slideToggle(500);
$(".dtc-three-h").find('span').css('transform', 'rotate(90deg)');
});
// #1
if ($('.dtc-one').is(':visible')) $(this).next().slideDown();
$(this).find('span').css('transform', 'rotate(0deg)');
// #2
if ($('.dtc-two').is(':visible')) $(this).next().slideDown();
$(this).find('span').css('transform', 'rotate(0deg)');
// #3
if ($('.dtc-three').is(':visible')) $(this).next().slideDown();
$(this).find('span').css('transform', 'rotate(0deg)'); {}
});
"I would like it also so that when another "Click Me" is clicked if another is open it closes the previous"
For this part you can hide the 2 other divs on click like this
$(".dtc-s").click(function () {
$(".dtc-h").slideToggle(500);
$(".dtc-two-h").hide(500);
$(".dtc-three-h").hide(500);
});
fiddle here
Still looking for your first question
Edit:
for your first question change this line
$(".dtc-h").find('span').css('transform', 'rotate(90deg)');
to this
$(this).find('span').css('transform', 'rotate(90deg)');
if you want to return the arrow to its right position you might need to include a flag or add/remove a .rotation class to the element
Edit2: "if there is a way once a new "Click Me" is toggled can the arrow of that previous opened toggle return to its rightward position?" fiddle here
the idea:
$(".dtc-two-s").find('span').removeClass('transform'); //not clicked => remove rotation
$(".dtc-three-s").find('span').removeClass('transform'); //not clicked => remove rotation
$(this).find('span').toggleClass('transform'); //clicked => add rotation
i think you want something like this
Js Fiddle
$(this).find('span').toggleClass('transform');
$(document).ready(function () {
// Toggles 1st Hidden Desktop Div
$(".dtc-s").click(function () {
$(".dtc-h").slideToggle(500,function(){checkAll();});
$(".dtc-two-h").hide(500,function(){checkAll();});
$(".dtc-three-h").hide(500,function(){checkAll();});
$(".dtc-s").find('span').css('transform', 'rotate(90deg)');
});
// Toggles 2nd Hidden Desktop Div
$(".dtc-two-s").click(function () {
$(".dtc-two-h").slideToggle(500,function(){checkAll();});
$(".dtc-h").hide(500,function(){checkAll();});
$(".dtc-three-h").hide(500,function(){checkAll();});
$(".dtc-two-s").find('span').css('transform', 'rotate(90deg)');
});
// Toggles 3rd Hidden Desktop Div
$(".dtc-three-s").click(function () {
$(".dtc-three-h").slideToggle(500,function(){checkAll();});
$(".dtc-two-h").hide(500,function(){checkAll();});
$(".dtc-h").hide(500,function(){checkAll();});
$(".dtc-three-s").find('span').css('transform', 'rotate(90deg)');
});
});
function checkAll(){
if ($('.dtc-one').css('display') == 'none')
$('.dtc-s').find('span').css('transform', '');
if ($('.dtc-two').css('display') == 'none')
$('.dtc-two-s').find('span').css('transform', '');
if ($('.dtc-three').css('display') == 'none')
$('.dtc-three-s').find('span').css('transform', '');
}