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);
});
});
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
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...
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.