Replace Div Content onclick

Question

I know nothing about jQuery but want to achieve something really important   I want to have a button link that will replace the div content and if I press that button again so it will put the original content back in position

User · Answer

A Third Answer  Sorry  maybe I have it correct this time     jsFiddle Demo  var savedBox1  savedBox2  state1 0  state2 0   jQuery document  ready function         jQuery   rec1   click function             if  state1  0               savedBox1   jQuery   rec-box   html                jQuery   rec-box   html jQuery this  next   html                  state1   1           else              jQuery   rec-box   html savedBox1                state1   0                         jQuery   rec2   click function             if  state1  0               savedBox2   jQuery   rec-box2   html                jQuery   rec-box2   html jQuery this  next   html                  state2   1           else              jQuery   rec-box2   html savedBox2                state2   0

User · Answer

Try This      I think that you want something like this      HTML    lt div id  1  gt      My Content 1  lt  div gt    lt div id  2  style  display none   gt      My Dynamic Content  lt  div gt   lt button id  btnClick  gt Click me  lt  button gt    jQuery       btnClick   on  click  function    if     1   css  display     none        2   show   siblings  div   hide     else if     2   css  display     none            1   show   siblings  div   hide             JsFiddle  http   jsfiddle net ha6qp7w4 1113    lt --- see this I hope You want something like this

User · Answer

Here s an approach  HTML    lt div id  1  gt      My Content 1  lt  div gt    lt div id  2  style  display none   gt      My Dynamic Content  lt  div gt   lt button id  btnClick  gt Click me  lt  button gt    jQuery       btnClick   on  click  function        if     1   css  display     none            2   html  Here is my dynamic content   show   siblings  div   hide         else if     2   css  display     none                1   show   siblings  div   hide                 JsFiddle  http   jsfiddle net ha6qp7w4  http   jsfiddle net ha6qp7w4 4  lt --- Commented

User · Answer

Working from your jsFiddle example   The jsFiddle was fine  but you were missing semi-colons at the end of the event preventDefault   statements   This works  Revised jsFiddle  jQuery document  ready function         jQuery   rec1   click function event            event preventDefault            jQuery   rec-box   html jQuery this  next   html                  jQuery   rec2   click function event            event preventDefault            jQuery   rec-box2   html jQuery this  next   html

User · Answer

A simple addClass and removeClass will do the trick on what you need        change   on  click   function           div   each function          if   this  hasClass  active                 this  removeClass  active          else              this  addClass  active                     Seee fiddle  I recommend you to learn jquery first before using

User · Answer

EDIT   This answer was submitted before the OP s jsFiddle example was posted in question  See second answer for response to that jsFiddle     Here is an example of how it could work   Working jsFiddle Demo  HTML    lt div id  someDiv  gt      Once upon a midnight dreary      lt br gt While I pondered weak and weary      lt br gt Over many a quaint and curious      lt br gt Volume of forgotten lore   lt  div gt  Type new text here  lt br gt   lt input type  text  id  replacementtext    gt   lt input type  button  id  mybutt  value  Swap    gt    lt input type  hidden  id  vault    gt    javascript jQuery     Declare persistent vars outside function var savText  newText  myState   0       mybutt   click function        if  myState  0           savText       someDiv   html      save poem data from DIV         newText       replacementtext   val      save data from input field             replacementtext   val        clear input field             someDiv   html  newText      replace poem with insert field data         myState   1    remember swap has been done once       else               someDiv   html savText               replacementtext   val newText     replace contents         myState   0

[jquery] Replace Div Content onclick

Examples related to jquery

Examples related to html

Examples related to css