title: Javascript- How to show div when close button is clicked?
body: <p>I have a web page that looks like below:</p>
  
  <p><a href="https://i.stack.imgur.com/bPMXn.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/bPMXn.jpg" alt="enter image description here"></a></p>
  
  <p>So after clicking the <code>Edit URL</code> button, it shall bring me to this page:</p>
  
  <p><a href="https://i.stack.imgur.com/2HQsU.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/2HQsU.png" alt="enter image description here"></a></p>
  
  <p>So it works as expected and how I did it was I hide the body of content of the first page so it shows the second page.As you can see, there is a <code>x</code> on the top left corner of second page that when clicked, it shall close that windows and show the first page again. This is self explanatory i guessed.</p>
  
  <p>This is my javascript function:</p>
  
  <pre><code>  //function to call the edit the page
                  function editURL(filename,url){
  
              var x=document.getElementById("table123");
                  x.style.display="none";
  
  
  
  
                     $('body').pWin("open", {
                         x: 260,
                         y: 47,
                         height: 450,
                         width: 881,
                          title: "Edit:Advance Configuration",
                          skinMode:'dialog',
                          iframe:true,
                          url: "editUrl.jsp",
                          data: {
  
  
                          filename:filename,
                              link:url
  
  
  
  
  
                          },
                          offResize:true,
                          offMove:true,
                          onTitle:false,
                          offBottom:true
                      });
  
  
  
  
                  }
  
  
  
              &lt;/script&gt;
  </code></pre>
  
  <p>As shown above, I used <code>display=none</code> to hide the first page when the button is clicked, I can't figure out how do I show the page back when the close button in second page is clicked.It will show empty content if I clicked the x button but using <code>display:block</code> in the same function won't work.</p>
  
  <p>I appreciate any suggestion.</p>
  
  <p>Edit:</p>
  
  <p>This is my jquery <code>pwin</code>: (it's a little bit long)</p>
  
  <pre><code>$.extend({
      pWin_defaults : {
          prefix: 'w',        // need to be seperate per iframe
          id : 0,
          images  : 'images/bsWin/',
  
          imgTopLeft : 'tl.png',
          imgTopRight: 'tr.png',
          imgTopCenter : 'centerslice.png',
  
          imgTopLeftDialog : 'tl_dialog.png',
          imgTopRightDialog : 'tr_dialog.png',
          imgTopCenterDialog : 'tc_dialog35.png',
  
          imgCloseButton : 'close.gif',
          imgCloseButtonDialog : 'dialog_close.png',
  
          imgBotLeft  : 'bottom_left.png',
          imgBotCenter : 'bottom_ctr.png',
          imgBotRight : 'bottom_right.png',
          imgResize : 'resize_btn.png',
  
          openParam : new Array(
                          'x', 'y', 'width', 'height', 'title'
                           ),
          topHeight : 35, // top bar height
          DialogTopHeight:29,
          botHeight : 19, // bottom bar height
          cornerWidth: 5, // top and bottom left right corner widths
          winZIndex : 10000,
  
          winMap : {},
  
          engageWinMove : undefined,
          engageWinResize : undefined,
          engageX : undefined,
          engageY : undefined,
          resizeProperties: {},
  
          isIE: navigator.userAgent.indexOf('MSIE')&gt;=0?true:false
  
      },
  
  
  
  
  $.fn.extend({
  
     pWin: function (option, settings) {
         if (option == "open") {
  
              for (var i=0; i&lt;$.pWin_defaults.openParam.length; i++) {
                  if (!settings[$.pWin_defaults.openParam[i]]) {
                      alert('pWin.open requires ' + $.pWin_defaults.openParam[i]);
                      return false;
                  }
              }
  
              var skinMode = 'basic';
  
              if (settings.skinMode) {
                  skinMode = settings.skinMode;
              }
  
              var id = ++$.pWin_defaults.id + $.pWin_defaults.prefix;
  
  
              var winWidth    = settings.width;
              var winHeight   = settings.height;
              var winY        = settings.y;
              var winX        = settings.x;
  
  
  
  
              var divWindow = $('&lt;div id=\'pWin_'+id+'\' class=\'pWin\'&gt;&lt;/div&gt;');
              divWindow.title = settings.title;
              divWindow.bind('click', function() {  $(this).pWin_activate()   });
  
              if (skinMode == 'dialog') {
                  divWindow.addClass('pWinDialog');
              }
  
  
  
  
  
                  if (skinMode == 'basic') {
                      topCenter.addClass('pWinTitleBasic');
                      textWidth = $.pWin_text_width(settings.title, 'pWinTitleBasic', '');
                  } else if (skinMode == 'dialog') {
                      topCenter.addClass('pWinTitleDialog');
                      textWidth = $.pWin_text_width(settings.title, 'pWinTitleDialog', '');
                  }
  
  
  
                  var iePad = 0;
                  if ($.pWin_defaults.isIE) {
                      iePad = 6;
                  }
  
                  //topCenter.css('width', winWidth - $.pWin_defaults.cornerWidth * 2 - iePad);
                  topCenter.css('width', winWidth - iePad);
                  topCenter.css('height', $.pWin_defaults.topHeight);
                  if (skinMode == 'dialog') {
                      topCenter.css('height', $.pWin_defaults.DialogTopHeight);
                  }
                  if (skinMode == 'basic') {
                      //topCenter.css('background', 'url(' + $.pWin_defaults.images + $.pWin_defaults.imgTopCenter + ') repeat-x');
                  } else if (skinMode == 'dialog') {
                      //topCenter.css('background', 'url(' + $.pWin_defaults.images + $.pWin_defaults.imgTopCenterDialog + ') repeat-x');
                  }
                  if (!settings.offMove) {
                      topCenter.bind('mousedown', function(e) {  $(this).pWin_move_lock(e)   });
                      topCenter.addClass('pWinMove');
                  }
                      var topTitleName = $('&lt;div class=\'pWinTitleText\' id=\'pWinTitleName_'+id+'\' &gt;'+settings.title+'&lt;/div&gt;');
                      var topButton = $('&lt;div title=\'Close Window\' class=\'pWinCursor pWinTitleButton\' &gt;&lt;/div&gt;');
                      if (skinMode == 'basic') {
                          topButton.html('&lt;img class=\'pWinCursor\' src=\'' + $.pWin_defaults.images + $.pWin_defaults.imgCloseButton + '\'/&gt;');
                      } else if (skinMode == 'dialog') {
                          topButton.addClass('pWinButtonDialog');
                          topButton.html('&lt;img class=\'pWinCursor\' src=\'' + $.pWin_defaults.images + $.pWin_defaults.imgCloseButtonDialog + '\'/&gt;');
                      }
  
                      if (skinMode == 'basic') {
                          topTitleName.addClass('pWinTitleNameBasic');
                      } else if (skinMode == 'dialog') {
                          topTitleName.addClass('pWinTitleNameDialog');
                      }
  
                      if (settings.onClose) {
                          topButton.bind('mousedown', settings.onClose);
                      }
  
                      topButton.bind('mousedown', function() {
                          $(this).pWin('close', id);
                      });
  
                  topCenter.append(topTitleName);
                  topCenter.append(topButton);
  
  
              if (!settings.offTitle) {
                  //divWindow.append(topLeft); 
                  divWindow.append(topCenter); 
                  //divWindow.append(topRight); 
                  divWindow.append(clear);
              }
  
                  var winContent = $('&lt;div id=\'pWinContent_'+id+'\' class=\'pWinContent\'&gt;&lt;/div&gt;');
                  winContent.css('width', winWidth - 2);  // minus 2 for the borders
                  winContent.css('height', winHeight);
  
                  if (settings.corner) {
                      winContent.css('-moz-border-radius', '5px');
                  }
  
                  if (skinMode == 'basic') {
                      winContent.addClass('pWinContentBasic');
                  } else {
                      winContent.css('height', winHeight + 20);
                  }
  
                  var winFrame = undefined;
  </code></pre>
  
  <p>EDIT:</p>
  
  <p>My HTML code for genurl.jsp (the first screenshot):</p>
  
  <pre><code>&lt;html&gt;
  
  
  
  &lt;%
  
      String relPath = "../../../";
      NodeFacadeLocal nFacade = null;
  
      InitialContext ntx = new InitialContext();
  
      try {
          nFacade = (NodeFacadeLocal) ntx.lookup("java:comp/env/node");
  
      } catch (NamingException e) {
          e.printStackTrace();
      }
  
      //grabs the file id of each file
      //long nodeID = Long.parseLong(request.getParameter("nodeID"));
   /*String[] split1 = request.getParameter("nodeID").split(",",0);
   for(int i=0;i&lt;split.length;i++){
  
       long file=Long.parseLong(split[i]);
  
   }*/
  
  
  
  %&gt;
  
  &lt;head&gt;
  
  
      &lt;title&gt;Generate URL&lt;/title&gt;
  
  
  
  
  &lt;/head&gt;
  
  
  &lt;body&gt;
  &lt;div id="table123" style="overflow:scroll;height:400px;width:100%;overflow:auto"&gt;
  
  &lt;table class="filesTbl"&gt;
      &lt;tr&gt;
          &lt;th width="1%"&gt;
              Checkbox
          &lt;/th&gt;
          &lt;th width="1%"&gt;
               No
          &lt;/th&gt;
          &lt;th width="20%"&gt;
              File Name
          &lt;/th&gt;
          &lt;th width="50%"&gt;
              Unique URL
          &lt;/th&gt;
          &lt;th width="1%"&gt;
              Edit
          &lt;/th&gt;
          &lt;th width="1%"&gt;
              Copy
          &lt;/th&gt;
          &lt;th width="1%"&gt;
              Email
          &lt;/th&gt;
  
      &lt;/tr&gt;
  
  &lt;%
      //need to input logic to populate data on each row
  
      int counter=0;
      int tally=0;
  
      String[] split = request.getParameter("nodeID").split(",",0);
      for(int i=0;i&lt;split.length;i++){
  
          long file=Long.parseLong(split[i]);
  
          List files = fileFacade.list_items(file);
          for (Iterator rstltr = files.iterator(); rstltr.hasNext();) {
              Fmedia fv = (Fmedia) rstltr.next();
              Node nd = nodeFacade.get(fv.getNodeid(), false);
              // Fmedia fm = fileFacade.get_file(fv.getNodeid());
  
  
  
              int count = 0;
              count++;
              long fileid= nd.getNodeid();
  
        SettingsFacadeLocal settingFacade = (SettingsFacadeLocal)ctx.lookup("java:comp/env/settings");
          String redirectURL = settingFacade.get("SERVER_URL").getAtval();
          //declare a timestamp for unique URL
          // String timeStamp=new SimpleDateFormat("yyyy.MM.dd.HH.mm.ss").format(new java.util.Date());
          // String hash = org.apache.commons.codec.digest.DigestUtils.sha256Hex(timeStamp);
  
          SecureRandom secureRandom=new SecureRandom();
          byte[] token = new byte[12];
          secureRandom.nextBytes(token);
          String hash= new BigInteger(1, token).toString(12);
  
  
  
  
  
  %&gt;
  
  
      &lt;tbody&gt;
      &lt;tr&gt;
          &lt;td width="5%"&gt;
  
              &lt;script&gt;
  
  
   // function to copy multiple URL links
  
                  function copymultiplelink() {
  
                      var selectedFiles = $('.fileCheck:checked');
                      if(selectedFiles.length &lt; 1 ){
                          alert("Please select at least one file.");
                          return false;
                      }
                      var filesList = [];
                      var $fileChecks = $('.fileCheck:checked');
                      $fileChecks.each(function() {
                          filesList.push($(this).val());
                      });
  
                      alert("You have copied " + filesList.length+ " URL");
                      copyURL(filesList.join("\n"),false);
  
                  }
  
                  //function to call the edit the page
                  function editURL(filename,url){
  
              var x=document.getElementById("table123");
                  x.style.display="none";
  
  
  
  
                     $('body').pWin("open", {
                         x: 260,
                         y: 47,
                         height: 450,
                         width: 881,
                          title: "Edit:Advance Configuration",
                          skinMode:'dialog',
                          iframe:true,
                          url: "editUrl.jsp",
  
                          data: {
  
  
                          filename:filename,
                              link:url
  
  
  
  
  
                          },
                          offResize:true,
                          offMove:true,
                          onTitle:false,
                          offBottom:true
  
                      });
  
  
                     // x.style.display="none";
  
  
  
  
  
  
  
  
                  }
  
  
  
              &lt;/script&gt;
  
              &lt;!--Display Checkbox   --&gt;
              &lt;input type="checkbox" class="fileCheck" id="&lt;%=tally=tally+1%&gt;" value="&lt;%=redirectURL+"/repository/file/view/viewPDF.jsp?f0="+nd.getNodeid()+"&amp;ts="+hash%&gt;"  /&gt;&amp;nbsp;
  
  
          &lt;/td&gt;
  
          &lt;td&gt;
              &lt;!--Display No   --&gt;
              &lt;% counter=counter+1;
                  out.print(counter);
  
              %&gt;
  
  
          &lt;/td&gt;
          &lt;td width="28%"&gt;
  
              &lt;!-- Display Filename   --&gt;
              &lt;%=nd.getNodedesc()%&gt;
  
  
  
          &lt;/td&gt;
          &lt;td width="100%"&gt;
              &lt;!-- Display Unique URL --&gt;
  
  
              &lt;%=redirectURL+"/repository/file/view/viewPDF.jsp?f0="+nd.getNodeid()+"&amp;ts="+hash%&gt;
              &lt;%
  
                  fileFacade.insert_url(nd.getNodeid(),"f0="+nd.getNodeid()+"&amp;ts="+hash);
  
                  //fileFacade.insert_url(nd.getNodeid(),"{syscont url}/repository/file/view/viewPDF.jsp?{url});
  
              %&gt;
  
  
          &lt;/td&gt;
          &lt;td&gt;
              &lt;!-- Display EDIT/DEL --&gt;
              &lt;input type="button" value="Edit URL" onclick="editURL('&lt;%=nd.getNodedesc()%&gt;','&lt;%=redirectURL+"/repository/file/view/viewPDF.jsp?f0="+nd.getNodeid()+"&amp;ts="+hash%&gt;')" &gt;
  
          &lt;/td&gt;
          &lt;td&gt; &lt;!-- Display COPY feature --&gt;
  
              &lt;input type="button" value="Copy URL" onclick="copyURL('&lt;%=redirectURL+"/repository/file/view/viewPDF.jsp?f0="+nd.getNodeid()+"&amp;ts="+hash%&gt;',true)"&gt;
  
          &lt;/td&gt;
  
  
      &lt;/tr&gt;
  
      &lt;/tbody&gt;
  
  
  &lt;%}}
  %&gt;
  
  
      &lt;script&gt;
          function copyURL(url,showMsg) {
              var copyText = url;
              var el = document.createElement('textarea');
              el.value = copyText;
              el.setAttribute('readonly', '');
              el.style = {
                  position: 'absolute',
                  left: '-9999px'
              };
              document.body.appendChild(el);
              el.select();
              document.execCommand('copy');
              document.body.removeChild(el);
              if(showMsg==true) {
                  alert("You have copied the URL");
              }
          }
      &lt;/script&gt;
  
  
  
  
  
  &lt;/table&gt;
  
  
  
  
  
  
  &lt;!--Copy button to copy multiple links --&gt;
  
  &lt;div class="wrapper"&gt;
      &lt;button type="button" onclick="copymultiplelink()"&gt; Copy Selected URL&lt;/button&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;style&gt;
  
  
      .wrapper {
          position: absolute;
          top: 90%;
          left: 5%;
      }
  
  &lt;/style&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>It calls the editURL.jsp:</p>
  
  <pre><code>&lt;/head&gt;
  &lt;%
  // get the values of filename and URL link
  
      String files=  request.getParameter("filename");
      String url=request.getParameter("link");
  
  
  
  %&gt;
  
  
  
  &lt;body&gt;
  
  &lt;script&gt;
  
  &lt;/script&gt;
  
  File Name:&lt;input type="text" size="30" name="Filename" value="&lt;%=files%&gt;" readonly&gt;&lt;br&gt;&lt;br&gt;
  
  URL Link:&lt;input type="text" size="100" name="URL Link" value="&lt;%=url%&gt;" readonly&gt;&lt;br&gt;&lt;br&gt;
  
  Start Date:&lt;input type="text" name="Start Date" value="Mickey"&gt;&lt;br&gt;&lt;br&gt;
  
  
  End Date:&lt;input type="text" name="End Date" value="Mickey"&gt;&lt;br&gt;&lt;br&gt;
  </code></pre>