Develop Reference

Hide content in <div> using .html() without hiding inner <div>

I have the following HTML code, generated by C#:
<div class="more-news-items" id="#id">
<p>Content goes here</p>
<div style="text-align:center">
<button class="newsfeed-hide">TOON MINDER</button>
<button class="newsfeed-more">TOON MEER</button>
</div>
</div>
I want to hide the
<p>Content goes here</p>
using the following Javascript code, but I want to keep the buttons still in the div. How would I achieve this, and if it is not possible, how can I do this?
$(document).ready(function () {
div.find('.newsfeed-hide').click(function () {
$('.more-news-items').html('');
});
});

Try
$(document).ready(function () {
$('.newsfeed-hide').click(function () {
$('div.more-news-items').children('p').hide();
});
});
OR
$(document).ready(function () {
$('.newsfeed-hide').click(function () {
$('div.more-news-items p').hide();
});
});
OR
$(document).ready(function () {
$('.newsfeed-hide').click(function () {
$(this).parent().siblings('p').hide();
});
});

try:
$(document).ready(function () {
$('.newsfeed-hide').click(function () {
$(this).parent().siblings('p').hide();
});
});
This will hide a p's that are siblings of the parent that the button is in.
But other posts are right in as much as if you want to hide all p's in div's with the class .more-news-items you can select this using $('.more-news-items p') instead. Depending on the exact situation you are using this code in (i.e. if you will have more than one area and only want all p's in all areas removed, or only the ones local to the button.
EDIT:
Remove the $('.more-news-items').html(''); also, this will remove all html inside the .more-news-items div, which you do not want to do here.
Here is the live example: http://jsfiddle.net/lee_gladding/dujc66qd/

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();
}
});
});

Javascript/jQuery close notification fade out

Hello I have made a basic sticky notification that shows on my website, I am trying to make it so you can manually close it by clicking a button but it won't seem to work? Here is my code:
<script>
$(function() {
$("#closeBtn").click(function () {
$(".notification").fadeOut(500);
return false;
});
});
</script>
<div class="notification" id="success">
Message sent
<a href="#" id="closeBtn">
<div class="close">
<div class="closeTxt">X</div>
</div>
</a>
</div>

try using .on() for the elements created dynamically
$(document).on('click','#closeBtn',function() {
$(".notification").fadeOut(500);
return false;
});

Because the element is added to the DOM after page load, you need to use .on() instead of .click():
$(document).on('click', '#closeBtn', function (e) {
e.preventDefault();
$('.notification').fadeOut(500);
});

When the element is added Dynamically you have two choices.
function myFadeOut() {
$(".notification").fadeOut(500);
return false;
}
Using the on:
$(document).on('click', '#closeBtn', myFadeOut);
Or more clean, adding the click directly on the node when you generate it:
var $myNode = $('<div class="someNode"></div>');
$myNode.click( myFadeOut);
$(".foobar").append($myNode);

Why does the jQuery file upload stop working after first upload?

I'm using the jQuery File Upload plugin. I'm hiding the file input and activating it upon clicking a separate button. (See this fiddle.)
HTML:
<div>
<button class="browse">Browse</button>
<input id="upload" type="file" style="display: none;" />
</div>
JavaScript:
var element = $("#upload");
$(".browse").click(function () {
$("#upload").trigger("click");
});
element.fileupload({
add: function () {
alert("add");
}
});
Notice that if you press the button then select a file, the add method is activated and you'll get an alert. Do it again, and you'll get another alert.
Now, see this fiddle. The only difference is that I've changed the following line
$("#upload").trigger("click");
to
element.trigger("click");
Notice that now, the first time you click the button then select a file, the add method is activated and you get the alert (just like before), but if you do it again, the add method never activates.
What is causing this difference in behavior?

This can also be solved by setting replaceFileInput to false, as stated by the documentation. This is because the plugin recreates the input element after each upload, and so events bound to the original input will be lost.

It looks as though the scope of element is being lost / changed after the add function. Resetting it like below seems to work.
var element = $("#upload");
$(".browse").click(function () {
element.trigger("click");
});
element.fileupload({
add: function () {
alert("add");
element = $(this);
}
});
Fiddle

Try this one: http://jsfiddle.net/xSAQN/6/
var input = $("#upload");
$(".browse").click(function () {
input.trigger("click", uploadit(input));
});
function uploadit(input){
$(input).fileupload({
add: function () {
alert("add");
}
});
}
Although there is one more way:
just change to this:
var element = $("#upload");
$(".browse").click(function () {
$("#upload").click(); // <----trigger the click this way
});
element.fileupload({
add: function () {
alert("add");
}
});