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...
Related
I wrote a code where a div appears if someone hovers other div, I added the 5 seconds delay so the shown div stays but the problem is that I want it to stay until next link hovered. Means I need the first div to be disappeared if the second link hovered.
Here's JS Fiddle link of my existing code:
http://jsfiddle.net/np87e/880/
$( document ).ready(function() {
$("#theLink3").hover(
function () {
$("#theDiv3").slideDown();
},
function () {
$("#theDiv3").delay(5000).slideUp();
}
);
$("#theLink4").hover(
function () {
$("#theDiv4").slideDown();
},
function () {
$("#theDiv4").delay(5000).slideUp();
}
);
});
You need to call slideUp() of the div in next elements mouseenter callback
$("#theLink3").hover(function () {
$("#theDiv4").stop(true, true).slideUp();
$("#theDiv3").slideDown();
}, function () {
$("#theDiv3").delay(5000).slideUp();
});
Demo: Fiddle
Note: I'm not a fan of writing individual hover handlers like you have done. So
hover here
<div id="theDiv3" class="target">this is the div</div>
<hr />
hover here
<div id="theDiv4" class="target">this is the div</div>
<hr />
then
jQuery(function ($) {
var $targets = $('.target');
$(".trigger").hover(function () {
var $target = $(this).next('.target').stop(true, true).slideDown();
$targets.not($target).stop(true, true).slideUp();
}, function () {
$(this).next('.target').stop(true, true).delay(5000).slideUp();
});
});
Demo: Fiddle
I want to do a simple function in Jquery: when a button is clicked show the input text, when it's clicked again- hide the input text.
<div>
<div id="btnNewGroup">New Group</div>
<input type="text" id="newGroup" style="display:none" />
</div>
and this is the scrupt section:
$(document).ready(function () {
$("#btnNewGroup").click(function () {
if ($("#newGroup").hide()) {
$("#newGroup").show();
}
else {
$("#newGroup").hide()
}
});
});
when I click the button the text input is showing, when I click it again I want the input text to be hidden, but nothing happens.
You can use toggle() to show / hide
Live Demo
$("#btnNewGroup").click(function () {
$("#newGroup").toggle();
});
The problem with the condition you have is that you are hiding the element instead of checking if it is hidden. You can is with :hidden like is(':hidden') to check if element is hidden.
if ($("#newGroup").is(':hidden')) {
$("#newGroup").show();
else
$("#newGroup").hide();
if ($("#newGroup").hide())
The hide function does not return a boolean value so you can't use it in an if statement. It returns a jQuery object which is always true so your second block never gets hit.
You can try two things:
$(document).ready(function () {
$("#btnNewGroup").click(function () {
if ($("#newGroup").is(":visible")) {
$("#newGroup").hide();
}
else {
$("#newGroup").show()
}
});
});
Or a simple toggle:
$(document).ready(function () {
$("#btnNewGroup").click(function () {
$("#newGroup").toggle();
});
});
Additionally, when working with selectors multiple times it's a good idea to cache the element - otherwise jQuery tries to find the element each time you try:
$(document).ready(function () {
$("#btnNewGroup").click(function () {
var $newGroup = $("#newGroup"); // Cache it here
if ($newGroup.is(":visible")) {
$newGroup.hide();
}
else {
$newGroup.show()
}
});
});
use .toggle() for hide and show alternatively in jquery
$("#btnNewGroup").click(function () {
$("#newGroup").toggle();
});
Demo
Use .toggle() function
$("#btnNewGroup").click(function () {
$("#newGroup").toggle()
});
Or use :visible pseudo selector with is()
Demo
$(document).ready(function () {
$("#btnNewGroup").click(function () {
if ($("#newGroup").is(":visible")) {
$("#newGroup").hide();
}
else {
$("#newGroup").show()
}
});
});
Note :hide() function does not return boolean value. Use is(:visible) or is(:hidden)
You need to change
if ($("#newGroup").hide()) {
to (just one possible solution)
if ($("#newGroup").css('display')=='none') {
Because $("#newGroup").hide() will always return true.
And here are the full code:
$(document).ready(function () {
$("#btnNewGroup").click(function () {
if ($("#newGroup").css('display')=='none') {
$("#newGroup").show();
}
else {
$("#newGroup").hide()
}
});
});
Have a look at the .toggle() function within the API.
http://api.jquery.com/toggle/
document.getElementById("username").style.display='block';
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 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();
});
});
I have a page with an Ajax call that is supposed to replace a content div. When the link is clicked, though, the entire page is replaced with the content div, instead of it just replacing the text it was supposed to. Any thoughts?
$(document).ready(function () {
$('#gnav a').click(function () {
var page = this.hash.substr(1);
$('#contents').html("");
$('#content_wrapper').block();
$.get(page +'.php', function(gotHtml){
$('#contents').html(gotHtml);
$('#content_wrapper').unblock();
});
return false;
});
});
HTML
<div id="contents" style="height:1200px; width: 620px">
<!-- all html here that should be replaced-->
</div>
Why don't you just use $.load()?
$(function () {
$('#gnav a').click(function (e) {
e.preventDefault();
$('#contents').load(this.hash.substr(1) +'.php')
});
});