Question

Hi all i am working on jquery here i have a html code like this

<div>
    <span class="span1">
      <label class="checkbox" />
          <input type="checkbox" class="regular-checkbox" id="Header" />
          <label for="Header"></label>
      </label>
    </span> 
    <span class="span1">Images</span> 
    <span class="span1">SKU</span>
    <span class="span2">Name</span> 
    <span class="span1">Price</span>                             
</div>

<div id="separate"></div>
      <input type="button" id="button" />

i had tried like this it dosen’t works

<script type="text/javascript">
    $(document).ready(function(){
    $(#button).click(function(){
   $(function () {

      $("input:checkbox").toggle(function () {
         $("#Header").appendTo("#separate");
      },function () {
         $("#separate").appendTo($(this));
      });
      });

   });
</script>

i have this DIV in which i have a checkbox from here i have an image, price and name (cell phone). This is my code and i have a ‘href’ icon
when i select the checkbox, and i submited the image and price and name should move to another DIV how can I do this and when i deselect the checkbox?
It should toggle. Could u please help me on how to fix this, thanks in advance.

Answer 1

This is how I would do it. http://jsbin.com/umivoc/1/

JavaScript:

$(function () {
  // Check if user clicks on the checkbox
  $("#Header").click(function() {

    if($('#Header').is(':checked')){

      // If the checkbox becomes checked, 
      // move the contents to our new div (div2)
      $("#div1").contents().appendTo("#div2");
    } else {

      // Otherwise we can assume it is being unchecked, 
      // so move everything back to it's original div (div1)
      $("#div2").contents().appendTo("#div1");
    }
  });
});

HTML Markup:
I cleaned up your markup quite a bit, you had open label tags, and you should probably put the elements you want to move inside their own wrapper div, to make things easy.

<span class="span1">
   <label for="Header"></label>
   <input type="checkbox" class="regular-checkbox" id="Header" />
</span> 
<div id="div1">
   <span class="span1">Images</span> 
   <span class="span1">SKU</span>
   <span class="span2">Name</span> 
   <span class="span1">Price</span>                             
</div>
<div id="div2"></div>