Question

I have this script which is working fine:

  $('a.clickMe').click(function () {
   id = $(this).attr('toggle');
   $('.text').not('#' + id).hide();
   $('#' + id).show();
  });


   <a class="clickMe" toggle="first">Text 1</a>
       </br>
   <div id="first" class="text"> - This text will be toggled</div>

   <a class="clickMe" toggle="second">Text 2</a>
   </br>
   <div id="second" class="text"> - This text will be toggled 2</div>

Please check the Fiddle

but now I’m trying to do two things:

1. if clicked anywhere on the screen, toggled text should be disappeared and should come back to original position.
2. Text which is toggled should be draggable on the screen also need to add a closing button.

Please help me to fix this.

Answer 1

$('a.clickMe').click(function () {
   id = $(this).attr('toggle');
   $('#' + id).toggle();

});​

see edit

 $('a.clickMe').draggable();

now see draggable