jQuery show help

HippySunshine

Senior Member
Hello,

I'm new to jQuery and JavaScript and just having a play with some bits to get started.

Let me set the scene of what I'm trying to achieve:

I have a topbar, with a search icon in it.
Upon clicking that search icon, I would like my #searchbar div which contains the search input box to display underneath my header.

For the life of me, I can't figure out why it's not showing when I click on the search icon.

If someone could take a look at my code and point me in the right direction, that would be much appreciated :)
I may have completely messed up my code with playing around so apologies if I am now, so far off being right!

HTML:
HTML:
<!DOCTYPE html>

<html leng="en">

    <title>Titanic Brewery</title>

    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link rel="stylesheet" href="style.css" type="text/css">
    <link href="https://fonts.googleapis.com/css?family=Open+Sans:600" rel="stylesheet">
 
    <body>

        <div class="wrapper grid-container">

            <div id="topbar">

                <div class="grid-container">
                
                    <div class="telephone  grid-item">
                        <a href="tel:01782 710740">01782 710740</a>
                    </div>
                
                    <div class="account grid-item">
                        <a id="search"><img class="search-mobile" src="images/search-icon-dark.jpg" alt="Search Icon"></a>
                        <a href="#"><img src="images/account-icon-dark.jpg" alt="Account Profile Icon"></a>
                    </div>
                
                </div>
            </div>


            <header>

                <div class="grid-container">

                    <div class="telephone-desktop  grid-item">
                        <img src="images/tel-icon.jpg" alt="Telephone Number"> <!-- need to show this on desktop view only -->
                        <a href="tel:01782 710740">01782 710740</a>
                    </div>


                    <nav id="site-navigation" class="mobile grid-item">

                        <button class="menu-toggle">
                            <div class="hamburger">
                                  <img src="images/hamburger-icon.jpg" alt="Main Menu">
                            </div>
                          </button>

                    </nav>

                    <h1 class="site-title">
                        Titanic Brewery
                    </h1>

                    <div class="logo grid-item">
                        <a href="index.html"><img src="images/logo.jpg" alt="Titanic Brewery Logo"></a>
                    </div>
                        
                    <div class="cart grid-item">
                        <a id="search"><img class="search-desktop" src="images/search-icon.jpg" alt="Search"></a>

                        <a href="#"><img class="shopping-cart" src="images/cart-icon.jpg" alt="Shopping Cart">
                        <div class="cart-contents">
                            <p>12</p>
                        </div></a>

                        <div class="account-desktop">
                            <a href="#"><img src="images/account-icon.png" alt="My Account">
                            <span>My Account</span></a>
                        </div>
                    </div>

                </div>

                <div id="searchbar">
                      <input type="search" placeholder="Start your search......">
                </div>

                <nav id="site-navigation" class="desktop">

                    <ul>
                        <li><a href="#">Men</a></li>
                        <li><a href="#">Women</a></li>
                        <li><a href="#">Kids</a></li>
                        <li><a href="#">Accessories</a></li>
                        <li><a href="#">Sale</a></li>
                        <li><a href="#">LookBook</a></li>
                        <li><a href="#">Blog</a></li>
                    </ul>
                </nav>

            </header>

        </div>
    
        <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

        <script>
            $( "#search" ).click(function() {
                  $( "#searchbar" ).show() {
                };
            });
        </script>
    </body>

</html>

CSS:

CSS:
.search-mobile {
    margin-right: 20px;
}

#searchbar {
    text-align: center;
    margin: 20px 0;
    display: none;
}
#searcbar input {
    border-bottom: 1px solid #d7d7d7;
    width: 100%;
}

@media screen
  and (min-device-width: 1024px) {

      /* ----- TOPBAR ------ */

      #topbar {
          display: none;
      }

      /* ----- HEADER ----- */

      header {
          border-top: 3px solid #f7be38;
      }

      .cart .search-desktop,
      .cart .account-desktop,
    .telephone-desktop {
        display: inline-block;
    }
    
    .cart .search-desktop {
        margin-right: 34px;
    }
    .cart .account-desktop {
        margin-left: 34px;
    }

    /* ----- Search Box ----- */

    #search-bar input {
        width: 50%;
    }

}
 
Looks like Levi has provided you with a great link there. (y)

On a side note, if you're not already a member, it's probably worth signing up to StackOverflow. Its a great resource for learning from other developers.

Also,.... Just out of interest, why are you loading two jQuery libraries (1.10.2 and 3.3.1)? There's a good possibility of running into script issues unless you declare the jQuery noconflict mode for each.
 
Last edited:
Are you doing this because it looks smart? Have you tested the location of the search function to see which provides the best UX? I also see you are using the hamburger for the menu on small screens. This should only be used as a last resort, a sticky header with always on menu has a much better UI/UX.

Sometimes you had to compromise on the design to deliver a product people can use.
 
I'm not entirely sure how these questions are relevant to my query...?

I'm doing this because I have been asked to and that was the design I was given.
Why should a hamburger be used as a last resort? and why would I want an always on menu?

@HippySunshine can you post a link to your site so we can take a look
Are you doing this because it looks smart? Have you tested the location of the search function to see which provides the best UX? I also see you are using the hamburger for the menu on small screens. This should only be used as a last resort, a sticky header with always on menu has a much better UI/UX.

Sometimes you had to compromise on the design to deliver a product people can use.
 
No idea why I had 2 scripts :X3:
I am a member on stack overflow but by the point of writing my OP, I had hit a brick wall and needed a bit of guidance!

Thanks everyone :)

Looks like Levi has provided you with a great link there. (y)

On a side note, if you're not already a member, it's probably worth signing up to StackOverflow. Its a great resource for learning from other developers.

Also,.... Just out of interest, why are you loading two jQuery libraries (1.10.2 and 3.3.1)? There's a good possibility of running into script issues unless you declare the jQuery noconflict mode for each.
 
I'm doing this because I have been asked to and that was the design I was given.
Why should a hamburger be used as a last resort? and why would I want an always on menu?
Many apologies, I thought this was your site. Hiding the search is less intuitive and user testing often shows that putting the search box in the main content provides a better UX. It's the same with the hamburger. Because people cannot see the links visitors won't click. Showing the links all the time means you can direct people to the important areas of the site. There are some great testing tools you can use to show how people use websites and the hamburger never scores well. And because there is a lot more scrolling on small screens having a sticky header helps with navigation
 
PS: I asked to see the site because the tools I use can show me why the jQuery isn't firing. But I think the problem is your CSS, you need to position the search box.
 
Back
Top