We Keep Coding

Links in footer wont display inline

I'm trying to put some links in a footer next to each other, separated by the character "|". But I have a navbar whose styles interferes with the footer's links.
I need something like this :
This is my code (it doesn't display perfectly, but you get the gist):
#import url('https://fonts.googleapis.com/css2?family=Poppins:wght#200;300;400;500&display=swap');
* {
box-sizing: border-box;
scroll-behavior: smooth;
font-family: 'Poppins', sans-serif;
}
body {
/*background-color: #e0eafc;*/
background: linear-gradient( to right,#ff0000,#0000ff);
margin: 0;
}
p {
color:#ffffff;
font-size:20px;
padding: 10px;
}
.heading {
margin: 20px;
font-size: 50px;
text-align: center;
color: black;
}
a {
text-decoration: none;
}
.favcolorcontainer {
border: 2px solid black;
border-radius: 4px;
width: auto;
padding: 5px;
background: white;
display: inline-flex;
}
.colorpicker {
border:none;
background: white;
display: inline-flex;
}
.favcolor {
font-family: verdana;
margin-top: 3px;
}
.slideshow-container {
display: block;
width: 80%;
position: relative;
margin: 10px;
margin-left: auto;
margin-right: auto;
}
.mySlides {
display: none;
}
.prev, .next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
margin-top: -22px;
padding: 16px;
color: white;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
user-select: none;
}
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
.prev:hover, .next:hover {
background-color: #a6a6a650;
}
.slide-name {
color: #f2f2f2;
font-size: 15px;
padding: 8px 12px;
position: absolute;
bottom: 8px;
width: 100%;
text-align: center;
}
.slide-number {
color: #f2f2f2;
font-size: 12px;
padding: 8px 12px;
position: absolute;
top: 0;
}
.fade {
animation-name: fade;
animation-duration: 1.5s;
}
#keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
.progress-bar {
width: 100%;
border: none;
border-radius: 100px;
background-color: #FFFFFF;
padding: 3px;
}
.progress-tag {
color: #DDDDDD;
margin-left: 10px;
}
.fill-html {
width: 75%;
background-color: #FA3200;
border-radius: 100px;
}
.fill-css {
width: 60%;
background-color: #0000C8;
border-radius: 100px;
}
.fill-js {
width: 10%;
background-color: #C80000;
border-radius: 100px;
}
.fill-php {
width: 3%;
background-color: #00C832;
border-radius: 100px;
}
.fill-rwpd {
width: 100%;
background-color: #450099;
border-radius: 100px;
}
#return {
display: none;
position: fixed;
bottom: 30px;
right: 35px;
z-index: 99;
border: none;
outline: none;
background-color: #0000d1;
color: white;
cursor: pointer;
border-radius: 100px;
font-size: 45px;
width: 60px;
height: 60px;
}
#return:hover {
background-color: #0101bb;
}
.progress-container {
padding: 10px;
}
.header-logo {
margin: 10px;
float: left;
}
.header {
background-color: #303030;
overflow: hidden;
width: 100%;
}
.desktop-nav {
float: right;
margin-right: 20px;
}
.desktop-nav a {
margin: 20px 30px 0 30px;
padding: 0 0 20px;
display: block;
color: white;
}
.desktop-nav a:hover {
color: #b4b4b4;
transition: 0.2s all ease;
}
.desktop-nav li {
float: left;
list-style: none;
}
.menu-button {
display: block;
margin: 15px;
font-size:25px;
cursor:pointer;
color:white
}
.menu-button:hover {
cursor: pointer;
}
.copyright {
color: #b4b4b4;
font-size: 15px;
}
footer {
background: #303030;
padding: 25px 0;
text-align: center;
bottom: 0;
width: 100%;
height: auto;
display: block;
}
.hyperlink {
display: inline-block;
position: relative;
color: #b4b4b4;
}
.hyperlink:after {
content: '';
position: absolute;
width: 100%;
transform: scaleX(0);
height: 2px;
bottom: 15px;
left: 0;
background-color: #b4b4b4;
transform-origin: bottom right;
transition: transform 0.25s ease-out;
}
.hyperlink:hover:after {
transform: scaleX(1);
transform-origin: bottom left;
}
.sidenav {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
right: 0;
background-color: #111111;
overflow-x: hidden;
transition: 0.5s;
padding-top: 60px;
}
.sidenav .closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 35px;
margin-left: 50px;
}
.recipe-container {
margin: 0px;
padding: 10px;
display: grid;
grid-template-columns: auto auto auto;
justify-content: center;
}
.recipe-window {
margin: 10px;
padding: 10px;
border: 1px solid #ffffff;
background-color: #ffffff;
word-break: break-word;
width: min-content;
border-radius: 10px;
}
.recipe-title {
color: black;
margin-top: 5px;
padding: 0px;
font-size: 25px;
}
:root {
color-scheme: dark;
}
<html>
<head>
<title>Home</title>
<link rel="icon" type="image/x-icon" href="https://imgur.com/dFEoiLv">
<link rel="stylesheet" href="main.css">
<link href="https://fonts.googleapis.com/css?family=Poppins" rel="stylesheet">
</head>
<body>
<div class="header">
<img src="https://imgur.com/JntIYPP" width="150px" title="Aeron" alt="logo" class="header-logo">
<ul class="desktop-nav">
<li>Home</li>
<li>Portfolio</li>
<li>Contact</li>
<li>Demo</li>
<li>Recipes</li>
<li>Progress</li>
<li>PC Setup Designer</li>
<li>Gallery</li>
<li><span class="menu-button" onclick="openNav()">☰</span></li>
</ul>
<div id="mySidenav" class="sidenav">
×
</div>
</div>
<h1 class="heading">Welcome to Aeron</h1>
<div style="height:100%"></div>
<footer>
<img src="./images/logo.png" width="150px" title="Aeron" alt="logo" class="footer-logo">
<p class="copyright">Copyright © 2022 Aeron Corporation</p>
About Us
<p>|</p>
Policy
<p>|</p>
Contact Us
</footer>
<button onclick="topFunction()" id="return" title="Return To Top">^</button>
<script>
let mybutton = document.getElementById("return");
window.onscroll = function() {scrollFunction()};
function scrollFunction() {
if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
mybutton.style.display = "block";
} else {
mybutton.style.display = "none";
}
}
function topFunction() {
document.body.scrollTop = 0;
}
function openNav() {
document.getElementById("mySidenav").style.width = "25%";
}
function closeNav() {
document.getElementById("mySidenav").style.width = "0";
}
</script>
</body>
</html>
As you can see the links aren't displaying inline. How can I fix this?

Wrap the links in a div with a class (I gave it footer-links) and give it the following styles:
.footer-links {
display: flex;
justify-content: center;
align-items: center;
}
#import url('https://fonts.googleapis.com/css2?family=Poppins:wght#200;300;400;500&display=swap');
* {
box-sizing: border-box;
scroll-behavior: smooth;
font-family: 'Poppins', sans-serif;
}
body {
/*background-color: #e0eafc;*/
background: linear-gradient( to right,#ff0000,#0000ff);
margin: 0;
}
p {
color:#ffffff;
font-size:20px;
padding: 10px;
}
.heading {
margin: 20px;
font-size: 50px;
text-align: center;
color: black;
}
a {
text-decoration: none;
}
.favcolorcontainer {
border: 2px solid black;
border-radius: 4px;
width: auto;
padding: 5px;
background: white;
display: inline-flex;
}
.colorpicker {
border:none;
background: white;
display: inline-flex;
}
.favcolor {
font-family: verdana;
margin-top: 3px;
}
.slideshow-container {
display: block;
width: 80%;
position: relative;
margin: 10px;
margin-left: auto;
margin-right: auto;
}
.mySlides {
display: none;
}
.prev, .next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
margin-top: -22px;
padding: 16px;
color: white;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
user-select: none;
}
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
.prev:hover, .next:hover {
background-color: #a6a6a650;
}
.slide-name {
color: #f2f2f2;
font-size: 15px;
padding: 8px 12px;
position: absolute;
bottom: 8px;
width: 100%;
text-align: center;
}
.slide-number {
color: #f2f2f2;
font-size: 12px;
padding: 8px 12px;
position: absolute;
top: 0;
}
.fade {
animation-name: fade;
animation-duration: 1.5s;
}
#keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
.progress-bar {
width: 100%;
border: none;
border-radius: 100px;
background-color: #FFFFFF;
padding: 3px;
}
.progress-tag {
color: #DDDDDD;
margin-left: 10px;
}
.fill-html {
width: 75%;
background-color: #FA3200;
border-radius: 100px;
}
.fill-css {
width: 60%;
background-color: #0000C8;
border-radius: 100px;
}
.fill-js {
width: 10%;
background-color: #C80000;
border-radius: 100px;
}
.fill-php {
width: 3%;
background-color: #00C832;
border-radius: 100px;
}
.fill-rwpd {
width: 100%;
background-color: #450099;
border-radius: 100px;
}
#return {
display: none;
position: fixed;
bottom: 30px;
right: 35px;
z-index: 99;
border: none;
outline: none;
background-color: #0000d1;
color: white;
cursor: pointer;
border-radius: 100px;
font-size: 45px;
width: 60px;
height: 60px;
}
#return:hover {
background-color: #0101bb;
}
.progress-container {
padding: 10px;
}
.header-logo {
margin: 10px;
float: left;
}
.header {
background-color: #303030;
overflow: hidden;
width: 100%;
}
.desktop-nav {
float: right;
margin-right: 20px;
}
.desktop-nav a {
margin: 20px 30px 0 30px;
padding: 0 0 20px;
display: block;
color: white;
}
.desktop-nav a:hover {
color: #b4b4b4;
transition: 0.2s all ease;
}
.desktop-nav li {
float: left;
list-style: none;
}
.menu-button {
display: block;
margin: 15px;
font-size:25px;
cursor:pointer;
color:white
}
.menu-button:hover {
cursor: pointer;
}
.copyright {
color: #b4b4b4;
font-size: 15px;
}
footer {
background: #303030;
padding: 25px 0;
text-align: center;
bottom: 0;
width: 100%;
height: auto;
display: block;
}
.hyperlink {
display: inline-block;
position: relative;
color: #b4b4b4;
}
.hyperlink:after {
content: '';
position: absolute;
width: 100%;
transform: scaleX(0);
height: 2px;
bottom: 15px;
left: 0;
background-color: #b4b4b4;
transform-origin: bottom right;
transition: transform 0.25s ease-out;
}
.hyperlink:hover:after {
transform: scaleX(1);
transform-origin: bottom left;
}
.sidenav {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
right: 0;
background-color: #111111;
overflow-x: hidden;
transition: 0.5s;
padding-top: 60px;
}
.sidenav .closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 35px;
margin-left: 50px;
}
.recipe-container {
margin: 0px;
padding: 10px;
display: grid;
grid-template-columns: auto auto auto;
justify-content: center;
}
.recipe-window {
margin: 10px;
padding: 10px;
border: 1px solid #ffffff;
background-color: #ffffff;
word-break: break-word;
width: min-content;
border-radius: 10px;
}
.recipe-title {
color: black;
margin-top: 5px;
padding: 0px;
font-size: 25px;
}
:root {
color-scheme: dark;
}
.footer-links {
display: flex;
justify-content: center;
align-items: center;
}
.footer-links p {
margin: 0;
}
<html>
<head>
<title>Home</title>
<link rel="icon" type="image/x-icon" href="https://imgur.com/dFEoiLv">
<link rel="stylesheet" href="main.css">
<link href="https://fonts.googleapis.com/css?family=Poppins" rel="stylesheet">
</head>
<body>
<div class="header">
<img src="https://imgur.com/JntIYPP" width="150px" title="Aeron" alt="logo" class="header-logo">
<ul class="desktop-nav">
<li>Home</li>
<li>Portfolio</li>
<li>Contact</li>
<li>Demo</li>
<li>Recipes</li>
<li>Progress</li>
<li>PC Setup Designer</li>
<li>Gallery</li>
<li><span class="menu-button" onclick="openNav()">☰</span></li>
</ul>
<div id="mySidenav" class="sidenav">
×
</div>
</div>
<h1 class="heading">Welcome to Aeron</h1>
<div style="height:100%"></div>
<footer>
<img src="./images/logo.png" width="150px" title="Aeron" alt="logo" class="footer-logo">
<p class="copyright">Copyright © 2022 Aeron Corporation</p>
<div class="footer-links">
About Us
<p>|</p>
Policy
<p>|</p>
Contact Us
</div>
</footer>
<button onclick="topFunction()" id="return" title="Return To Top">^</button>
<script>
let mybutton = document.getElementById("return");
window.onscroll = function() {scrollFunction()};
function scrollFunction() {
if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
mybutton.style.display = "block";
} else {
mybutton.style.display = "none";
}
}
function topFunction() {
document.body.scrollTop = 0;
}
function openNav() {
document.getElementById("mySidenav").style.width = "25%";
}
function closeNav() {
document.getElementById("mySidenav").style.width = "0";
}
</script>
</body>
</html>

Profile card going outside of the browser window

I want to achieve the mini profile view like in twitter. When we hover a user's name, his mini profile view is coming. But my problem it is going outside of the browser window. I need to adjust it according to the viewport. It should go outside of the window, it should adjust automatically.
it is coming this way
I need it this way
here is the code
<div class="popover__wrapper">
<a>Cyril</a>
<div class="push popover__content">
<div class="contact-card-user">
<div class="left-side">
<img src="../assets/img/profiles/male-user.jpg" alt="">
</div>
<div class="right-side">
<div class="details-wrapper">
<h3>Full Name </h3>
<div class="privilege">Administrator</div>
<div class="designation">Designer</div>
<div class="description">+973 1234 5678</div>
<div class="description">info#company.com</div>
</div>
</div>
</div>
</div>
<style>
.popover__wrapper {
position: relative;
margin-top: 0;
display: block;
cursor: pointer;
}
.popover__content {
opacity: 0;
visibility: hidden;
position: absolute;
left: 40px;
bottom: -90px;
transform: translate(0, 30px);
background-color: transparent;
padding: 0;
width: auto;
}
.popover__content:before {
position: absolute;
z-index: -1;
content: '';
left: -20px;
bottom: 100px;
border-style: solid;
border-width: 10px 10px 10px 10px;
border-color: transparent transparent transparent #a5053d;
transition-duration: 0.3s;
transition-property: transform;
transform: rotate(180deg);
-webkit-transform: rotate(180deg);
}
.contact-card-user {
background: #fff;
display: flex;
width: max-content;
box-shadow: 0px 0px 20px 1px rgba(0, 0, 0, 0.05);
}
.contact-card-user .left-side {
margin-right: 20px;
width: 100%;
max-width: 200px;
}
.contact-card-user .left-side img {
width: 100%;
height: auto;
}
.contact-card-user .right-side {
padding-left: 3px;
padding-top: 5px;
padding-bottom: 10px;
padding-right: 25px;
width: 100%;
max-width: 260px;
}
.contact-card-user .details-wrapper {
text-align: left;
}
.contact-card-user .details-wrapper h3 {
color: #333;
font-size: 16px;
white-space: pre-wrap;
overflow: hidden;
margin-bottom: 1px;
line-height: normal;
}
.contact-card-user .details-wrapper .privilege {
display: inline-block;
color: #a5053c;
font-weight: 400;
font-size: 14px;
letter-spacing: 0.7px;
margin-bottom: 13px;
margin-top: 6px;
border-bottom: 1px solid #00a000;
}
.contact-card-user .details-wrapper .designation {
color: #333;
margin-bottom: 5px;
}
.contact-card-user .details-wrapper .description {
color: #9a9a9a;
font-size: 12px;
line-height: 17px;
}
.contact-card-user .details-wrapper .description {
color: #9a9a9a;
font-size: 12px;
line-height: 17px;
}
</style>
I think may be javascript can solve. Any help?
Thank you

Search box looks different on mobile, cannot get it to be in the center of the page nor reduce the size of the search box

My site looks different on mobile, the hotel search box does not show up in it's entirety, so the labels at the bottom get cut off. Also I tried to add the following CSS code, it helped to center the hotel search box but I cannot get it to move the box closer to the header and make it smaller so that when I click on options they are not cut off:
#media only screen and (max-width:767px){
.containerBox {
width: 100%!important;
}
}
Here is the link and screenshot of what I am talking about.
Hotel Search box on the home page.
I will include the full code below.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
#selectCountry:ACTIVE, #destino:ACTIVE, #selectCountry:FOCUS, #destino:FOCUS {
color: #FFFFFF;
background-color: #ed8323; }
.select-complementarias {
border: 0px solid #dadada !important;
border-radius: 3px !important;
padding: 5px !important;
font-weight: bold !important;
color: #424547 !important;
width: 100%; }
.select-complementarias:ACTIVE, .select-complementarias:FOCUS {
color: #FFFFFF;
background-color: #ed8323; }
.searchCity {
min-width: 200px;
width: 100%;
color: #424547; }
.warning {
color: #FF0000 !important;
font-size: 14px; }
.numInputHidden, .elementHidden {
display: none; }
.divNewLine {
clear: left;
padding: 3px; }
.divCell {
float: left;
margin-right: 2px;
max-width: 236px;
width: 100%;
padding-right: 10px;
padding-left: 10px;
padding-bottom: 3px; }
.cell-complementarias {
float: left;
margin-right: 2px;
width: 250px;
padding-right: 10px;
padding-left: 10px;
padding-bottom: 10px; }
.divCell-auto {
float: left;
margin-right: 2px;
width: 100%;
padding-right: 10px;
padding-left: 10px;
padding-bottom: 3px; }
.divCellSmall {
float: left;
margin-right: 2px;
width: 110px;
padding-right: 10px;
padding-left: 10px;
padding-bottom: 3px; }
.divCell-20px {
float: left;
margin-right: 2px;
width: 20px;
padding-right: 10px;
padding-left: 10px;
padding-bottom: 3px; }
.divCell-50px {
float: left;
margin-right: 2px;
width: 50px;
padding-right: 5px;
padding-left: 5px;
padding-bottom: 3px; }
.divCell-130px {
float: left;
margin-right: 2px;
width: 130px;
padding-right: 10px;
padding-left: 10px;
padding-bottom: 3px; }
.divCell-100px {
float: left;
margin-right: 2px;
width: 100px;
padding-right: 10px;
padding-left: 10px;
padding-bottom: 3px; }
.time-hours {
width: 100px !important; }
.time-minutes {
width: 100px !important; }
.hoursFligths {
display: inline;
margin-left: 11px;
width: 130px !important; }
#selectsMenores select {
width: 50px; }
.textHidden {
display: none; }
.ui-datepicker {
font-size: 11px; }
.ui-widget {
font-size: 12px; }
.containerBox input {
border: 0px solid #dadada;
border-radius: 3px;
padding: 5px;
/*font-weight: bold;*/
line-height:21px!important;
width: 95%!important;
}
.containerBox select {
border: 0px solid #dadada !important;
border-radius: 3px !important;
padding: 5px !important;
/*font-weight: bold !important;*/
color: #424547 !important;
width: 100%;
-moz-appearance: none;
cursor: pointer;
height:auto;
}
#selectCountry {
width: 95% !important; }
.input-date {
width: 100%;
color: #424547; }
.input-date-home {
width: 357px !important;
color: #424547; }
.input-date:ACTIVE, .input-date-home:FOCUS, .input-date-home:ACTIVE, .input-date-home:FOCUS {
color: #FFFFFF;
background-color: #ed8323; }
.ui-widget {
font-weight: bold !important; }
.ui-widget-content {
font-weight: bold !important;
border: 0px solid #eee; }
.container-box-ticket, .container-box-hotel {
width: 375px !important; }
.container-box-ticket {
width: 375px !important; }
.containerBox {
font-family: arial;
border: 0px solid #dadada;
width: 512px!important;
background-color: #262626e8;
color: #FFFFFF;
font-size: 17px;
/*font-weight: bold;*/
padding: 10px;
position: relative; }
.containerBox label {
font-size: 12px;
font-weight: bold;
color: #fff;
display: inline-block;
}
.containerBox input:FOCUS {
border: 0px solid #dadada;
border-color: #53a69d;
box-shadow: 0 0 3px #000000;
background-color: #ed8323;
color: #FFFFFF; }
select:FOCUS, .containerBox input:ACTIVE, select:ACTIVE {
border: 0px solid #dadada !important;
border-color: #ed8323 !important;
box-shadow: 0 0 3px #000000 !important;
background-color: #ed8323 !important;
color: #FFFFFF !important; }
.containerBox button {
border: 0px solid #D8D8D8;
border-radius: 3px;
background-color: #F2F2F2;
font: arial;
font-size: 12px;
cursor: pointer;
width: 100px;
height: 35px!important; }
.containerBox button:HOVER {
border-radius: 3px;
border-color: #CED8F6;
background-color: #D8D8D8; }
#divbuttonverpreciosbuscando {
display: none; }
.spinner {
margin: 10px auto;
width: 50px;
height: 40px!important;
text-align: center;
font-size: 10px; }
.spinner > div {
background-color: #333;
height: 100%!important;
width: 6px;
display: inline-block;
-webkit-animation: sk-stretchdelay 1.2s infinite ease-in-out;
animation: sk-stretchdelay 1.2s infinite ease-in-out; }
.spinner .rect2 {
-webkit-animation-delay: -1.1s;
animation-delay: -1.1s; }
.spinner .rect3 {
-webkit-animation-delay: -1s;
animation-delay: -1s; }
.spinner .rect4 {
-webkit-animation-delay: -0.9s;
animation-delay: -0.9s; }
.spinner .rect5 {
-webkit-animation-delay: -0.8s;
animation-delay: -0.8s; }
#-webkit-keyframes sk-stretchdelay {
0%, 40%, 100% {
-webkit-transform: scaleY(0.4); }
20% {
-webkit-transform: scaleY(1); } }
#keyframes sk-stretchdelay {
0%, 40%, 100% {
transform: scaleY(0.4);
-webkit-transform: scaleY(0.4); }
20% {
transform: scaleY(1);
-webkit-transform: scaleY(1); } }
hr {
color: #ed8323;
border-color: #ed8323; }
.titulo {
font-size: 20px;
text-align: left;
margin-left: -15px;
margin-right: -15px; }
.titulo-segundo {
font-size: 12px;
margin-left: -8px;
margin-right: 38px;
margin-top: -28px;
position: fixed;
text-align: left;
width: 225px;
z-index: 110; }
#ver_precios, .buttonForm {
background-color: #ed8323 !important;
color: #FFFFFF !important;
font-weight: bold !important;
opacity: 1 !important;
border: 0 solid #d8d8d8;
border-radius: 3px;
cursor: pointer;
font-size: 12px;
width: 100px;
height: 35px;!important; }
.ui-datepicker {
background: #ffffff;
border: 1px solid #555;
color: #EEE;
border: 0px;
box-shadow: 0 0 3px #000000; }
.ui-datepicker-header {
position: relative;
padding-bottom: 10px;
background: #ffffff !important;
border: 0px !important; }
.ui-widget-header {
background: #ffffff !important; }
.ui-dialog .ui-dialog-titlebar {
color: #FFFFFF;
font-size: 16px;
font-weight: bold !important;
background: #262626; }
.ui-dialog .ui-dialog-titlebar .ui-button {
color: #FFFFFF !important;
font-size: 16px !important;
font-weight: bold !important;
background: #262626 !important; }
.ui-dialog .ui-dialog-titlebar .ui-state-focus {
background: red; }
.ui-dialog {
background: #262626;
position: fixed; }
.ui-datepicker-title {
background-color: #ffffff;
line-height: 1em !important; }
.ui-datepicker-month {
color: #ed8323;
padding: 0px !important;
margin: 0px !important;
background-color: #ffffff; }
.ui-datepicker-year {
color: #ed8323;
background-color: #ffffff; }
.ui-datepicker .ui-state-default {
background: #ffffff !important;
border: 0px solid #d3d3d3 !important; }
.ui-datepicker, .ui-datepicker .ui-datepicker-calendar .ui-state-default {
color: #000000 !important;
text-align: center; }
.ui-state-active {
border-radius: 0 !important;
background: #ed8323 !important;
cursor: pointer !important;
text-decoration: none !important; }
.ui-state-focus {
border-radius: 0 !important;
cursor: pointer !important;
text-decoration: none !important;
border: 0px; }
.ui-state-focus:HOVER {
border-color: transparent;
color: #FFFFFF !important;
background: #1ec7e6 !important; }
.ui-menu, .ui-menu-item {
background: #ed8323 none repeat scroll 0 0 !important; }
.ui-datepicker-calendar td a.ui-state-hover {
background: #ed8323 none repeat scroll 0 0 !important; }
.ui-datepicker-calendar td a.ui-state-active {
background: #ed8323 none repeat scroll 0 0 !important; }
.ui-datepicker-calendar td a.ui-state-focus {
background: #ed8323 none repeat scroll 0 0 !important; }
.ui-datepicker-title {
margin: 0 2.3em;
text-align: center; }
.ui-datepicker-year {
display: block;
font-size: 9px;
margin-left: -5px; }
.ui-datepicker table {
border-collapse: separate;
font-size: 0.9em; }
.calendarioIcon {
height: 19px!important;
margin: 6px 149px;
position: absolute; }
.close-dialog-icon {
cursor: pointer;
height: 51px;
margin: -22px 525px 0;
position: absolute; }
.calendarioIcon-hotel {
height: 19px!important;
margin: 3px 20px;
position: absolute;
right: 5%; }
.calendarioIcon-tickets {
height: 19px!important;
margin: 6px 438px;
position: absolute; }
.calendario-icon-homes {
height: 19px!important;
margin: 3px 440px;
position: absolute; }
.calendario-icon-arrow {
height: 25px!important;
margin: 3px 175px;
position: absolute; }
.ui-autocomplete-loading {
background: white url("material/ring-alt.svg") right center no-repeat;
background-size: 20px 20px; }
.spinner {
margin: 10px auto;
width: 50px;
height: 40px;
text-align: center;
font-size: 10px; }
.spinner > div {
background-color: #333;
height: 100%;
width: 6px;
display: inline-block;
-webkit-animation: sk-stretchdelay 1.2s infinite ease-in-out;
animation: sk-stretchdelay 1.2s infinite ease-in-out; }
.spinner .rect2 {
-webkit-animation-delay: -1.1s;
animation-delay: -1.1s; }
.spinner .rect3 {
-webkit-animation-delay: -1s;
animation-delay: -1s; }
.spinner .rect4 {
-webkit-animation-delay: -0.9s;
animation-delay: -0.9s; }
.spinner .rect5 {
-webkit-animation-delay: -0.8s;
animation-delay: -0.8s; }
#-webkit-keyframes sk-stretchdelay {
0%, 40%, 100% {
-webkit-transform: scaleY(0.4); }
20% {
-webkit-transform: scaleY(1); } }
#keyframes sk-stretchdelay {
0%, 40%, 100% {
transform: scaleY(0.4);
-webkit-transform: scaleY(0.4); }
20% {
transform: scaleY(1);
-webkit-transform: scaleY(1); } }
#divbuttonverpreciosbuscando {
display: none; }
.ui-corner-all {
border: 0px; }
#airline {
width: 100%!important; }
.label-hiden {
display: none !important; }
.containerBox-header {
opacity: 0.9 !important;
/* border-top-left-radius: 10px;
border-top-right-radius: 10px;*/ }
.containerBox-footer {
opacity: 1 !important;
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;
border-top-left-radius: 0px !important;
border-top-right-radius: 0px !important;
/* padding-top: 9px !important;
padding-bottom: 20px !important;*/
transition-duration: 0.4s;
transition-property: background;
/* height: 5px !important;*/
background-color: #ed8323 !important;
font-size: 14px;
font-weight: 500 !important; }
.containerBox-footer:HOVER {
background-color: #ed8323 !important;
cursor: pointer; }
.buscar-label {
margin-top: 5px !important; }
.ui-dialog .ui-dialog-titlebar, .ui-dialog label {
background: #262626 none repeat scroll 0 0 !important;
color: #FFFFFF; }
.error-input {
border-color: #FF0000;
box-shadow: 0 0 1em red;
background-color: #FBEFF2; }
.error-input:-ms-input-placeholder {
color: red !important; }
.error-input::-moz-placeholder {
color: red !important; }
.error-input:-moz-placeholder {
color: red !important; }
.error-input::-webkit-input-placeholder {
color: red !important; }
.containerBox input::-webkit-input-placeholder {
color: #000000; }
.containerBox input:-ms-input-placeholder {
color: #000000; }
.containerBox input::-moz-placeholder {
color: #000000; }
.containerBox input:focus::-webkit-input-placeholder {
color: #000000 !important; }
.containerBox input:focus:-ms-input-placeholder {
color: #000000 !important; }
.containerBox input:focus::-moz-placeholder {
color: #000000 !important; }
#not-found-sources {
color: #FFFFFF; }
.ui-autocomplete-input .ui-corner-all {
color: #000000 !important; }
.ui-autocomplete a {
color: #000000 !important; }
.box_float{
display: block;
position: absolute;
top: 90px;
z-index: 2;
}
li{
list-style-type: none!important;
margin: 0;
padding: 0;
}
.caja_fondo{
height:auto;
font-family: arial;
border: 0px solid #dadada;
opacity: 0.8;
color: #FFFFFF;
font-size: 17px;
/*font-weight: bold;*/
padding: 15px;
position: relative;
}
.catalog-area {
display: inline-block;
background-color: rgba(39,46,59,.8);
height: auto;
padding: 1px 1px 1px 1px;
width: 100%;
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
}
/*.imagenes_circuitos {
height: 456px;
width: 370px;
padding: 1px 1px 1px 1px;
overflow-y: scroll;
}
.imagenes_circuitos_min{
padding-top: 20px;*/
}
.circuit_catalog {
display: table-cell;
z-index: 9;
padding: 1px 1px 1px 1px;
font-family: Arial, Helvetica, sans-serif;
/*font-weight: bold;*/
display: inline-block;
text-align: center;
color: gray;
display: inline-block;
border-radius: 25px;
vertical-align: middle;
border-radius: 25px;
}
.circuit_catalog a {
color: #3c5c8b;
font-weight: 700;
text-decoration: none;
outline: none;
font-family: Arial, Helvetica, sans-serif;
line-height: 12px;
/*font-weight: bold;*/
display: inline-block;
text-align: center;
color: gray;
display: inline-block;
}
/*.img_circuits {
opacity: .8;
width: 160px;
height: 200px;
border-radius: 15px;
box-shadow: 2px 2px 2px #3C5C8B;*/
}
.containerBoxCircuits {
font-family: arial;
border: 0px solid #dadada;
background-color: #262626;
color: #ffffff;
font-size: 17px;
/*font-weight: bold;*/
padding-left: 15px;
padding-right: 15px;
display: inline-block;
float: left;
opacity: .8;
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;
}
.container-box-circuit{
margin-left:20px;
display:none;
}
/*.img_circuits_min {
width: 80px;
height: 100px;
border-radius: 15px;
box-shadow: 2px 2px 2px #3C5C8B;*/
}
.circuit_catalog_min {
font-family: Arial, Helvetica, sans-serif;
line-height: 12px;
/*font-weight: bold;*/
width: 88px;
height: 110px;
display: inline-block;
text-align: center;
color: gray;
display: inline-block;
border-radius: 25px;
vertical-align: middle;
-webkit-transform: translateZ(0);
transform: translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-moz-osx-font-smoothing: grayscale;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-property: box-shadow;
transition-property: box-shadow;
}
.celdas {
float: left;
padding: 5px;
}
.containerBox-circuits {
padding-bottom: 20px;
}
/*.img_circuits_botmin {
background-color: #d42729;
position: absolute;
float: left;
left: 4px;
bottom: 10px;
width: 80px;
height: 23px;
line-height: 10px;
font-size: 7px;
color: white;
font-weight: inherit;
border-bottom-left-radius: 15px;
border-bottom-right-radius: 15px;*/
}
.textcatmin {
position: absolute;
float: left;
padding-top: 0px;
left: 0px;
width: 80px;
height: 22px;
line-height: 7px;
font-size: 7px;
color: white;
font-weight: inherit;
border-bottom-left-radius: 15px;
border-bottom-right-radius: 15px;
overflow: hidden;
}
.containerBoxAll {
width: 512px!important;
padding-top: 0px;
padding-left: 0px;
padding-right: 0px;
padding-bottom: 0px;
border-bottom-right-radius: 0px;
border-bottom-left-radius: 0px;
}
.tab-content .tab-menu button {
color: #fff;
cursor: pointer;
opacity: 1 !important;
padding-top: 15px !important;
padding-bottom: 15px !important;
transition-duration: 0.4s;
transition-property: background;
height: 5px !important;
background-color: #ed8323 !important;
width: 81px;
padding: 10px;
}
.tab-content .tab-menu button:HOVER {
background-color: #ed8323 !important;
cursor: pointer;
color:#000;
}
.tab-content .tab-menu button.active {
background-color: #262626!important;
color: #ed8323 ;
}
span.titulo-tabs {
word-wrap:normal;
float:left;
line-height: 0px;
}
.footerAll {
width: 512px!important;
border-bottom-right-radius: 0px;
border-bottom-left-radius: 0px;
}
.form-service{
margin-left: 13px;
margin-right: -13px;
}
.CircuitsAll {
width: 511px!important;
opacity: 1!important;
}
.CircuitsAll:HOVER {
opacity: 1!important;
}
.containerBoxCircuitsAll:HOVER {
opacity: 1!important;
}
.containerBoxCircuitsAll{
width: 541px;
padding-top: 0px;
padding-left: 0px;
padding-right: 0px;
padding-bottom: 0px;
border-bottom-right-radius: 0px;
border-bottom-left-radius: 0px;
}
.tab-content{
width:100%;
float:left;
}
input[type="radio"], input[type="checkbox"] {
margin-right: 0.5em;
width: 15px!important;
}
/*# sourceMappingURL=comun.css.map */

Use these css
#media(max-width:767px){
.html_header_transparency #top .avia-builder-el-0 .container, .html_header_transparency #top .avia-builder-el-0 .slideshow_caption {
padding-top: 0px;
}
#top .input-text, #top input[type="text"], #top input[type="input"], #top input[type="password"], #top input[type="email"], #top input[type="number"], #top input[type="url"], #top input[type="tel"], #top input[type="search"], #top textarea, #top select {
margin-bottom: 10px;
height: 39px;
}
.avia-slideshow li img {
display: none;
}
}
for center the box use it.
.containerBox {
margin: auto;
}
.containerBox-header {
opacity: 0.9 !important;
margin-top: 70px;
}
.avia_codeblock_section .avia_codeblock .widget {
top: 0;
left: 0;
}
for mobile view
#media (max-width: 767px)
#wrap_all #main #after_full_slider_1 .container .av-content-full .post-entry .entry-content-wrapper .avia_codeblock_section .avia_codeblock .widget {
width: 100% !important;
}
.avia_codeblock_section .avia_codeblock .widget {
left: 0;
top: 0;
}
}
if it's not work use !important after css like this - display: none !important;

OnClick Doesn't Work First Time

I have tried many different ways to overcome this issue, but unfortunately I have been unable to find the solution. (And yes, I have even tried searching for a solution to no avail.)
The trigger does not operate on the first go, however it does work there after. I have tried setting the targetToggle to 0 and it still did not work.
Any help on this would be much appreciated!
$(document).ready(function() {
$('.toggleTarget').hide();
$(".products-item").click(function() {
var a = $(this).data('number');
var toggleTargetId = $(this).attr('data-target');
var toggleTarget = $(document.getElementById(toggleTargetId));
if (a === "0") {
toggleTarget.show("slow", "swing");
$(this).data('number', '1');
} else {
toggleTarget.hide("slow", "swing");
$(this).data('number', '0');
}
});
});
.products-item {
height: auto;
width: 350px;
display: inline-block;
margin: 30px;
padding-top: 20px;
padding-left: 20px;
padding-right: 20px;
border: solid 2px #f5f5f5;
border-radius: 10px;
background-color: #f5f5f5;
cursor: pointer;
white-space: nowrap;
vertical-align: top;
transition: all 0.25s ease-in-out;
}
.products-item-label {
width: 100px;
height: auto;
font-size: 12px;
font-family: Comfortaa;
display: block;
position: relative;
padding: 10px;
left: -22px;
color: #fff;
background-color: #015c94;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
}
.products-item-img {
height: auto;
width: auto;
display: inline-block;
border-radius: 190px;
transition: all 0.25s ease-in-out;
z-index: 10;
}
.products-item-text {
width: auto;
height: auto;
bottom: 0px;
left: 0px;
margin: 10px;
padding: 15px;
display: inline-block;
font-family: Comfortaa;
font-size: 14px;
text-align: center;
border-radius: 5px;
color: #333;
background-color: transparent;
transition: all 0.25s ease-in-out;
}
.products-item:hover {
border: solid 2px #bae9ff;
background-color: #bae9ff;
}
.products-item:hover .products-item-text {
color: #015c94;
border-radius: 5px;
}
.products-item:hover .products-item-details {
color: #015c94;
transition: color 0.25s ease-in-out;
}
.products-item-details {
height: auto;
width: 100%;
padding-top: 0px;
padding-bottom: 25px;
font-size: 14px;
text-align: center;
}
.products-item-details p {
width: 350px;
word-break: break-word;
word-break: break-all;
word-wrap: break-word;
white-space: pre-wrap;
}
.products-item-details ul {
width: 350px;
margin: 0;
display: inline-block;
}
.products-item-details li {
width: 350px;
padding-top: 5px;
padding-bottom: 5px;
text-align: center;
overflow: hidden;
word-wrap: break-word;
white-space: pre-wrap;
}
.products-item-details-table {
background-color: transparent;
width: 100%;
font-family: Comfortaa;
font-size: 14px;
padding-top: 20px;
padding-bottom: 20px;
table-layout: fixed;
white-space: nowrap;
/*border-collapse: collapse; REMOVE BORDER GAPPING */
}
.products-item-details-table tr {
width: 600px;
}
.products-item-details-table th {
background-color: #ccc;
color: #fff;
font-size: 15px;
font-weight: normal;
width: auto;
border: none;
text-align: center;
transition: all 0.25s ease-in-out;
}
.products-item-details-table td {
background-color: #fff;
width: 200px;
text-align: left;
transition: all 0.25s ease-in-out;
}
.products-item:hover .products-item-details-table th {
background-color: #015c94;
color: #fff;
font-size: 15px;
font-weight: normal;
width: auto;
border: none;
text-align: center;
}
.products-item:hover .products-item-details-table td {
background-color: #fff;
color: #015c94;
width: 200px;
text-align: left;
}
.products-item-link {
width: 100%;
height: 20px;
font-size: 16px;
color: #ccc;
text-decoration: none;
cursor: pointer;
transition: all 0.25s ease-in-out;
}
.products-item-link:hover {
color: #666;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div id="info-9-btn" class="products-item" data-target="info-9" data-number="0">
<div class="products-item-label">NEW</div>
<div class="products-item-img buoy-9"></div>
<br />
<div class="products-item-text">Round Buoy</div>
<div id="info-9" class="products-item-details toggleTarget">
<ul style="list-style:none; padding:0; height:auto;">
<li>500mm x 500mm</li>
<li>Foam Filled</li>
<li>Can be engineered into a floating barrier to designate work zones, cordon off weir walls and other dangerous water areas.</li>
<li>Can be fitted with a mooring tube and used as a mooring buoy.</li>
<li>Can be used for any water application, where needed.</li>
</ul>
<p>Fully Owned and Made in Australia.</p>
<p>Roto Moulded in our fully automatic, gas compliant, Australian Standard Oven.</p>
</div>
<div class="toggleButton"></div>
</div>

use with (a=="0") instead of (a === 0)
Difference between == and === in JavaScript
$(document).ready(function(){
$('.toggleTarget').hide();
$(".products-item")
.click(function() {
var a = $(this).data('number');
var toggleTargetId = $(this).attr('data-target');
var toggleTarget = $(document.getElementById(toggleTargetId));
if (a=="0") {
toggleTarget.show("slow", "swing");
$(this).data('number','1');
} else {
toggleTarget.hide("slow", "swing");
$(this).data('number','0');
}
});
});
.products-item {
height: auto;
width: 350px;
display: inline-block;
margin: 30px;
padding-top: 20px;
padding-left: 20px;
padding-right: 20px;
border: solid 2px #f5f5f5;
border-radius: 10px;
background-color: #f5f5f5;
cursor: pointer;
white-space: nowrap;
vertical-align: top;
transition: all 0.25s ease-in-out;
}
.products-item-label {
width: 100px;
height: auto;
font-size: 12px;
font-family: Comfortaa;
display: block;
position: relative;
padding: 10px;
left: -22px;
color: #fff;
background-color: #015c94;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
}
.products-item-img {
height: auto;
width: auto;
display: inline-block;
border-radius: 190px;
transition: all 0.25s ease-in-out;
z-index: 10;
}
.products-item-text {
width: auto;
height: auto;
bottom: 0px;
left: 0px;
margin: 10px;
padding: 15px;
display: inline-block;
font-family: Comfortaa;
font-size: 14px;
text-align: center;
border-radius: 5px;
color: #333;
background-color: transparent;
transition: all 0.25s ease-in-out;
}
.products-item:hover {
border: solid 2px #bae9ff;
background-color: #bae9ff;
}
.products-item:hover .products-item-text {
color: #015c94;
border-radius: 5px;
}
.products-item:hover .products-item-details {
color: #015c94;
transition: color 0.25s ease-in-out;
}
.products-item-details {
height: auto;
width: 100%;
padding-top: 0px;
padding-bottom: 25px;
font-size: 14px;
text-align: center;
}
.products-item-details p {
width: 350px;
word-break: break-word;
word-break: break-all;
word-wrap: break-word;
white-space: pre-wrap;
}
.products-item-details ul {
width: 350px;
margin: 0;
display: inline-block;
}
.products-item-details li {
width: 350px;
padding-top: 5px;
padding-bottom: 5px;
text-align: center;
overflow: hidden;
word-wrap: break-word;
white-space: pre-wrap;
}
.products-item-details-table {
background-color: transparent;
width: 100%;
font-family: Comfortaa;
font-size: 14px;
padding-top: 20px;
padding-bottom: 20px;
table-layout: fixed;
white-space: nowrap;
/*border-collapse: collapse; REMOVE BORDER GAPPING */
}
.products-item-details-table tr {
width: 600px;
}
.products-item-details-table th {
background-color: #ccc;
color: #fff;
font-size: 15px;
font-weight: normal;
width: auto;
border: none;
text-align: center;
transition: all 0.25s ease-in-out;
}
.products-item-details-table td {
background-color: #fff;
width: 200px;
text-align: left;
transition: all 0.25s ease-in-out;
}
.products-item:hover .products-item-details-table th {
background-color: #015c94;
color: #fff;
font-size: 15px;
font-weight: normal;
width: auto;
border: none;
text-align: center;
}
.products-item:hover .products-item-details-table td {
background-color: #fff;
color: #015c94;
width: 200px;
text-align: left;
}
.products-item-link {
width: 100%;
height: 20px;
font-size: 16px;
color: #ccc;
text-decoration: none;
cursor: pointer;
transition: all 0.25s ease-in-out;
}
.products-item-link:hover {
color: #666;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div id="info-9-btn" class="products-item" data-target="info-9" data-number="0">
<div class="products-item-label">NEW</div>
<div class="products-item-img buoy-9"></div><br />
<div class="products-item-text">Round Buoy</div>
<div id="info-9" class="products-item-details toggleTarget">
<ul style="list-style:none; padding:0; height:auto;">
<li>500mm x 500mm</li>
<li>Foam Filled</li>
<li>Can be engineered into a floating barrier to designate work zones, cordon off weir walls and other dangerous water areas.</li>
<li>Can be fitted with a mooring tube and used as a mooring buoy.</li>
<li>Can be used for any water application, where needed.</li>
</ul>
<p>Fully Owned and Made in Australia.</p>
<p>Roto Moulded in our fully automatic, gas compliant, Australian Standard Oven.</p>
</div>
<div class="toggleButton"></div>
</div>

It's because if ( a === "0") { is checking the types and values. A is a number and "0" is a string. Change it to a == "0".

Change the === to == and it will work.
Alternatively, test a === 0 without the quotes, and then within the if/else where you change the value set it to 0 or 1 without the quotes.
The problem is that the .data() method is "smart": if the value in the data-number attribute can be converted to a numeric value then it returns a number rather than a string.
In your case you have data-number="0", so .data('number') returns 0, not "0". But === tests for type equality, whereas == allows type coercion.
(Expand and run the following to see it work with ==:)
$(document).ready(function(){
$('.toggleTarget').hide();
$(".products-item")
.click(function() {
var a = $(this).data('number');
var toggleTargetId = $(this).attr('data-target');
var toggleTarget = $(document.getElementById(toggleTargetId));
if ( a == "0") {
toggleTarget.show("slow", "swing");
$(this).data('number','1');
} else {
toggleTarget.hide("slow", "swing");
$(this).data('number','0');
}
});
});
.products-item {
height: auto;
width: 350px;
display: inline-block;
margin: 30px;
padding-top: 20px;
padding-left: 20px;
padding-right: 20px;
border: solid 2px #f5f5f5;
border-radius: 10px;
background-color: #f5f5f5;
cursor: pointer;
white-space: nowrap;
vertical-align: top;
transition: all 0.25s ease-in-out;
}
.products-item-label {
width: 100px;
height: auto;
font-size: 12px;
font-family: Comfortaa;
display: block;
position: relative;
padding: 10px;
left: -22px;
color: #fff;
background-color: #015c94;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
}
.products-item-img {
height: auto;
width: auto;
display: inline-block;
border-radius: 190px;
transition: all 0.25s ease-in-out;
z-index: 10;
}
.products-item-text {
width: auto;
height: auto;
bottom: 0px;
left: 0px;
margin: 10px;
padding: 15px;
display: inline-block;
font-family: Comfortaa;
font-size: 14px;
text-align: center;
border-radius: 5px;
color: #333;
background-color: transparent;
transition: all 0.25s ease-in-out;
}
.products-item:hover {
border: solid 2px #bae9ff;
background-color: #bae9ff;
}
.products-item:hover .products-item-text {
color: #015c94;
border-radius: 5px;
}
.products-item:hover .products-item-details {
color: #015c94;
transition: color 0.25s ease-in-out;
}
.products-item-details {
height: auto;
width: 100%;
padding-top: 0px;
padding-bottom: 25px;
font-size: 14px;
text-align: center;
}
.products-item-details p {
width: 350px;
word-break: break-word;
word-break: break-all;
word-wrap: break-word;
white-space: pre-wrap;
}
.products-item-details ul {
width: 350px;
margin: 0;
display: inline-block;
}
.products-item-details li {
width: 350px;
padding-top: 5px;
padding-bottom: 5px;
text-align: center;
overflow: hidden;
word-wrap: break-word;
white-space: pre-wrap;
}
.products-item-details-table {
background-color: transparent;
width: 100%;
font-family: Comfortaa;
font-size: 14px;
padding-top: 20px;
padding-bottom: 20px;
table-layout: fixed;
white-space: nowrap;
/*border-collapse: collapse; REMOVE BORDER GAPPING */
}
.products-item-details-table tr {
width: 600px;
}
.products-item-details-table th {
background-color: #ccc;
color: #fff;
font-size: 15px;
font-weight: normal;
width: auto;
border: none;
text-align: center;
transition: all 0.25s ease-in-out;
}
.products-item-details-table td {
background-color: #fff;
width: 200px;
text-align: left;
transition: all 0.25s ease-in-out;
}
.products-item:hover .products-item-details-table th {
background-color: #015c94;
color: #fff;
font-size: 15px;
font-weight: normal;
width: auto;
border: none;
text-align: center;
}
.products-item:hover .products-item-details-table td {
background-color: #fff;
color: #015c94;
width: 200px;
text-align: left;
}
.products-item-link {
width: 100%;
height: 20px;
font-size: 16px;
color: #ccc;
text-decoration: none;
cursor: pointer;
transition: all 0.25s ease-in-out;
}
.products-item-link:hover {
color: #666;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div id="info-9-btn" class="products-item" data-target="info-9" data-number="0">
<div class="products-item-label">NEW</div>
<div class="products-item-img buoy-9"></div><br />
<div class="products-item-text">Round Buoy</div>
<div id="info-9" class="products-item-details toggleTarget">
<ul style="list-style:none; padding:0; height:auto;">
<li>500mm x 500mm</li>
<li>Foam Filled</li>
<li>Can be engineered into a floating barrier to designate work zones, cordon off weir walls and other dangerous water areas.</li>
<li>Can be fitted with a mooring tube and used as a mooring buoy.</li>
<li>Can be used for any water application, where needed.</li>
</ul>
<p>Fully Owned and Made in Australia.</p>
<p>Roto Moulded in our fully automatic, gas compliant, Australian Standard Oven.</p>
</div>
<div class="toggleButton"></div>
</div>

Javascript to reveal hidden DIV

I have been working on a code to display more details when an item is clicked. So far I have come up with this.
HTML:
<script>
$(document).ready(function(){
$('.toggleTarget').hide();
$(".products-item")
.click(function() {
var id = $(this).attr('data-number');
var toggleTargetId = $(this).attr('data-target');
var toggleTarget = $(document.getElementById(toggleTargetId));
if ( id.val() === "0" ) {
toggleTarget.show("slow", "swing");
id.val(1)
} else {
toggleTarget.hide("slow", "swing");
id.val(0)
}
});
});
</script>
<div id="info-1-btn" class="products-item" data-target="info-1" data-number="0">
<div class="products-item-img buoy-1"></div><br />
<div class="products-item-text">Sign Float</div>
<div class="products-item-details">
<div id="info-1" class="products-item-details toggleTarget">
<table class="products-item-details-table" cellpadding="15px">
<tr>
<th>Sizes:</th>
<th>Material:</th>
</tr>
<tr>
<td>500mm</td>
<td>*MATERIAL*</td>
</tr>
</table>
</div>
</div>
</div>
CSS:
.products-item {
height: auto;
width: 300px;
display: inline-block;
margin: 10px;
padding-top: 20px;
padding-left: 20px;
padding-right: 20px;
border: solid 2px #f5f5f5;
border-radius: 10px;
background-color: #f5f5f5;
cursor: pointer;
transition: all 0.25s ease-in-out;
}
.products-item-img {
height: auto;
width: auto;
display: inline-block;
border-radius: 140px;
transition: all 0.25s ease-in-out;
z-index: 10;
}
.products-item-text {
width: auto;
height: auto;
bottom: 0px;
left: 0px;
margin: 10px;
padding: 15px;
display: inline-block;
font-family: Comfortaa;
font-size: 14px;
text-align: center;
border-radius: 5px;
color: #333;
background-color: transparent;
transition: all 0.25s ease-in-out;
}
.products-item:hover {
background-color: #bae9ff;
border: solid 2px #bae9ff;
}
.products-item:hover .products-item-text {
color: #000;
border-radius: 5px;
}
.products-item-details-table {
background-color: transparent;
width: 100%;
font-family: Comfortaa;
font-size: 14px;
padding-top: 20px;
padding-bottom: 20px;
table-layout: fixed;
white-space: nowrap;
/*border-collapse: collapse; REMOVE BORDER GAPPING */
}
.products-item-details-table tr {
background-color: #fff;
width: 600px;
}
.products-item-details-table th {
background-color: #ccc;
color: #fff;
font-size: 15px;
font-weight: normal;
width: auto;
border: none;
text-align: center;
}
.products-item-details-table td {
background-color: #fff;
width: 200px;
text-align: left;
}
I am looking to reveal products-item-details when I click on the selected products-item div.
If you require more information, please let me know.
Thank you.