Develop Reference

Simple jQuery accordion toggle

I am working on a simple accordion with toggle states using jQuery. So far so good, but when I click on a different toggle than the initial one that I've clicked on at the start it toggles itself, leaving the previous one with the opened state.
How can one do some kind of a check-up to see if there is another one opened and toggle its state as well?
Here is a Fiddle. Just mess around with it for a few seconds and you will understand what I mean.
// Accordion init
// Hide accordion content on load
$('.accordion-content').hide();
$('.widget-accordion').find('.accordion-toggle').click(function() {
// State change visuals
$(this).toggleClass('opened');
//Expand or collapse this panel
$(this).next().slideToggle('fast');
//Hide the other panels
$(".accordion-content").not($(this).next()).slideUp('fast');
});

As stated in my comment above, here a working fiddle.
The problem is that when you open one accordion item there is no other opened allowed which means that you have to clear every class which stands for the status open...
Working Fiddle
// Accordion init
// Hide accordion content on load
$('.accordion-content').hide();
$('.widget-accordion').find('.accordion-toggle').click(function() {
$('.accordion-toggle').not(this).each(function(){
$(this).removeClass("opened");
});
// State change visuals
$(this).toggleClass('opened');
//Expand or collapse this panel
$(this).next().slideToggle('fast');
//Hide the other panels
$(".accordion-content").not($(this).next()).slideUp('fast');
});

Use This instead of toggleClass:
// State change visuals
$('.accordion-toggle').removeClass('opened');
$(this).addClass('opened');
Fiddle: https://jsfiddle.net/cndnnww5/5/

jQuery - on jPanelMenu how to close toggled submenu when clicking anywhere outside of it?

I'm working on updating the code for an ecommerce site, the mobile menu uses the jQuery plugin jPanelMenu and the code is as follows:
var jPM = $.jPanelMenu({
menu: '#mainMenu',
trigger: '.mobileMenuLink',
duration: 300
});
jPM.on();
$('.styloSearch').clone().prependTo($('#jPanelMenu-menu'));
$('#jPanelMenu-menu').removeClass("sf-menu sf-js-enabled sf-arrows");
$('#jPanelMenu-menu li.menu-parent-item a').click(function(e){
$(this).siblings("ul").toggle();
e.preventDefault();
});
The submenu comes up when you click on a menu item, and it can be closed only by clicking on the menu item again, but I want to be able to click anywhere outside to close the submenu.
Any idea how to achieve this?
Thanks a lot!

use the $('*') selector which selects all elements
you need to keep the original function too, and add this:
$('*').click(function(e){
$(this).siblings("ul").hide();
e.preventDefault();
});

click outside bootstrap menu to close it

I tried to find solution to close bootstrap menu when clicking outside of it(in mobile window size), but cant get it to work, I get it to work when clicking one of the 'a' links by this code:
// menu buttons collapses when clicking a link
$('document').ready(function()
{
if ($('a').on('click', function()
{
$('.collapse, #mainContainer').removeClass('in');
$('.navbar-toggle').toggleClass('collapsed'); // button
}));
});
but how to close menu by clicking outside the menu navbar?
here's my page that shows the problem
iwebdesign.se
and yes i tried this already, not working:
similar question

Assuming you want to do something different when clicking outside of the menu (i.e. collapse the menu) than what happens when you click inside the menu, you probably want something like this to determine if you're clicking inside or outside of the menu:
$('body').click(function(event){
// check if the clicked element is a descendent of navigation
if ($(event.target).closest('.navigation').length) {
return; //do nothing if event target is within the navigation
} else {
// do something if the event target is outside the navigation
// code for collapsing menu here...
}
});
https://jsfiddle.net/L3qg4pa8/5/ shows the concept, roughly.
Of course, you will need to replace '.navigation' in the .closest() statement with the appropriate selector for the container of your navigation.

$(document).on('click',function(){
$('.collapse').collapse('hide');
});
Just copy the code and past your custome script or index.html
thank's Remy
click outside to hide bootstrap toggle menu close(hide) it

Here the answer :
(document).on('click',function(){
$('.collapse').collapse('hide');
})
Hope it's help :)
Remy

Jquery CSS display none

I'm really new to Jquery so I really need a some help from you guys.
I have created a button, when clicked a pop up menu will appear. Now I have created a script, what it does is when that button is clicked the sideshow on the site background will be hidden (this is to make the pop up menu much smoother), my question is after a user closes down the pop up menu, how can I reshow the hidden slideshow again , I believe it has something to do with this code onHide: function()
<script>
jQuery(document).ready(function(){
jQuery('.menubutton').click(function(){
jQuery("#slideshow").css({"display":"none"});
});
});
</script>

To show and hide alternatively use .toggle()
jQuery("#slideshow").toggle()
Demo: Fiddle
To Hide an element use .hide()
jQuery("#slideshow").hide()
To Display a hidden an element use .show()
jQuery("#slideshow").show()

I believe jQuery.toggle() is what you are after:
jQuery(document).ready(function () {
jQuery('.menubutton').click(function () {
jQuery('#slideshow').toggle();
});
});
Fiddle: http://jsfiddle.net/QGdLw/1/

Collapsing a jQuery accordion when clicking a link outside of the accordion menu

I'm using this jQuery accordion menu found here jQuery Vertical Accordion Menu Plugin. The plugin is working well without much customization. The feature that I was really looking for that this plugin offers is persistent menu state after a page refresh. This plugin uses cookies to accomplish this. On to the problem...
If you click outside the accordion menu the state is still maintained. I'm trying to figure out a way to collapse the entire menu when a link is clicked outside of the accordion menu.
My first inclination was to find some way to delete or reset the data in state saving cookie when the window.location was equal to a certain URL. (At the moment it I be happy if when returning to the home page that the menu was completely collapsed).
I'm thinking the best solution would be some jQuery that if an was clicked outside of #Accordion-Navigation was clicked that it would reset the cookie or collapse the menu.
I'm open to anything.
I tried the following with no luck.
jQuery(document).ready(function(jQuery){
var siteurl = "http://myhomepageurl.com/index.php";
if (window.location.href == siteurl) {
jQuery.cookie('dcjq-accordion-1', null, { path: '/'});
}
});
Any suggestions at a more elegant solution would be greatly appreciated! Thanks for taking the time to have a look in advance!

There is a trick to do this, just bind an event handler on your html and body element.
If the accordion was clicked you stops the propagation, otherwise you collapse the accordion.
$(function () {
$('html').on('click', collapseAccordion);
$('body')
.on('click','.accordion', function (e) { e.stopPropagation() });
});
you should make a function collapseAccordion that collapses the accordion via an api call.

$(function () {
$('body').mousedown(function (e) {
if($(e.target).closest('.accordion').length != 1){
//click was outside accordion,
// so close it
}
});