CODEWITHSUNDEEP
jqueryhidetoggleshow
Jason Wells
Jason Wells

Reputation: 889

jQuery, toggle()

My page has dynamic divs and within them I want to toggle between two divs. I need to preserve the original value of the div so this may be the wrong approach

Here's my code thus far, I cannot seem to get it going.

$(".change").live("click", function() {
  var changeDiv = $(this).parents(".changeContainer").find(".changeDiv");
  changeDiv.toggle();
  changeDiv.html(changeDiv.html() == '<input type='text' />' ? 'Original Value of the DIV' : '<input type='text' />');
}


<div class="changeContainer">
   <div class="changeDiv">Basketball - <a href="#" class="change">Change Sport</a>   </div>
</div>

Upvotes: 0

Views: 272

Answers (2)

Ben Barden
Ben Barden

Reputation: 2111

Rather than a toggle, just use standard show/hide. Put in both divs, have one of them start with style="display:hidden" and then use jquery .hide() and .show() on the appropriate divs to swap between them.

Upvotes: 1

dmaij
dmaij

Reputation: 1007

Maybe you should be more in the line of

$(".change").live("click", function() {
  var changeDiv = $(this).parents(".changeContainer").find(".changeDiv");

  if(changeDiv.hasClass('orig') {
       orig_html = changeDiv.html();
       changeDiv.html('<input type='text' />');
  else
       changeDiv.html(orig_html);
  }
  changeDiv.toggleClass('orig');
}

and have a global var orig_html; Be aware, I did not test the code.

Upvotes: 0

Related Questions