So let's say I have something like this:
body {
background: #ffffff;
}
.table {
display: table;
margin: 0px auto;
max-width: 400px
}
.row {
display: table-row;
width: 100%
}
.td1,
.td2,
.td3 {
display: table-cell;
border: 2px #aaaaaa solid;
padding: 15px;
background: #eeeeee;
font-size: 18px;
color: #000000;
width: 100%;
}
.td2,
.td3 {
border-top: none;
color: red;
}
<body>
<div class="table">
<div class="row">
<div class="td1">Here is some random text</div>
</div>
<div class="row">
<div class="td2">This is the text you see at first</div>
</div>
<div class="row">
<div class="td3">This is the text below the other div</div>
</div>
</div>
Now, what I would like to do is have the td2 text to show when you first see the page, but not the td3. Then when clicking the td2 div it makes a fadeout or slides upwards, and then reveal the td3 div and that text. In this particular case the div doesn't have to come back when re-clicking. It's just like a "one way ticket". Click, and it's gone forever.
What might be the easiest way to do this ?
You could use JQuery UI to get the fade effect, and register to click event on .td2 in order to update the DOM as per your requirement. Here's one way of doing it:
$(".td2").on("click", function(){
$(".td2").fadeOut();
$(".td3").fadeIn();
});
body {
background: #ffffff;
}
.table {
display: table;
margin: 0px auto;
max-width: 400px
}
.row {
display: table-row;
width:100%
}
.td1, .td2, .td3 {
display: table-cell;
border: 2px #aaaaaa solid;
padding: 15px;
background: #eeeeee;
font-size: 18px;
color: #000000;
width:100%;
}
.td2, .td3 {
border-top: none;
color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery-ui.min.js"></script>
<div class="table">
<div class="row">
<div class="td1">Here is some random text</div>
</div>
<div class="row">
<div class="td2">This is the text you see at first</div>
</div>
<div class="row">
<div class="td3" style="display:none">This is the text below the other div</div>
</div>
</div>
$('.td2').on('click', function() {
$(this).fadeOut(200).promise()
.done(function() {
$('.td3').fadeIn(200);
});
});
.table {
display: table;
margin: 0px auto;
max-width: 400px
}
.row {
display: table-row;
width: 100%
}
.hide {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="table">
<div class="row">
<div class="td1">
Here is some random text
</div>
</div>
<div class="row">
<div class="td2">
This is the text you see at first
</div>
</div>
<div class="row">
<div class="td3 hide">
This is the text below the other div
</div>
</div>
</div>
You will need to learn some javascript and some jQuery for this ;)
Add this to your css:
.td3{
display: none;
}
And write this javascript:
$('.td2').on( "click", function(){
$('.td2').fadeOut();
$('.td3').fadeIn();
});
Related
I want to switch between 2 div's so that when I click on one of them its border and header became red and I want the other div goes off. so its be like a choice between them I don't know where I'm doing it wrong I add (IF) so I can make it happen but it is not working pls help me.
$(".container").on("click" , function(){
$(this).toggleClass("active");
$(".header", this).toggleClass("active2");
if ($(".box1").hasClass("active")) {
$(".box2").removeClass("active");
$("h2", ".box2").removeClass("active2");
}if ($(".box2").hasClass("active")) {
$(".box1").removeClass("active");
$("h2", ".box1").removeClass("active2");
}
});
body{
padding: 3em;
}
.box1, .box2{
padding: 2em;
border: 1px solid silver;
margin-top: 2em;
}
.active{
border-color: red;
}
.active2{
color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container box1">
<h2 class="header">Boys</h2>
<hr>
<p>Benjamin</p>
<p>David</p>
</div>
<div class="container box2">
<h2 class="header">Girls</h2>
<hr>
<p>Sara</p>
<p>Tania</p>
</div>
You don't need to many code to do this work. Add .active to clicked element and remove class from sibling of it.
$(".container").on("click", function() {
$(this).toggleClass("active").siblings().removeClass("active");
});
body{padding: 3em}
.box1, .box2{
padding: 2em;
border: 1px solid silver;
margin-top: 2em;
}
.active {border-color: red}
.active .header{color: red}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container box1">
<h2 class="header">Boys</h2>
<hr>
<p>Benjamin</p>
<p>David</p>
</div>
<div class="container box2">
<h2 class="header">Girls</h2>
<hr>
<p>Sara</p>
<p>Tania</p>
</div>
I'm creating a jquery filter search.
I want to be able to search within a filtered category. I can filter out categories, but if I search within the selected category the search searches through the whole bunch but not only the selected category.
The search is almost working as it should, but I'm not sure how I can implement the search within categories criteria.
Here is a link to a fiddle
Any help or advise would be very much appreciated
$(document).ready(function(){
$("#searchInput").on("keyup", function() {
var value = $(this).val().toLowerCase();
$("#searchFilterDiv div.CompanyDirectoryItem").filter(function() {
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
});
if($('#searchFilterDiv div.CompanyDirectoryItem:visible').length===0){
$('.error').show();
}else{
$('.error').hide();
}
});
});
$(".filter-button").on("click", function(){
var selectItem = $(this).data('category');
filter(selectItem);
});
function filter(e) {
var regex = new RegExp('\\b\\w*' + e + '\\w*\\b');
$('.CompanyDirectoryItem').hide().filter(function () {
return regex.test($(this).data('name'))
}).show();
if($('.CompanyDirectoryItem:visible').length===0){
$('.error').show();
}else{
$('.error').hide();
}
}
$('.box-item').on('click', function(){
$('.box-item').removeClass('selected');
$(this).addClass('selected');
});
.search-form-item{
margin-top: 30px;
background-color: #f9f9f9;
border: 1px solid lightgrey;
margin-bottom: 2em;
padding: 20px;
font-size: .9em;
text-align: left;
}
/* Thjonusta AO */
.boxes-centered{
text-align:center;
}
.box-item{
color: #333;
background-color: #fff;
border: 1px solid #ccc;
padding: 20px 10px;
margin: 1.7em .8em 1.7em .8em;
max-width: 10vw;
font-size: 1.1em;
font-weight: 500;
cursor: pointer;
display:inline-block;
float:none;
text-align:center;
}
.box-item:hover{
border-color: blue;
}
.box-item.selected{
border-color:red;
color:red;
}
.search-form-service {
border: 1px solid lightgray;
margin-left: 8.333%;
margin-right: 8.333%;
background: #fff;}
.search-form-service .form-control {
border-radius: 0 !important;
box-shadow: none;
-webkit-appearance: none;
border: 0;
height: 50px;
font: 18px "DINPro", Arial, sans-serif;
padding: 15px;
color: #4b4b4b; }
.search-form-service .form-control::-moz-placeholder {
color: #4b4b4b;
opacity: 1; }
.search-form-service .form-control:-ms-input-placeholder {
color: #4b4b4b; }
.search-form-service .form-control::-webkit-input-placeholder {
color: #4b4b4b; }
#media (max-width: 767px) {
.search-form-service .form-control {
font-size: 16px;
height: 50px;
padding: 10px 12px; } }
.search-form-service .btn-search {
border-width: 0 0 0 1px; }
.search-form-service .input-group-btn {
z-index: 5; }
.search-form-service.type2 {
max-width: 281px; }
.search-form-service.type2 .form-control {
height: 39px;
padding: 8px 15px; }
.search-form-service.type2 .btn-search {
min-width: 57px;
height: 39px; }
/*Custom Media Quearies */
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<div class="container form-container">
<div class="row search-form-item">
<div class="col-md-10 col-md-offset-1 searchtext-input search-form-service">
<input class="form-control" id="searchInput" type="text" placeholder="Search">
</div>
<div class="row boxes-centered">
<div class="col-md-2 col-md-offset-1 box-item filter-button" data-category="EveryCat">Every Category</div>
<div class="col-md-2 box-item filter-button" data-category="Category1">Category1</div>
<div class="col-md-2 box-item filter-button" data-category="Category2">Category2</div>
<div class="col-md-2 box-item filter-button" data-category="Category3">Category3</div>
<div class="col-md-2 box-item filter-button" data-category="Category4">Category4</div>
</div>
</div>
</div><!-- / container -->
<div id="searchFilterDiv">
<div class="CompanyDirectoryItem" data-name="EveryCat, Category1">
<h3>this belongs to Category1</h3>
<p>Some text, more text more text more text </p>
some link
</div>
<div class="CompanyDirectoryItem" data-name="EveryCat, Category2">
<h3>this belongs to Category2</h3>
<p>Some text, more text more text more text </p>
some link
</div>
<div class="CompanyDirectoryItem" data-name="EveryCat, Category3">
<h3>Item belongs to Category3</h3>
<p>Some text, more text more text more text </p>
some link
</div>
<div class="CompanyDirectoryItem" data-name=" EveryCat, Category4">
<h3>Item in Cat 4</h3>
<p> this item belongs to Category4 </p>
some link
</div>
<div class="CompanyDirectoryItem" data-name="EveryCat, Category4, Category1">
<h3> this belongs to 1 and Category4</h3>
<p>Some text, text about this item that belongs to category 1 and 4 </p>
some link
</div>
<div class="CompanyDirectoryItem" data-name="EveryCat, Category3, Category2">
<h3>Item belongs to Category2 and Category3</h3>
<p>Some text, more text more text more text Category2 and Category3 txoeljljl </p>
some link
</div>
<div class="alert alert-error"></div>
<div class="error search-results-box-item" style="display: none;">
<h3>No Results</h3>
<p> Search gave no results, please try again </p>
</div>
</div> <!-- searchFilterDiv ends -->
You want to search from visible sections only:
$("#searchFilterDiv div.CompanyDirectoryItem:visible").filter(function() {
EDIT
To keep searching/filtering functionality I suggest to use detach/attach:
let tmp=[];
function filter(e) {
if(tmp.length>0)
tmp.map(x => x.appendTo($('#searchFilterDiv')));
var regex = new RegExp('\\b\\w*' + e + '\\w*\\b');
$('.CompanyDirectoryItem').detach().filter(function () {
if(regex.test($(this).data('name')))
return true
else
tmp.push($(this))
}).appendTo($('#searchFilterDiv'));
}
and now you can use your initial search/filtering function
$("#searchFilterDiv div.CompanyDirectoryItem").filter(function() {
I am wanting to display a div .before() another if it does not contain a specific class within it. Though it seems simple enough, somehow I am not able to get it working...
Here's a snippet of the progress I've made so far:
$('.container > #content').not('.entry', function() {
$(this).before('<div class="noentry">No entries to display.</div>');
});
body {
font-size: 16px;
margin: 0;
padding: 0;
border: 0;
}
h1 {
font-size: 22px;
margin-top: 0;
}
.container {
margin: 0 auto;
max-width: 300px;
border: 1px solid lightgrey;
padding: 10px;
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<h1>Section With an Entry:</h1>
<div id="content">
<div class="entry">This is an entry.</div>
</div>
</div>
<div class="container">
<h1>Section Without an Entry:</h1>
<div id="content"></div>
</div>
The .not() method does not work as you are expecting. It only checks the immediate object for the .entry class. You need to search descendants. See the updated example below, you can use a .find().
Also, as noted in the comments above, you shouldn't duplicate ids, so I changed your content to a class.
$(function() {
$('.container > .content').each(function() {
if (!$(this).find(".entry").length) {
$(this).before('<div class="noentry">No entries to display.</div>');
}
});
});
body {
font-size: 16px;
margin: 0;
padding: 0;
border: 0;
}
h1 {
font-size: 22px;
margin-top: 0;
}
.container {
margin: 0 auto;
max-width: 300px;
border: 1px solid lightgrey;
padding: 10px;
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<h1>Section With an Entry:</h1>
<div class="content">
<div class="entry">This is an entry.</div>
</div>
</div>
<div class="container">
<h1>Section Without an Entry:</h1>
<div class="content"></div>
</div>
What I want to do:
I want to add a "walkingMan" image under an element when its class is changed to activeCell. I know how to do it when the image is added to the front or back of the element using pseudo class, but as far as I know, there isn't something like :below that I can use to achieve the same effect. Is there a way in css I can use to micmic this?
What I have done:
I have added image below every upper cell and make it visible when the class is changed to activeCell. But I hope to find a more simple solution.
What it looks like:
Code: Simplified Code Example
You can use a single pseudo element on the .cell element and place a background image on it when it's active.
let activeIndex = 0;
const cells = [...document.querySelectorAll('.cell')];
setInterval(() => {
cells.forEach(cell => {
cell.classList.remove('activeCell')
});
cells[activeIndex].classList.add('activeCell');
activeIndex = activeIndex === cells.length - 1 ? 0 : (activeIndex + 1);
}, 300)
.cell {
display: inline-block;
border: 1px solid black;
margin-bottom: 1.2em;
}
.activeCell {
background-color: lightgrey;
position: relative;
}
.activeCell::after {
content: "";
position: absolute;
width: 1em;
height: 1em;
top: 1.3em;
left: calc(50% - .5em); /* Center the stickman. Position it half of its width before the parent center*/
background-image: url('https://www.shareicon.net/data/512x512/2016/01/17/704754_people_512x512.png');
background-size:cover; /* Scale the stickman to completely cover the background area. */
}
<div>
<div class='top'>
<a class='cell'>One</a>
<a class='cell'>One</a>
<a class='cell'>One</a>
<a class='cell'>One</a>
</div>
<div class='bottom'>
<a class='cell'>One</a>
<a class='cell'>One</a>
<a class='cell'>One</a>
<a class='cell'>One</a>
</div>
</div>
What about this: https://jsfiddle.net/147prwy5/3/
HTML
<div class="cell active">
<a>One</a>
<img src="https://www.shareicon.net/data/512x512/2016/01/17/704754_people_512x512.png" alt="walkingMan" />
</div>
<div class="cell">
<a>One</a>
<img src="https://www.shareicon.net/data/512x512/2016/01/17/704754_people_512x512.png" alt="walkingMan" />
</div>
<div class="cell">
<a>One</a>
<img src="https://www.shareicon.net/data/512x512/2016/01/17/704754_people_512x512.png" alt="walkingMan" />
</div>
<div class="cell active">
<a>One</a>
<img src="https://www.shareicon.net/data/512x512/2016/01/17/704754_people_512x512.png" alt="walkingMan" />
</div>
CSS
.cell {
display: inline-block;
}
.cell a {
border: 1px solid black;
}
.cell.active a {
background-color: lightgrey;
}
.cell img {
width: 20px;
height: 20px;
display: none;
}
.cell.active img {
margin-top: 5px;
width: 20px;
height: 20px;
display: block;
}
I've never been a fan of the ::before and ::after pseudo classes mainly because I've personally noticed some oddities when trying to position things in Chrome vs IE (damn it IE!). Since most people here are going to give a solution using these pseudo classes (because that's somewhat what you asked) I thought I'd give a different solution using flexbox and more divs.
Not the most optimal for download size but I do like that it's not absolute positioning elements and if the squares get bigger or smaller it's pretty easy to handle that as a scss variable at the top of the file. This all uses only two values, your padding between boxes and the size of the boxes so it should be easy to update and maintain.
Anyway, have fun! Awesome question by the way :-)
.blocks {
display: flex;
}
.block {
flex: 0 0 20px;
margin: 0px 5px;
display: flex;
flex-direction:column;
}
.block > .square {
flex: 0 0 20px;
margin: 5px 0px;
background: grey;
}
.block > .space {
flex: 0 0 20px;
margin: 5px 0px;
}
.block.activeCell > .space {
background: green;
}
<div class="blocks">
<div class="block activeCell"><div class="square"></div><div class="space"></div></div>
<div class="block"><div class="square"></div><div class="space"></div></div>
<div class="block"><div class="square"></div><div class="space"></div></div>
<div class="block"><div class="square"></div><div class="space"></div></div>
</div>
<div class="blocks">
<div class="block"><div class="square"></div></div>
<div class="block"><div class="square"></div></div>
<div class="block"><div class="square"></div></div>
<div class="block"><div class="square"></div></div>
</div>
Using jQuery you can toggle the class upon clicking with this:
$('.cell').click(function() { //catch clicks on .cell
$('.cell').removeClass('activeCell'); //remove class "activeCell" from all
$(this).addClass('activeCell'); //add class "activeCell" to .cell clicked
});
Apply position: relative; to .top and .bottom:
.top,
.bottom {
position: relative;
}
And use the psuedoclass :before to create a image under the .activeCell
.activeCell:before {
content: "";
position: absolute;
bottom: -20px;
height: 20px;
width: 20px;
background-image: url("https://www.shareicon.net/data/512x512/2016/01/17/704754_people_512x512.png");
background-size: 20px 20px;
}
And remove this:
.walkingMan {
width: 20px;
height: 20px;
display: inline-block
}
And this:
<img src="https://www.shareicon.net/data/512x512/2016/01/17/704754_people_512x512.png" alt="walkingMan" class='walkingMan'/>
And to add space between the divs .top and .bottom put a <br> between them.
$('.cell').click(function() {
$('.cell').removeClass('activeCell');
$(this).addClass('activeCell');
});
.cell {
display: inline-block;
border: 1px solid black;
cursor: pointer;
}
.top,
.bottom {
position: relative;
}
.activeCell {
background-color: lightgrey;
}
.activeCell:before {
content: "";
position: absolute;
bottom: -20px;
height: 20px;
width: 20px;
background-image: url("https://www.shareicon.net/data/512x512/2016/01/17/704754_people_512x512.png");
background-size: 20px 20px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div>
<div class='top'>
<a class='cell activeCell'>One</a>
<a class='cell'>One</a>
<a class='cell'>One</a>
<a class='cell'>One</a>
</div>
<br>
<div class='bottom'>
<a class='cell'>One</a>
<a class='cell'>One</a>
<a class='cell'>One</a>
<a class='cell'>One</a>
</div>
</div>
add .RunManActive Class for Active element
//clicking add active Class
$(".RunMan").click(function() {
$(".RunMan").removeClass('RunManActive');
$(this).toggleClass('RunManActive');
});
//timing add active Class
var i=0;
var $elm=$(".Animate");
setInterval(function(){
$elm.removeClass('RunManActive');
$elm.eq(i).toggleClass('RunManActive');
i=$elm.length<=i?0:i+1;
}, 1000);
.RunMan{
width:35px;
height:35px;
background-color:lightgray;
border:3px solid #fff;
float:left;
position: relative;
}
.RunManActive{
background-color:#eee;
border:3px solid lightgray;
}
.RunManActive > div{
width:35px;
height:35px;
position: absolute;
background-image:url(http://www.iconsfind.com/wp-content/uploads/2013/11/Objects-Running-man-icon.png);
background-size:cover;
top:100%;
margin-top:5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="RunMan"><div></div></div>
<div class="RunMan RunManActive"><div></div></div>
<div class="RunMan"><div></div></div>
<div class="RunMan"><div></div></div>
<div class="RunMan"><div></div></div>
<br><br><br><br><br><br>
<div style=" width:100%">
<div class="Animate RunMan"><div></div></div>
<div class="Animate RunMan "><div></div></div>
<div class="Animate RunMan"><div></div></div>
<div class="Animate RunMan"><div></div></div>
<div class="Animate RunMan"><div></div></div>
You can do something like this, using CSS only. With :target selector you can apply a style to the element you need to hide / show.
.container {
display: inline-block;
width: 100px;
height: 200px;
}
.link {
display: block;
width: 100px;
height: 100px;
background: #ccc;
}
.walking-man {
display: none;
width: 100px;
height: 100px;
background: red;
}
#p1:target {
display: block;
}
#p2:target {
display: block;
}
#p3:target {
display: block;
}
#p4:target {
display: block;
}
height: 90px;
float: left;
}
.walking-man img {
width: 100%;
}
.walkin-man:target {
display: block;
}
<div class="container">
<div id="p1" class="walking-man"></div>
</div>
<div class="container">
<div id="p2" class="walking-man"></div>
</div>
<div class="container">
<div id="p3" class="walking-man"></div>
</div>
<div class="container">
<div id="p4" class="walking-man"></div>
</div>
function hoverimgon(elem){
$(elem).find('.credentials-popup').slideDown(800);
}
function hoverimgoff(elem){
$(elem).find('.credentials-popup').slideUp(800);
}
.credentials-element {
max-width: 1170px;
margin-bottom: 80px;
}
.ct-el-color {
height: 250px;
background-color: coral;
}
.credentials-popup{
display: none;
max-width: 1170px;
background-color: #DD3330;
color: #ffffff;
height: 250px;
}
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="credentials-element" onmouseover="hoverimgon(this)" onmouseout="hoverimgoff(this)">
<div class="ct-el-color"></div>
<div class="credentials-popup">
Something
</div>
</div>
<div class="credentials-element" onmouseover="hoverimgon(this)" onmouseout="hoverimgoff(this)">
<div class="ct-el-color"></div>
<div class="credentials-popup">
Something
</div>
</div>
SlideUp goes up although selected class has not been left. Although several elements have the same class, the second div should only appear with the mouseover element and not with all. If the second is selected with the mouse, this should not disappear, just as it is the case, you should have the possibility to select something in the credentials-popup. What is the mistake?
Use jQuery :visible Selector and have it hide when the mouse leaves the hidden message area.
function hoverimgon(elem) {
var $slide = $(elem).find('.credentials-popup');
if (!$slide.is(":visible")) { // only slide down if hidden
$slide.slideDown(800)
}
}
function hoverimgoff(elem) {
if ($(elem).is(":visible")) { // only slide up if visible
$(elem).slideUp(800);
}
}
.credentials-element {
max-width: 1170px;
margin-bottom: 80px;
}
.ct-el-color {
height: 250px;
background-color: coral;
}
.credentials-popup {
display: none;
max-width: 1170px;
background-color: #DD3330;
color: #ffffff;
height: 250px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="credentials-element" onmouseover="hoverimgon(this)">
<div class="ct-el-color"></div>
<div class="credentials-popup" onmouseout="hoverimgoff(this)">
Something
</div>
</div>
<div class="credentials-element" onmouseover="hoverimgon(this)">
<div class="ct-el-color"></div>
<div class="credentials-popup" onmouseout="hoverimgoff(this)">
Something
</div>
</div>
you are should use a proper jQuery call, and since you are using jQuery, there is no need to write JavaScript functions for such a simple job. I have made the solution for you in a JSFiddle: https://jsfiddle.net/c8dh5qbk/2/
HTML:
<div class="credentials-element">
<div class="ct-el-color"></div>
<div class="credentials-popup">Something</div>
</div>
<div class="credentials-element">
<div class="ct-el-color"></div>
<div class="credentials-popup">Something else</div>
</div>
JavaScript:
$(document).ready(function(){
$('.credentials-element').mouseover(function() {
if (!$(this).children('.credentials-popup').is(":visible")) {
$(this).children('.credentials-popup').slideDown(800);
}
}).mouseout(function() {
if ($(this).children('.credentials-popup').is(":visible")) {
$(this).children('.credentials-popup').slideUp(800);
}
});
});
CSS:
.credentials-element {
max-width: 1170px;
margin-bottom: 80px;
}
.ct-el-color {
height: 50px;
background-color: coral;
}
.credentials-popup{
display: none;
max-width: 1170px;
background-color: #DD3330;
color: #ffffff;
height: 50px;
padding:10px 0;
text-align: center;
}