Skip to content

Files

Latest commit

 

History

History

13 - Searchbar_expand_and_collapse 

Folders and files

NameName
Last commit message
Last commit date

parent directory

..
 
 
 
 
 
 
 
 
author handle source date likes retweets replies
Ajay Yadav 🎯
@ATechAjay
June 22, 2022 10:39 AM
89
30
16

ATechAjay Ajay Yadav 🎯 (@ATechAjay) - June 22, 2022 10:39 AM

9️⃣ / 5️⃣0️⃣ The Ultimate JavaScript Projects Series!

🎉 Search Bar Expanding And Collapsing

A Thread🧵↓ pic.twitter.com/TStGxwozZ9

💡 Here is the HTML code for this design!

◩ There are 2 elements inside the "parent" container.

◩ Which are the input and button elements.

◩ And, I have used the "fontawesome" search icon. pic.twitter.com/SUdvBGUk8Y

3_1539498366131838976

💡 We have to align both elements on each other, the button will be over the input element.

◩ That's why we have positioned both elements. pic.twitter.com/vrMFmt6lx1

3_1539498372158984192

💡 Initially, we have to set the same "width" on both elements.

◩ In this case, I have set 40px width in both of them. pic.twitter.com/ih4rXNGnfR

3_1539498378052063232

3_1539498381722017792

💡 And just we have toggle "active" class with JavaScript.

◩ If the "parent" element has a ".active" class then the "width" of the ".input" element will be 200px. pic.twitter.com/emnnOqDI07

3_1539498388181295104

◩ If the "parent" element has a ".active" class then the ".btn" element will be transform(move) to the x-direction to 210px. pic.twitter.com/tFbwwzdJvz

3_1539498394598617088

◩ And finally, we have to implement the JavaScrip part, Select all required HTML elements using JavaScript. pic.twitter.com/e19bBXBCbP

3_1539498401133236224

◩ When we click on the button then the ".active" class will be toggled.

💡 Also if the search bar is expanded then the cursor will be blinking in that field using the focus( ) method.

◩ The focus() method sets focus on the specified element. pic.twitter.com/kXotluAHVY

3_1539498407005278208

🔔 One more thing, if you want to learn the awesome projects from this series then you should follow this Github repository.

🔔 Don't forget to give a star ⭐ to this repository, also if you didn't follow me on GitHub then consider following me.

github.com/ATechAjay/50-T…

😍Try it from here:

codepen.io/atechajay/full…

That's all for now, we will meet in the next thread😍

🔔 Follow Me @ATechAjay For:

🌐 Web Development ✨ JavaScript 📝 Writing Skill 🔥 Motivation 💹 Growth ⛔ But Not For Only Resources & Shitpost

Thank you so much for staying to the end of this thread💚

Thread link