简体   繁体   中英

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...

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.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM