We Keep Coding

Remove from inside div using jQuery

I have written a script that is supposed to render text (later a partial view) inside a div on click. I detect if div is visible or not and if not, I add text on click and make the div visible. This part works perfectly. When clicked and the div is visible I want to remove what has been added so that it wont multiply if I click it multiple times.
I get both alert - so detection of div visibility works but the text is not removed and it multiplies if I click it many times.
Here is my code - can you tell me what i am doing wrong?
<script language="javascript">
$(document).ready(function () {
$(".content").hide();
$(".heading").click(function () {
var id = $(this).attr("id");
var content = $(this).next(".content");
if (content.is(":hidden")) {
content.append("<p id='render-object'>Testing rendering on click</p>");
alert('Content is opening');
}
else if (content.is(":visible")) {
content.next("#render-object").remove();
alert('Content is closing');
}
content.slideToggle(100);
});
});
</script>

You probably want to use .find() instead of .next() when removing.

Use .html() instead of .append()
<script language="javascript">
$(document).ready(function () {
$(".content").hide();
$(".heading").click(function () {
var id = $(this).attr("id");
var content = $(this).next(".content");
if (content.is(":hidden")) {
content.html("<p id='render-object'>Testing rendering on click</p>");
alert('Content is opening');
}
else if (content.is(":visible")) {
content.find("#render-object").remove();
alert('Content is closing');
}
content.slideToggle(100);
});
});
</script>
Edit : - use .find() instead of .next() as render-object is child of content and not sibling

use .find instead of .next and use .html instead of .append
<script language="javascript">
$(document).ready(function () {
$(".content").hide();
$(".heading").click(function () {
var id = $(this).attr("id");
var content = $(".content");
if (content.is(":hidden")) {
content.html("<p id='render-object'>Testing rendering on click</p>");
alert('Content is opening');
}
else if (content.is(":visible")) {
content.find("#render-object").remove();
alert('Content is closing');
}
content.slideToggle(100);
});
});
</script>

On click add/remove overflow hidden

I'm trying to add/remove .css('overflow-y','hidden') onclick, Which I did. The problem appears when I try to remove that css, also onclick. But this time, user needs to click on another element.
Idea is to have modal (twitter bootstrap 2.3) window where there is some data and when user click on modal button (triggers) the css applies to html element in order to prevent scrolling of the website. And now when I click anywhere on modal (modal shuts down) but there is still overflow-y styling and because of it I can't scroll my page.
So this is what I've made, but I have been stuck here and don't know where I am making mistake. Could anyone help me with this one, and if is possible give me some advice so I could take care in future.
Thanks!
<script type="text/javascript">
$('#myModal').modal('hide') // initializes and invokes show immediately</p>
$('.note').delay(10000).fadeOut('slow');
$(document).ready(function() {
var $html = $('html');
var $button = $('.container > .btn-primary');
var $modal = $('.modal-backdrop');
$button.on('click', function(e) {
$html.css('overflow-y', 'hidden');
if ($html.attr('style')) {
alert('WORKS!');
}
else {
$modal.onclick( function() {
$html.css('overflow-y','scroll');
});
};
});
});
</script>

Put your css in a class and use jquery's .toggleClass() to show/hide the overflow.
Here's a simplified example: http://jsbin.com/towiyaqa/1/

You can use like this:
$button.on('click', function(e) {
$html.css('overflow-y','hidden' ? 'scroll' : 'hidden');
e.preventDefault();
})

Here is solution for problem:
$(document).ready(function() {
var $html = $('html');
var $button = $('.container > .btn-primary');
var $modal = $('.modal-backdrop');
$button.on('click', function(e) {
$('.note').delay(10000).fadeOut('slow');
$html.css('overflow-y', 'hidden');
if ($html.attr('style')) {
console.log("overflow-y: hidden added");
}
});
$('#myModal').on('hidden.bs.modal', function () {
// do something…
console.log("fires myModal");
$html.css('overflow-y','scroll');
});
});
</script>

Replace only text inside div and toggle different div content using jquery

show below jquery code
$(document).ready(function () {
$('#prvnote').hide();
$('#regclass').click(function () {
$('#prvnote').toggle(400);
$('#newdiv').toggle(400);
});
});
show below HTML code
This div only use as menu
<div id="regclass"><span>View Previous Note</span></div>
Now when i clicked on above div content then below div will display and above span tag content replace with "Post Note"
<div id="newdiv"><form>......</form></div>
<div id="prvnote"><form>......</form></div>
When div(newdiv) show then span content "Post Note" and when div(prvnote) show then span content must be "View Previous Note"

Try this
$(document).ready(function () {
$('#prvnote,#newdiv').hide();
$("#regclass").toggle(function () {
$('#regclass span').text('Post Note');
$('#prvnote').toggle(400);
$('#newdiv').toggle(400);
}, function () {
$('#regclass span').text('View Previous Note');
$('#prvnote').toggle(400);
$('#newdiv').toggle(400);
});
});
DEMO

HTML
<div id="newdiv" style="display:none"><form>......</form></div>
<div id="prvnote"style="display:none"><form>......</form></div>
<div id="regclass"><span>View Previous Note</span></div>
Jquery
$('#regclass').click(function () {
alert("Hi");
$("#regclass span").html("").append("POST NOW");
$('#prvnote').css({"display":"block"});
$('#newdiv').css({"display":"block"});
});
Check The Fiddler Here
http://jsfiddle.net/ShekharPankaj/3htMG/

Try this:
$(document).ready(function () {
$('#prvnote').hide();
$("#regclass").toggle(function () {
$('#regclass span').text('Post Note');
$('#prvnote').toggle(400);
$('#newdiv').toggle(400);
}, function () {
$('#regclass span').text('View Previous Note');
$('#prvnote').toggle(400);
$('#newdiv').toggle(400);
});
});
Taken from Sridhar R, i understand you want to show only one div at a time...

Element targeting in jquery

I have an element that I am using as an expander. When I click on it uses the toggle function to show/hide the expander-container element.
<script type="text/javascript">
$(document).ready(function () {
$(".expand-icon").click(function () {
$(".expander-container").toggle(500);
});
});
<img class="expand-icon" src="./Content/Icons/toggle-expand-icon.png" alt="some_text" />
<div class="expander-container" >
...
</div>
How can I target only the next occurence of the expander-container element without targeting all of them on the page?

I think you should go for go for
$(".expand-icon").click(function () {
$(this).next('.expander-container').toggle(500);
});

Use .next()
$(document).ready(function () {
$(".expand-icon").click(function () {
$(this).next(".expander-container").toggle(500);
});
});
Here is the working demo : http://jsfiddle.net/XLNM5/

How do i make so the div's overlap with eachother?

How do i make that when i press a button instead of that the div like dropping under the div the the maybe 'home' div disappear when i fire the other show hidden div ?
Here's the Javascript:
jQuery(document).ready(function () {
jQuery('#hideshow2').live('click', function (event) {
jQuery('#content2').toggle('show');
});
});

pretty easy..... See this fiddle. http://jsfiddle.net/RCfVX/
jQuery(document).ready(function () {
jQuery('#homebtn').click(function (event) {
jQuery('#one').toggle();
jQuery('#two').toggle();
});
});