Develop Reference

add "x" icon that hides the current open accordion

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

jQuery toggle arrow down 'ontoggle'

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

Have arrow toggle back (0deg) when "x" close icon is clicked

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

Mutiple div toggle with arrow toggle

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', '');
}

Hide DIV after click (jQuery)

I have a list item that displays a hidden div once its clicked. I want to be able to hide the div if the list item is click on again. How can I do this?
$(function () {
"use strict";
function resetTabs() {
$("#sub_content > div").hide(); //Hide all content
$("#tabs a").removeClass("current"); //Reset id's
}
$("#sub_content > div").hide(); // Initially hide all content
$("#tabs a").on("click", function (e) {
e.preventDefault();
resetTabs();
$(this).addClass("current"); // Activate this
$($(this).attr('name')).fadeIn(); // Show content for current tab
});
});
http://jsfiddle.net/E9mPw/
Thanks.

You can use fadeToggle()
$($(this).attr('name')).fadeToggle();
http://jsfiddle.net/E9mPw/2/

you just can add "if" statement, if you just want to fix your script
$("#tabs a").on("click", function (e) {
e.preventDefault();
if($(this).hasClass('current')){
resetTabs();
}
else{
resetTabs();
$(this).addClass("current"); // Activate this
$($(this).attr('name')).fadeIn(); // Show content for current tab
}
});
http://jsfiddle.net/E9mPw/7/

You can use toggle jquery properties.
$("#tabs a").on("click", function (e) {
e.preventDefault();
resetTabs();
$(this).toggle("current");
});
You chould check this links

You can check if the a has the class current and fade it out accordingly:
$("#tabs a").on("click", function (e) {
e.preventDefault();
//resetTabs();
if($(this).hasClass("current"))
{
$(this).removeClass("current");
$($(this).attr('name')).fadeOut(); // Hide content for current tab
}
else
{
$(this).addClass("current"); // Activate this
$($(this).attr('name')).fadeIn(); // Show content for current tab
}
});
JSFiddle