Develop Reference

jquery show and hide work but toggle doesn't

I have a question about jQuery. When I am using hide/show then it's working but when i try use toggle() instead then it's doesn't work. What's the problem?
Thanks in advance.
This is my code:
/* Dropdown menu - Start */
jQuery(document).ready(function() {
$('.enmenu').on('click', function(){
$('.ensettings').toggle();
return false;
});
$('html, body').on('click',function(){
$('.ensettings').hide();
});
$(".ensettings").click(function(e){
e.stopPropagation();
});
});
/* Dropdown menu - End */

Bootstrap dropdown submenu closing upstream submenu

I have a two-level dropdown that's working great, but when I add another level, the JS seems to be removing the open class from the previous submenu, which means that the desired third-level menu can't be seen, even though it does get the open class added.
I've tracked it down to this JS:
$(function() {
$('li.dropdown-submenu').on('click', function(event) {
event.stopPropagation();
if ($(this).hasClass('open')){
$(this).removeClass('open');
} else {
$('li.dropdown-submenu').removeClass('open');
$(this).addClass('open');
}
});
});
This is, I think, doing the undesired closing of the previous submenu. The HTML is very similar to this example.
Using an adaptation of the JS from that example, I get the third level, but then any given open submenu doesn't automatically close when clicking another submenu.
$(document).ready(function(){
$('.dropdown-submenu a').on("click", function(e){
$(this).next('ul').toggle();
e.stopPropagation();
e.preventDefault();
});
});
Need the best of both here!

I think you almost had it, you just needed to look for the different clicks.
The approach I took below was to handle all a clicks but then check to see if it had a class of test which then followed your code verbatim or else, if it didn't have a class of test it then hides all the submenus and goes to it's default href.
<script>
$(document).ready(function(){
$('.dropdown-submenu a').on("click", function(e){
if ($(this).hasClass('test')) {
$(this).next('ul').toggle();
e.stopPropagation();
e.preventDefault();
} else {
$('.dropdown-submenu ul').hide();
}
});
});
</script>
Your updated working example: https://www.w3schools.com/code/tryit.asp?filename=FUB7ECWP20DA

Maybe this is what are you looking for.
This code to close submenu when clicking another submenu.
Javascript
$(document).ready(function(){
$('.dropdown-submenu a.test').on("click", function(e){
/* This is to hide all dropdown-menu children if the parent(dropdown-submenu) in the element have been clicked */
$(this).next('ul').find('.dropdown-menu').each(function(){
$(this).hide();
});
/* This is to find another dropdown-menu have has been opened and hide its submenu */
var xw = $(this);
$(this).closest(".dropdown-menu").find('.dropdown-submenu a.test').not(xw).each(function(){
if($(this).next("ul").is(":visible")){
$(this).next("ul").hide();
}
});
$(this).next('ul').toggle();
e.stopPropagation();
e.preventDefault();
});
});
And JSFiddle example : https://jsfiddle.net/synz/vasho634/

I hope this is what you want. Here is the Solution, Not Full Proof but upto that extent whre you want
$(document).ready(function(){
$('.dropdown-submenu a.test').on("click", function(e){
siblingUl = $(this).parent().siblings("li.dropdown-submenu").children("ul").css("display");
if(siblingUl == "block"){
$(this).parent().siblings("li.dropdown-submenu").children("ul").toggle();
}
$(this).next('ul').toggle();
e.stopPropagation();
e.preventDefault();
});
});

Helping to create style similar to accordian - jquery

I am currently implementing a set of tabs similar to the style of an accordian.
This is my code so far...
http://codepen.io/anon/pen/uqBnH
I am having trouble closing the others when one is selected.
My jQuery code...
$(function(){
$('.panel').hide();
$('.mobtabs').click(function(){
$(this).next().toggle();
});
});
Any help would be greatly appreciated.

Just toggle the others shut with:
$(function () {
$('.panel').hide();
$('.mobtabs').click(function () {
$('.mobtabs').not($(this)).next().hide();
$(this).next().toggle();
});
});
jsFiddle example

You can use:
$(function () {
$('.panel').hide();
$('.mobtabs').click(function () {
var nextPanel = $(this).next();
$('.panel').not(nextPanel).hide();
nextPanel.toggle();
});
});
Fiddle Demo

Make the following changes (I added the sliding) -
$('.panel').hide();
$('.mobtabs').click(function(){
$('.mobtabs').not( $(this) ).next().slideUp(); // close them all
$(this).next().slideToggle(); // slide open (or closed if it applies) this tab
});

jquery menu bar fadein fadeout error

so after some questioning i wrote a jsfiddle page to show you what im tried. When going over the link the div shows up but when the mouse goes over it it fadesout and again fadesin. Isnt posible that when going above the div it just stays there until you move the mouse away?
the example on jsfiddle works when you go above the menubar Crepes..
here´s my jquery code.. the css and html are on jsfiddle
thanks for the help!
http://jsfiddle.net/DFxB7/
<script type="text/javascript">
$("#crep, #front").hover(function (e) {
e.preventDefault();
$("#front").fadeIn();
},
function(){
$("#front").fadeOut();
});
</script>

add the event .stop() like this:
$("#crep, #front").hover(function (e) {
e.preventDefault();
$("#front").stop().fadeIn();
},
function(){
$("#front").stop().fadeOut();
});
DEMO

I believe this may give you the functionality you're after...
var toggle = 0;
$("#crep, #front").hover(function (e) {
if(toggle == 0)
{
toggle = 1;
$("#front").stop().fadeIn();
}else{
toggle = 0;
$("#front").stop().fadeOut();
}
});

toggleClass on the same container and show different content with tabs effect

I ran into this problem that if I toggleClass on the same container using different links trying to show different content it wont show the container on any second link right away. Basically it will close the container and then I would have to click the link once again in order to show the content. I am trying to achieve tabs effect using the same container and toggleClass and unfortunately I can't figure out of how to show the container right away on second link. I would appreciate any advice.
Here is a live example http://jsbin.com/eyEnEvEC/1/
and the entire code.
CSS
.container {
display:none;
}
.show {
display:block;
}
HTML
Link 1
Link 2
<div class="container"></div>
Javascript
$(function(){
$('#link1').click(function(){
$('.container').html('Test 1');
$('.container').toggleClass('show');
return false;
});
$('#link2').click(function(){
$('.container').html('Test 2');
$('.container').toggleClass('show');
return false;
});
});

Try this
HTML
Link 1
Link 2
JQuery
$(function(){
$.fn.toggleContent = function(ahtml) {
var cstatus = $(this).attr("data-status");
$("a[id^=link]").attr("data-status","inactive");
if(cstatus == "inactive") {
$('.container').html(ahtml).show();
$(this).attr("data-status","active");
}
else {
$('.container').html(ahtml).hide();
$(this).attr("data-status","inactive");
}
return false;
};
$('#link1').click(function(){
$(this).toggleContent('Test 1');
});
$('#link2').click(function(){
$(this).toggleContent('Test 2');
});
});
Demo : http://jsbin.com/eyEnEvEC/9/edit