A space to discuss online store customization, theme development, and Liquid templating.
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?
Hi EMarie1571,
Animating with CSS is the simplest way to get something moving on screen and for simpler transitions, like toggling UI element states.
There are three key advantages to CSS animations over traditional script-driven animation techniques:
Source: MDN Web Docs-Using CSS animations
Example:
1 - We can use Javascript for toggling the class for “myTextBox” when button is clicked
example Javascript:
function myFunctionClick() { |
2. We can then define the class styling in CSS (e.g. CSS translateX() to reposition an element horizontally on the 2D plane. Please find more information on using CSS transitions here)
example CSS
.slide { |
For other advanced theme customizations, you can also reach out to Shopify experts who are experienced industry professionals that have extensive knowledge about creating, updating, and perfecting Shopify themes.
To hire a designer or developer to customize your theme, please visit the Shopify Experts Marketplace.
To learn more visit the Shopify Help Center or the Community Blog.