Develop Reference

Inconsistent jquery button click behaviour

Im a bit new to jquery so this may be a common probably but I am unable to find what I need on the web.
The issue:
I have a div(inner1) inside a div(outer), the inner1 div is hidden until a button is clicked, when clicked the inner1 div is shown and fades out the background. Within inner1 I have another div(inner2) with similar functionality. When inner1 shows a button is displayed to show inner2. The above works fine. My issue is that if I click the button to show inner1, then exit(hide) the shown div(inner1) then push the button to show it again it now shows both of the inner divs(inner1, inner2). Does this make sense? I have no idea why this is happening.
The Code:
Html:
<div class="documentlist">
<div class="modalBackground"></div>
<div class="modalContent"> x
Text1
<input type="button" id="btnsm1" value="t1" />
<div class="documentdetails">
<div class="modalBackground"></div>
<div class="modalContent"> x Text2</div>
</div>
</div>
</div>
<input type="button" id="btnsm" value="t" />
Jquery:
$(document).ready(function () {
$('#btnsm').on('click', function () {
$('.documentlist>.modalBackground').toggleClass('show');
$('.documentlist>.modalContent').toggleClass('show');
});
$('#btnsm1').on('click', function () {
$('.documentdetails>.modalBackground').toggleClass('show');
$('.documentdetails>.modalContent').toggleClass('show');
});
$('.close-modal').on('click', function () {
$('.modalBackground').toggleClass('show');
$('.modalContent').toggleClass('show');
});
$('.modalBackground').on('click', function () {
$('.modalBackground').toggleClass('show');
$('.modalContent').toggleClass('show');
});
});
A Fiddle of the above.
Does anyone have any ideas?

You need to explicitly say removeClass since .toggle() adds 'show' if not there and removes 'show' if present, cant rely on that in close where you always want to remove the show class from both the elements
Here is what you want to do
$('.close-modal,.modalBackground').on('click', function () {
$('.modalBackground').removeClass('show');
$('.modalContent').removeClass('show');
});
Edit 2: I didn't check you had to use back as close trigger updated fiddle $('.close-modal,.modalBackground')
Updated fiddle

$(document).ready(function () {
$('#btnsm').on('click', function () {
$('.documentlist>.modalBackground').toggleClass('show');
$('.documentlist>.modalContent').toggleClass('show');
});
$('#btnsm1').on('click', function () {
$('.documentdetails>.modalBackground').toggleClass('show');
$('.documentdetails>.modalContent').toggleClass('show');
});
$('.close-modal').on('click', function () {
$('.modalBackground').removeClass('show');
$('.modalContent').removeClass('show');
});
$('.modalBackground').on('click', function () {
$('.modalBackground').removeClass('show');
$('.modalContent').removeClass('show');
});
});
Check this

Change TinyMCE HTML after the plugin is enabled

I can change the HTML displayed in TinyMCE by clicking "restore". I now wish to return the HTML to the orignal HTML by clicking "cancel". For the life of me, I cannot figure out why my approach doesn't work (it displays the newly modified HTML). How is this accomplished. Please see http://jsfiddle.net/3pn3x4zj/ which is duplicated below. Thank you.
JavaScript
tinymce.init({
selector: '#tinymce',
setup: function (ed) {
ed.on('init', function (e) {
e.target.hide();
});
}
});
$(function () {
$('#cancel').hide();
$('#restore').click(function () {
console.log('Save old HTML and put new HTML from GET request in DIV');
$('#cancel').show();
$('#restore').hide();
$(this).parent().data('oldHTML', $('#tinymce').html());
var newHTMLgottenFromGetRequest = '<p>Bar Bar Bar</p>'
$('#tinymce').html(newHTMLgottenFromGetRequest);
tinymce.get('tinymce').show();
});
$('#cancel').click(function () {
console.log('Put back original HTML');
$('#cancel').hide();
$('#restore').show();
$('#tinymce').html($(this).parent().data('oldHTML'));
tinymce.get('tinymce').hide();
});
});
HTML
<div id="tinymce">
<p>Foo Foo Foo</p>
</div>
<button id="restore">restore</button>
<button id="cancel">cancel</button>

Try reversing these lines in the #cancel click event:
$('#tinymce').html($(this).parent().data('oldHTML'));
tinymce.get('tinymce').hide();
becomes
tinymce.get('tinymce').hide();
$('#tinymce').html($(this).parent().data('oldHTML'));

Toggle spans inside an <a>

I am trying to create a function that will toggle optional inputs if chosen, here is what I have done so far:
HTML:
<div>
<input>
<a class="input-toggle" href="#"><span>Toggle Option</span><span>Close</span></a>
<div class="input-toggle-content">
<input name="">
</div>
</div>
JavaScript:
$('.input-toggle').each(function() {
$(this).next("div").hide().end();
$("span:last-of-type").hide();
$(this).on('click', function() {
$(this).next("div").slideToggle();
$("span:first-of-type").hide();
$("span:last-of-type").show();
});
});
So, the way it should work is when clicked on .input-toggle the div that is just next to it will be toggled and if clicked again the div will go away... I got this bit working, however, I want to also toggle <span>Toggle Option</span> with <span>Close</span> and I can't get it working... I don't know if the way I structured my function is correct?

Try,
$('.input-toggle + div.input-toggle-content').hide();
$(".input-toggle span:last-of-type").hide();
$('.input-toggle').click(function () {
$(this).next('div.input-toggle-content').toggle();
var spans = $('span', this);
spans.not(spans.filter(':visible').hide()).show();
});
DEMO

here you go: http://jsfiddle.net/jPe3A/
$('.input-toggle').each(function() {
$(this).next("div").hide().end();
$("span:last-of-type").hide();
$(this).on('click', function() {
$(this).next("div").slideToggle();
if($("span:first").is(':hidden')){
$("span:first").show();
$("span:last").hide();
}
else{
$("span:first").hide();
$("span:last").show();
}
});
});

jQuery animate div up down on click

So I have this HTML
<div id="one">One</div>
<div id="two">Two <br/> <br/>
Two
</div>
<div id="three">Three</div>
<div id="four">Four <br/> <br/>
Four <br/> <br/>
Four
</div>
jQuery:
$(document).ready(function () {
$("#two").hide();
$("#four").hide();
$("#one").click(function () {
$("#four").slideUp("slow", function () {
});
$("#three").slideToggle("slow,", function () {
});
$("#two").slideToggle("slow", function () {
});
});
$("#three").click(function () {
$("#four").slideToggle("slow,", function () {});
});
});
What I'm trying to do is show div one and three one under another.
When I click div one, I want div two to show (animate), and div three (and div four, if div three is clicked too) to move position under div two (with same animation).
When I click div one again, I want div two to hide (animate) and div three (and div four, if div three clicked) to go back to the position they had before.
Here's JSFiddle: http://jsfiddle.net/6ynnR/

It seems like you want something like this: EXAMPLE HERE
Updated jQuery:
$("#two, #four").hide();
$("#one").click(function () {
$("#two").slideToggle(function () {
$("#four").slideUp();
});
});
$("#three").click(function () {
$("#four").slideToggle(function () {
$("#two").slideUp()
});
});
Alternatively, here is another approach: EXAMPLE HERE

Just remove the following code and you're good to go :D
$("#four").slideUp("slow", function () {
});
$("#three").slideToggle("slow,", function () {
});

I hope this will work for you,
I added conditional statement:
if(($("#two").is(":visible"))&&($("#four").is(":visible"))){
$("#four").slideToggle("slow,", function () {});
$("#two").slideToggle("slow,", function () {});
}
and removed two functions :
$("#four").slideUp("slow", function () {
});
$("#three").slideToggle("slow,", function () {
});
http://jsfiddle.net/uY73z/19/

After toggling div with Jquery make it stay visible

I have this jquery code:
http://jsfiddle.net/y8wPw/60/
All I want is that after DIV with content opens, it must stay visible, so that I can go over it and use this div as a form( or some other purpose). But now, if I make a MOUSEOUT from Content div , it disappears.
Jquery code:
$(document).ready(function() {
$(".body").hover(function () {
$(".desc").toggle();
})
})

$(document).ready(function() {
$(".body").hover(function () {
$(".desc").show();
})
})

Why not try:
$(document).ready(function() {
$(".body").hover(function () {
$(".desc").show();
})
})

I have edited your js fiddle code by adding a wrapper and assigning the event to it.
I guess that fixes you problem :)
updated the html to
<div id="wrap">
<div class="body">Hellp</div>
<div class="desc">Any content here!</div>
</div>
<div class="clear"></div>
updated the css
#wrap{overflow:hidden}
updated the js
$(document).ready(function() {
$("#wrap").hover(function () {
$(".desc").toggle();
})
})
The link http://jsfiddle.net/RUtgE/1/

Use .css('display', 'block') instead of .toggle()
JSFiddle

You can use mouseenter instead of hover. In this case it will show the first time you go over the "help" button, the next time it will close again.
Check out http://api.jquery.com/category/events/mouse-events/ for more mouse events to play with!

$(document).ready(function() {
$(".body").hover(function () {
$(".desc").show();
})
$(".close").click(function () {
$(".desc").hide();
})
$(".wrap").mouseleave(function () {
$(".desc").hide();
})
})
http://jsfiddle.net/y8wPw/74/
This is what i was looking for! With some of your help i managed to make it!
Thanks to all!