Improving the smoothness of expanding the search box

I am trying to create a simple code that expands a box when the search button is clicked. Below is the HTML code:

<a id="displayText" href="javascript:toggle();"><img src="images/search.png"></a>
<div id="toggleText" style="display: none;">
<form>
<input type="text" name="" placeholder="search">
</form> 
</div>

Here is my JavaScript code:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script language="javascript"> 
function toggle() {
var ele = document.getElementById("toggleText");
var text = document.getElementById("displayText");
if(ele.style.display == "block") {
        ele.style.display = "none";

}
else {
    ele.style.display = "block";

}
} 
</script>

The code is working well, but I want to add a smooth effect when expanding. Can anyone help me with this? Thank you!

javascripthtmlcss

Answer №1

To begin, set your css in the following manner (feel free to adjust the transition duration):

#toggleText {
    -webkit-transition: all .25s ease;
       -moz-transition: all .25s ease;
            transition: all .25s ease;
    visibility: hidden;
    opacity: 0;
}

#toggleText.focused {
    visibility: visible;
    opacity: 1;
}

Next, update your HTML like this:

<button id="displayText"><img src="images/search.png"></button>
<div id="toggleText">
    <form>
        <input type="text" name="" placeholder="search">
    </form> 
</div>

Finally, modify your javascript code accordingly and remember to include the jQuery library:

$("#displayText").click(function() {
    $("#toggleText").toggleClass("focused");
});

Answer №2

If you're looking to create seamless transitions on your website, consider using CSS transitions for a more polished effect. Instead of toggling between display none and block, opt for transitioning with opacity or max-width properties.

By setting max-width to 0 and then gradually increasing it to your desired width with a defined transition duration, you can achieve a smooth sliding motion. Alternatively, adjusting the opacity from 0 to 1 will result in a gradual fade-in effect.

For reference, take a look at the form located in the header of this eBay store. By inspecting the code, you'll see how these techniques were implemented and can customize them to better suit your needs.

Explore the Dune eBay Store Here

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

A guide to resizing a canvas correctly in React with the help of p5.js

Currently, I am working on a project that involves resizing the model in the canvas when the canvas or window is resized. I have consulted the documentation for resizeCanvas() and implemented it. To achieve this, I first determine the ratio by dividing th ...

javascriptreactjscanvasp5.js

File not being successfully sent through form submission using Jquery

I have created a form setup like this: <label for="pdffile">Please Upload File</label> <form class="form-horizontal" role="form" method="POST" name="upload" id="upload" enctype="multipart/form-data"> {{ csrf_fi ...

phpjqueryhtmllaravel

How come the image in my email signature is not adhering to the width styling when viewed in Outlook on Windows?

I have designed a unique HTML email signature that includes an embedded image. When viewed in the Komodo previewer and Apple Mail client, it looks like this: https://i.sstatic.net/ZRu1e.png However, upon bringing the same HTML code into Outlook desktop a ...

htmloutlookhtml-email

Utilizing fluent-ffmpeg in nodejs and express to effortlessly download a video

I've been recently tackling a side project that involves downloading videos from Reddit. The tricky part is that the video and audio are stored in separate files, requiring me to merge them before being able to download them onto the client's dev ...

javascriptnode.jsexpressffmpegvideo-streaming

Updating the value property of an object within a loop dynamically in React

At the moment, I am utilizing an array of objects called "mainArr" as shown below, I have implemented a loop inside a function to filter object properties, but I want to dynamically replace obj.name with obj."param" based on the parameter passed. Both nam ...

javascriptreactjs

The PHP script is exhausting memory resources and triggering a fatal error

I encountered the following error message: Fatal error: Allowed memory size of 268435456 bytes exhausted (tried to allocate 528384 bytes) in /home/u234536193/domains/monetizingonline.com/public_html/wp-includes/wp-db.php on line 2024 The problematic cod ...

phphtmldebuggingout-of-memory

Spacing between the rows of a table

I am seeking to achieve a unique visual style for the rows in my table, similar to the one shown below. I attempted to use CSS border properties in the code snippet provided but desire more spacing between each row with a thin border and sharp edges. .dat ...

cssangularbootstrap-4ngx-datatableborder-spacing

The HighChart graphs are not rendering properly within a limited div size

I have integrated a JavaScript library called Highcharts to visualize JSON data on a line graph representing stock prices. If you are unfamiliar with the terms used in this post, refer to the image linked below for clarity: https://www.highcharts.com/image ...

javascriptjqueryhtmlhighcharts

What is the best way to substitute spaces with underscores in JSON data and incorporate hyperlinks for each row in datatables?

I am looking to customize JSON data from the back-end before displaying it using datatables. Firstly, I want to replace the spaces ( ) in the column artist.name with underscore symbols (_). Additionally, I would like to create hyperlinks for each row in th ...

javascripthtmljsondatatables

Unique Title: "Personalized Styling Category for dijit/layout/ContentPane"

I am looking to add a custom CSS Class to a dijit/layout/ContentPane in order to apply my own styling. This is because I have multiple tabs in a TabContainer where my ContentPanes are located and I want to avoid duplicating borders. Adding a border around ...

cssdojotabcontainercontentpane

Accessing the router URL directly is proving to be ineffective

Currently, I am utilizing react-router in my project and everything is functioning perfectly except for when I directly access the URL. Specifically, if I click on a Link within the application that navigates to "/quizreview?quizId=nAUl3DmFlX", it works fl ...

javascriptreactjsreact-router

Utilize a jQuery class selector to retrieve the value of a textbox through HTMLHelper

How can I retrieve the value of "StudentID" in a JavaScript function using jQuery? HTML: <%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<IEnumerable<Student.Models.vwStudent>>" %> <div class="divClass"> ...

javascriptjqueryasp.net-mvcpartial-viewshtml-helper

Using alternative components in nextjs routes

Exploring how to set up 3 components within Next.js to achieve the desired snippet: <Route path="/" component={homePage} /> <Route path="/about" component={aboutPage} /> <Route path="/faq" component={faqPage} /& ...

javascriptreactjsreact-routernext.js

Having issues with the script not functioning when placed in an HTML document or saved as a .js file

Even though the database insertion is working, my script doesn't seem to be functioning properly. The message "successfully inserted" appears on the saveclient.php page instead of the index.html. In my script (member_script.js), I have placed this in ...

javascriptphpajax

How to keep an iFrame refreshed with top.window?

It's interesting how refreshing top.window with a frame reloads the iframe, but not with an iframe itself. The use of frames is now deprecated, so should we still utilize them? Unfortunately not. Does this mean losing functionality if I choose to fol ...

htmliframeframedeprecated

What is the best way to conditionally update all subdocuments in MongoDB?

{ _id: UniqueObjectId(), creatures: [ { kind: "dog", IQ: 100 }, { kind: "cat", IQ: 110 }, { kind: "bear", IQ: 120 }, ... ] } What is the best approach to construct an updateOne query in order to mo ...

javascriptnode.jsmongodbmongodb-queryaggregation-framework

Utilize filters to apply a class to an element only if its index exists within

Is it possible to add a CSS class in AngularJs based on the row index's presence in an integer array ( $scope.AssociateCandidatesIndex) using filters? Any suggestions on how to accomplish this? <tr ng-show="true" class="{{ $index}}"> < ...

javascriptangularjs

Parent controller was not in command before Child执行

When working with a parent view and a child view, I encounter an issue with accessing a json file. In the parent view, I retrieve the json file using the following code: $scope.services = Services.query(); factory('Services', function($reso ...

javascriptangularjsangularjs-scopeangularjs-controller

Steps to fix issues with Cross-Origin Read Blocking (CORB) preventing cross-origin responses and Cross Origin errors

var bodyFormData = new FormData(); bodyFormData.set("data", "C://Users//harshit.tDownloads\\weather.csv"); bodyFormData.set("type", "text-intent"); //axios.post("https://api.einstein.ai/v2/language/datasets/upload", axio ...

javascriptjquerynode.jsreactjsaxios

Concealing content to prevent it from being accessed through HTML and JavaScript inspection techniques

I created a website with a simple guessing game where users can win if they enter the right code. My approach involves using JavaScript: <script> function z() { var b = document.getElementById('idea'); var a = document.g ...

javascripthtml