Question

I have a div with some id that contains some buttons/labels. Its a container itself. I want to have a button that when user clicks on the button a dialog has to appear with the same div but the div has to disappear from the page. So when Detach button is clicked a dialog appears with that div and button changes into Attach. When attach is clicked dialog disappears and regular div appears on the page.

This is what i tried so far, it works only when Detach is clicked, if Attach is clicked dialog closes but regular div does not show up.

   $(document).on('click', '#detach', function() {
      var button = $(this).text();
          if (button == 'Detach') {
           $('.search_div_box').dialog({ autoOpen: false, width: 700 });
           $('.search_div_box').dialog('open');
              $(this).html('Attach');
          } else if (button == 'Attach') {
             $('.search_div_box').dialog('close');
             $(this).html('Detach');
          }

      });

i know im missing a code in Attach part it only closes the dialog but i tried various things like appending to body again the div and so on but didnt work. Thank you

Answer 1

You could use jQuery’s $.clone() to create a duplicate of the div and then show/hide it along with the dialog like this:

var $original = $('.search_div_box');
var $clone = $('.search_div_box').clone();
    $clone.dialog({
            autoOpen: false,
            width: 700,
        });

$(document).on('click', '#detach', function() {
    var button = $(this).text();

    if (button == 'Detach') {
        $original.hide();
        $clone.dialog('open');

        $(this).html('Attach');
    } else if (button == 'Attach') {
        $original.show();
        $clone.dialog('close');

        $(this).html('Detach');
    }
});​

JSFiddle Here