How to make textbox in Javascript slide left and right once the button is pressed?

Tourist
16 0 1

Hi,

 

I have a textbox which toggle between "visible" and "hidden" in javascript.This is the code:

 <a class="searchbar_header">
      <form class="search" action="/search">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <input id="myTextBox" class="box" type="text" name="q" value="{{ search.terms | escape }}"  />
    <input type="button" " id="btnImg"  class="buttonImage" width="20" height="20" onclick="myFunctionClick()" />
</form>
      </a>
     <script>
       function myFunctionClick() {
   var x = document.getElementById("myTextBox");
    if (x.style.visibility === "hidden") {
    x.style.visibility = "visible";
  } else {
    x.style.visibility = "hidden";
  }
}

 with the visibility in .css initially to "hidden".Once the input type=button is pressed,I would like the textbox to slide to the left and back again to the right every time the button is pressed.I have tried to do it with JQuery but without any luck,or it was sliding left,but after I press the button again it was disappearing as it normally should without any effect.This is what I have tried in JQuery:

<script>
                                
                                 $(".buttonImage").click(function() {
                                           
$(".box").animate({width:"toogle"});
});
                                 </script>

/* and also */
$("#btnImg").click(function() {
  $("#myTextBox").animate({
    'right': '0px',
    'opacity': '1'
  });
});
/*this one works but only once when I initially click the button.If I click again it will not work.I have also tried with the condition that if it is visible, to slide left and if it is hidden to slide right".*/

 Can anyone please help me make it so that when I click on the button,it will slide left and when i press again,where the case will be "hidden",it will slide right and do that continuously?

0 Likes