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:
CSS:
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%;
}
}