Building a vertically expanding search box using HTML and CSS

I am working on creating an expandable search box for a navbar. The goal is to have the search box expand when the user clicks on it, revealing another input box with a different name input. I would like to have two search boxes, stacked one under the other.

Here is my current implementation:

<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="c1a3aeaeb5b2b5b3a0b181f4eff1eff3">[email protected]</a>/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="9ffdf0f0ebecebedfeefdfaab1afb1ad">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet"/>

<nav class="navbar navbar-expand-lg py-2 fixed-top">
      <div class="container-fluid">
          <a class="navbar-brand" href="">
              <h7 id="nick"><strong class="d-none d-lg-inline">myLogo</strong></h7></a>
              <form class="my-auto w-75" method="get" action="">
                  <div class="input-group">
                      <input type="text" class="form-control border border-right-0 ui-autocomplete-input" id="search"
                          name="search" placeholder="Search..." autocomplete="off">
                      <span class="input-group-append">
                          <button class="btn btn-outline-light border border-left-0 p-3" style="border-bottom-left-radius: 0%; border-top-left-radius: 0%; background-color: #f18918;" type="submit">
                              Search
                          </button>
                      </span>
                  </div>
              </form>
              <a class="navbar-icon" data-bs-toggle="offcanvas" href="#sidebar" role="button" aria-controls="sidebar"><i class="bi bi-person-circle"></i></a>
      </div>
  </nav>

Do you have any suggestions or ideas?

htmlcssbootstrap-5

Answer №1

I duplicated the search field and implemented a click event on the original input field using JavaScript to reveal the second input field. The code is straightforward, and I believe you can make any additional adjustments yourself if needed. If you have any questions, feel free to ask.

window.addEventListener('click', function() {
  document.querySelector('#search').style.height = "100%";
  document.querySelector('#search2').style.display = "none";
})

document.querySelector('#search').addEventListener('click', function(event) {
  event.stopPropagation();
  this.style.height = "50%"; // Reducing the height of the input to stack them vertically
  document.querySelector('#search2').style.display = "block"; // Displaying the second input field on click
})

document.querySelector('#search2').addEventListener('click', function(event) {
  event.stopPropagation();
})

document.querySelector('.input-group-append').addEventListener('click', function(event) {
  event.stopPropagation();
})
<script src="https://cdn.jsdelivr.net/npm/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet" />

<nav class="navbar navbar-expand-lg py-2 fixed-top">
  <div class="container-fluid">
    <a class="navbar-brand" href="">
      <h7 id="nick"><strong class="d-none d-lg-inline">myLogo</strong></h7>
    </a>

    <form class="my-auto w-75" method="get" action="">
      <div class="input-group">
        <div style="flex: 1;">
          <input type="text" class="form-control border border-right-0 ui-autocomplete-input" id="search" name="search" placeholder="Search..." autocomplete="off" style="height: 100%;">

          <input type="text" class="form-control border border-right-0 ui-autocomplete-input" id="search2" name="search2" placeholder="Search 2..." autocomplete="off" style="height: 50%; display: none;">
        </div>

        <span class="input-group-append">
            <button class="btn btn-outline-light border border-left-0 p-3" style="border-bottom-left-radius: 0%; border-top-left-radius: 0%; background-color: #f18918; height: 100%;" type="submit">
                Search
            </button>
        </span>
      </div>
    </form>

    <a class="navbar-icon" data-bs-toggle="offcanvas" href="#sidebar" role="button" aria-controls="sidebar"><i class="bi bi-person-circle"></i></a>
  </div>
</nav>

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

The locator for the span class cannot be found or interacted with in Selenium

Here is the HTML code snippet for a span element: <td class="header-logout-btn"> <a href="logout.htm" class="btn switch-btn"> <i class="fa fa-times"></i><span class="hidden-xs">Home</span> </a> </td> I ...

javahtmlseleniumselenium-webdriver

Animated the height of a rectangle during initial loading and when the mouse hovers over or leaves

Being new to Vue.js, I am looking to create a simple animation on component load for the first time. You can find my initial code here: <template> <div id="app"> <div class="rect" /> </div> </template ...

javascriptcssvue.jscss-transitions

Is there a way to eliminate a CSS class from a div element within the outcome of an ajax response?

My ajax response is functioning properly and displaying the content of the result, but I am always getting the CSS effects which I do not want. I need to eliminate the class="container body-content" from the following div in the ajax call's result. ...

jqueryhtmlcssajax

Struggling to extract information from HTML code through Python web scraping techniques

Hello there! I'm currently in the process of extracting dividend history data for a specific stock from a website using web scraping in Python. However, being new to Python, I'm facing some challenges in retrieving the data. Below is a snippet of ...

pythonhtmlcsvweb-scraping

Using jQuery to modify the border of a particular row

I am facing an issue where I need to apply a border to two specific rows in a table after it has loaded. These two rows are consistent every time the table is loaded. The code snippet below works, but the default line breaks between the table rows prevent ...

jqueryhtmlcsstwitter-bootstrap

Certain rows appear to be missing even though they are present in both the webpage and its corresponding source code

I am facing a CSS issue that I am unable to resolve. I have 20 results that should be displayed on my website, but only 14 of them are appearing. The other ones are visible in the source code when inspected. When I move the position of the menu up or down, ...

phpjqueryhtmlcss

Troubleshooting Bootstrap 3.0: Issues with nav-tabs not toggling

I have set up my navigation tabs using Bootstrap 3 in the following way: <ul class="nav nav-tabs pull-right projects" role="tablist" style="margin-top:20px;"> <li class="active"><a role="tab" data-toggle="tab" href="#progress">In Pr ...

javascriptjqueryhtmlcsstwitter-bootstrap

The border-radius property in Bootstrap buttons causes unwanted white border artifacts to appear

Strange anomalies in the borders of my Bootstrap buttons caught my attention recently. Upon further investigation, I realized that this issue is not linked to my custom styles or theme, as the artifacts can also be seen on the Bootstrap button documentatio ...

csstwitter-bootstrapbootstrap-4bootstrap-5

A guide on debugging Sass using Sencha Touch on an iPhone

After making changes to the sass file in Sencha and compiling it, I cleared the iPhone simulator and cleaned the project. Despite seeing the new styles applied in the browser, they do not reflect on the iPhone simulator or the actual device. The change I ...

ioscssextjssencha-touchios-simulator

Set an attribute without replacing any existing class attributes

I have developed a script that updates the class attribute of the body element on my website when an option is selected from a dropdown menu. However, I am facing an issue where it overrides the existing dark mode attribute. The purpose of this script is ...

javascripthtmlcss

Validate Email and Phone Number using Javascript

How can I create a Javascript function to validate an HTML form? Currently, my form validation only checks if a field is empty. I want to enhance it to also validate the email format and ensure the phone number is numeric. Currently, the form displays a po ...

javascriptphphtmlformsvalidation

The jQuery function .val()/.text() is unable to retrieve information from a particular section of HTML

Implementing HandlebarsJS with PHP and Yii to generate a page. Here is a snippet of the html/handlebars code on the page {{#if embed_link}} <p class='f_hidden_p'> <a href='{{embed_link}}'> {{ ...

javascriptjqueryhtmlcssyii

How come I am able to reference a component in styled-components while others cannot?

When using styled-components, you can reference another React component using the syntax ${Label}. However, I have noticed that it only works with certain components and not others. Despite reading the documentation at , I encountered an issue when trying ...

javascripthtmlcssreactjsstyled-components

Ways to eliminate the excess space surrounding an Image border

I am looking to position the image at the top right corner of the screen. body{ font-family: 'Roboto', sans-serif; font-weight: 300; background: #822B2B; color: #ffffff; overflow: hidden; } #showcase{ display: flex; justify-content: center; al ...

htmlcssimagebackgroundspace

Different method for adding child elements to the DOM

When creating a DOM element, I am following this process: var imgEle = document.createElement('img');     imgEle.src = imgURL;             x.appendChild(imgEle); Instead of appending the last line which creates multiple img elements ev ...

javascripthtmlcssdomappendchild

Inserting lines into the text, creating a visually appealing layout

Can a notepad design be created using CSS only? Is it feasible to include lines between text lines without using underscores? I want it to look like this example but with minimal spacing between lines and no manual insertion of span tags since the text wi ...

jqueryhtmlcss

Tips for rearranging button placements by utilizing multiple owl carousels across various webpages

I have successfully implemented two owl carousels on my Shopify website, and they are both functioning properly. However, I am facing an issue with the navigation buttons on the second page. The navigation buttons seem to be picking up a style that I had i ...

javascripthtmlcssshopifyowl-carousel

Tips for updating the left positioning of a Div element on the fly

Although my title may not fully explain my goal, I am dealing with dynamically created div elements. When a user triggers an ajax request to delete one of the divs, I want to remove it from the DOM upon success. The issue arises in adjusting the layout aft ...

javascriptjqueryhtmlcssajax

Move the image inside the box without directly following the mouse cursor, but at a slightly faster pace

I am facing an issue with a Vue component that allows me to zoom in on an image and move it around the container. The problem is, when the image is zoomed in, it moves faster than the mouse due to using the scale transform. Additionally, I noticed that cl ...

javascriptcssvue.js

Adjust the height of videos automatically on columns

I need help figuring out how to display two videos with different dimensions side by side without any weird gaps. I've already tried using flex display with no luck. My current code looks like this: <div class="row"> <d ...

htmlcssbootstrap-4