How can i achieve the these with Javascript / Jquery?

Question

I want when i clicked on the Question button on the first pic, the form in the second pic to appear and the button to be hidden and when i click on the (X) on the top left of the form on the second pic to close the form and the Question button to appear again. How can i achieve that using Javascript or Jquery or any possible method.

 <script type="text/javascript"> $(function(){ var button = document.getElementById("info"); var myDiv = document.getElementById("myDiv"); function show() { myDiv.style.visibility = "visible"; } function hide() { myDiv.style.visibility = "hidden"; } function toggle() { if (myDiv.style.visibility === "hidden") { show(); } else { hide(); } } hide(); button.addEventListener("click", toggle, false); }); </script> 

 <div class="container"> <div id="myDiv"> <button type="button" class="close" data-dismiss="myDiv" aria-label="Close"><span aria-hidden="true">&times;</span> </button> <p>QUESTION</p> <form action="https://chat.rbb.bg/ccp/chat/form/100000" method="post" target="_blank" onsubmit="return window.confirm(&quot;You are submitting information to an external page.\\nAre you sure?&quot;);"> <span class="box1">Theme</span><input type="text" name="extensionField_Title" id="box1"><br> <span class="box2">Name</span><input type="text" name="extensionField_Name" id="box2"><br> <span class="box3">Теlephone</span><input type="text" name="extensionField_PhoneNumber" id="box3"><br> <span class="boxinfo">About</span> <select name="extensionField_ccxqueuetag" id="boxinfo"><br> <option value="Chat_Csq23"></option> </select><br> <input type="submit" value="SUBMIT" id="boxbuton"> <input type="hidden" name="author" value="Customer"><br> </form> </div> <input id="info" type="button" onClick = "this.style.visibility= 'hidden';" value="QUESTION?" class="switchbuton"> </div> 

Answer 1

You almost got it, just need to make a few changes:

Add an Id for the xButton

<button type="button" class="close" data-dismiss="myDiv" aria-label="Close" id="xButton"><span aria-hidden="true">&times;</span>
      </button>

Remove onclick in the html Question button

<input id="info" type="button" value="QUESTION?" class="switchbuton">

Amd add a hanlder for the X button

$(function(){
 var button = document.getElementById("info");
 var xButton = document.getElementById("xButton");
 var myDiv = document.getElementById("myDiv");

 function show() {
     myDiv.style.visibility = "visible";
     //hidding Question button
     button.style.visibility = "hidden";
 }

 function hide() {
     myDiv.style.visibility = "hidden";
     //showing Question button
     button.style.visibility = "visible";
 }

 function toggle() {
     if (myDiv.style.visibility === "hidden") {
         show();
     } else {
         hide();
    }
}

 hide();

 button.addEventListener("click", toggle, false);
 //handler for the X button
 xButton.addEventListener("click", hide, false);
}); 

Answer 2

Like Carorus said, you're almost there! Their example uses your code and it's probably best that you check that out and understand it.

If you are looking for a jquery solution I threw this together very quickly, I hope it's what you are looking for.

http://codepen.io/anon/pen/pJJKjZ?editors=101

$("#info").click(function(){
  show()
});

$(".close").click(function(){
  hide();
});

var show = function(){
  $("#myDiv").css('visibility', 'visible');
  $("#info").css('visibility','hidden');
}

var hide = function(){
  $("#myDiv").css('visibility', 'hidden');
  $("#info").css('visibility','visible');
}

Answer 3

In jQuery you can do it like below. You could even shorten down the code, using classes to show/hide a bigger scope, but this is fine.

  function showForm() { $('#myform').show(); $('#myClose').show(); $("#info").hide(); } function hideForm() { $('#myform').hide(); $('#myClose').hide(); $("#info").show(); } $(function() { $('#info').click(function() { showForm(); }); $('#myClose').click(function() { hideForm(); }); hideForm(); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div class="container"> <div id="myDiv"> <button id="myClose" type="button" class="close" data-dismiss="myDiv" aria-label="Close"><span aria-hidden="true">&times;</span> </button> <p id="q">QUESTION</p> <form action="https://chat.rbb.bg/ccp/chat/form/100000" id="myform" method="post" target="_blank" onsubmit="return window.confirm(&quot;You are submitting information to an external page.\\nAre you sure?&quot;);"> <span class="box1">Theme</span> <input type="text" name="extensionField_Title" id="box1"> <br> <span class="box2">Name</span> <input type="text" name="extensionField_Name" id="box2"> <br> <span class="box3">Теlephone</span> <input type="text" name="extensionField_PhoneNumber" id="box3"> <br> <span class="boxinfo">About</span> <select name="extensionField_ccxqueuetag" id="boxinfo"> <br> <option value="Chat_Csq23"></option> </select> <br> <input type="submit" value="SUBMIT" id="boxbuton"> <input type="hidden" name="author" value="Customer"> <br> </form> </div> <input id="info" type="button" value="QUESTION?" class="switchbuton"> </div> 

Answer 4

Your already using JQuery, so you can handle both buttons with 1 line of code...

$(function(){
  var button = document.getElementById("info");
  var myDiv = document.getElementById("myDiv");

 function show() {
     myDiv.style.visibility = "visible";
     button.style.visibility = "hidden";
 }

 function hide() {
     myDiv.style.visibility = "hidden";
     button.style.visibility = "visible";
 }

 function toggle() {
     if (myDiv.style.visibility === "hidden") {
         show();
     } else {
         hide();
    }
  }

  hide();
  $('.button').click(function() { toggle(); });
});

And update your HTML to include a secondary class on your buttons, and remove the onClick attribute...

<div class="container">
    <div id="myDiv">
        <button type="button" class="close button" data-dismiss="myDiv" aria-label="Close"><span aria-hidden="true">&times;</span>
        </button>
        <p>QUESTION</p>
        <form action="https://chat.rbb.bg/ccp/chat/form/100000" method="post" target="_blank" onsubmit="return window.confirm(&quot;You are submitting information to an external page.\nAre you sure?&quot;);">

          <span class="box1">Theme</span><input type="text" name="extensionField_Title" id="box1"><br>
          <span class="box2">Name</span><input type="text" name="extensionField_Name" id="box2"><br>
          <span class="box3">Telephone</span><input type="text" name="extensionField_PhoneNumber" id="box3"><br>
          <span class="boxinfo">About</span>
          <select name="extensionField_ccxqueuetag" id="boxinfo"><br>
            <option value="Chat_Csq23"></option>
          </select><br>
          <input type="submit" value="SUBMIT" id="boxbuton">
          <input type="hidden" name="author" value="Customer"><br>
      </form>
    </div>
    <input id="info" type="button" value="QUESTION?" class="switchbuton button">
</div>

Answer 5

Html Code:

<div class="container">
      <div id="myDiv">
          <button type="button" id="hide" class="close" data-dismiss="myDiv" aria-label="Close"><span aria-hidden="true">&times;</span>
          </button>
          <p>QUESTION</p>
          <form action="https://chat.rbb.bg/ccp/chat/form/100000" method="post" target="_blank" onsubmit="return window.confirm(&quot;You are submitting information to an external page.\nAre you sure?&quot;);">

            <span class="box1">Theme</span>&nbsp;<input type="text" name="extensionField_Title" id="box1"><br/><br/>
            <span class="box2">Name</span>&nbsp;&nbsp;&nbsp;<input type="text" name="extensionField_Name" id="box2"><br/><br/>
            <span class="box3">Теlephone</span><input type="text" name="extensionField_PhoneNumber" id="box3"><br/><br/>
            <span class="boxinfo">About</span>
            <select name="extensionField_ccxqueuetag" id="boxinfo"><br>
              <option value="Chat_Csq23"></option>
            </select><br/><br/>
            <input type="submit" value="SUBMIT" id="boxbuton"><br/>
            <input type="hidden" name="author" value="Customer"><br/>
        </form>
      </div>
      <input id="info" type="button" onClick = "this.style.visibility= 'hidden';" value="QUESTION?" class="switchbuton">
  </div>

js Code

$(function(){
    var button = document.getElementById("info");
     var myDiv = document.getElementById("myDiv");

     function show() {
         myDiv.style.visibility = "visible";
     }

     function hide() {
         myDiv.style.visibility = "hidden";
     }

     function toggle() {
         if (myDiv.style.visibility === "hidden") {
             show();
         } else {
             hide();
        }
    }
    $("#hide").click(function(){
          myDiv.style.visibility = "hidden";
          button.style.visibility = "visible";
        });

     hide();

     button.addEventListener("click", toggle, false);
    });