I am working on my own portfolio and I want to put a delay between 2 pages with a setTimeout function. I've tried some ways but haven't worked yet. I am already using a function to open my "href" with all my box but now I just want to put a delay to go from accueil.html to presentation.html.
"accueil.html":
document.addEventListener('DOMContentLoaded', function()
{
var items = document.querySelectorAll('.ouverture');
for (var i = 0; i < items.length; i++)
{
var item = items[i];
item.addEventListener('click', function()
{
var url = this.getElementsByTagName('a');
url = url[0];
window.location = url;
});
}
});
<div class="box">
<div class="container">
<div class="row">
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
<div class="box-part text-center ouverture">
<i class="fa fa-address-book fa-3x" aria-hidden="true"></i>
<div class="title">
<h4>Présentation</h4>
</div>
</div>
</div>
</div>
</div>
</div>
Just add a timeout add the part where you redirect to another page:
item.addEventListener('click', function() {
var url = this.getElementsByTagName('a');
if(url.length > 0)
url = url[0];
setTimeOut(() => {
window.location = url;
}, 2000); // 2000 = 2000ms === 2sec
});
More info is found here
A general-purpose snippet that "delays" clicks. Just add the script at the top of the page and use the delay-click[=numberOfMilliseconds] attribute.
document.body.addEventListener("click", function(event) {
var target = event.target;
var currentTarget = target.closest("[delay-click]:not(.delay-click-ignore)");
if (!currentTarget) return;
var delay = +currentTarget.getAttribute("delay") || 2000;
currentTarget.classList.add("delay-click-ignore");
setTimeout(function() {
target.click();
currentTarget.classList.remove("delay-click-ignore");
}, delay);
event.preventDefault();
});
.delay-click-ignore,
.delay-click-ignore a,
.delay-click-ignore input,
.delay-click-ignore button {
cursor: progress !important;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<div class="box">
<div class="container">
<div class="row">
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
<div class="box-part text-center ouverture">
<i class="fa fa-address-book fa-3x" aria-hidden="true"></i>
<div class="title">
<!-- on the element itself -->
<h4><a href="presentation.html" delay-click>default delay</a></h4>
</div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
<!-- or somewhere up the ranks -->
<div class="box-part text-center ouverture" delay-click=5000>
<i class="fa fa-address-book fa-3x" aria-hidden="true"></i>
<div class="title">
<h4>delay 5s</h4>
</div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
<div class="box-part text-center ouverture">
<i class="fa fa-address-book fa-3x" aria-hidden="true"></i>
<div class="title">
<h4>immediate</h4>
</div>
</div>
</div>
</div>
<div class="form-group">
<!-- works here too -->
<input type="checkbox" class="form-control" delay-click />
</div>
</div>
</div>
Related
I have dropdown list with some file names.
What I want to achieve is to find file name parents so when checkbox is checked I can get their respective values and build them into path of some sort. For example you are clicking
updates > second_folder_updates > CSD_update checkbox
on that CSD_update checbox click you can see updates/second_folder_updates/CSD_update being console logged, same goes for first update on click you will get updates/first_update in the console
my current solution it works in a way? but this returns a lot of duplicates and incorrect data
var elem = document.getElementById("AQW_update");
function getParents(elem) {
var parents = [];
while(elem.parentNode && elem.parentNode.nodeName.toLowerCase() != 'body') {
elem = elem.parentNode;
parents.push(elem.textContent);
}
return parents;
}
var abc = getParents(elem)
for(var i = 0; i < abc.length; ++i)
abc[i] = abc[i].replace(/(\r\n|\n|\r)/gm,"")
console.log(abc.toString())
$(document).ready(function () {
$('.clickFaq').click(function () {
$('.displayDir').toggle('1000');
$("i", this).toggleClass("icon-up-circled icon-down-circled");
var $data = $('.SWCheckBox:checked').val();
console.log($data)
});
$(".open").hide();
$('.dirTitle').click(function () {
$(this).next().slideToggle();
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.3.1/dist/css/bootstrap.min.css" crossorigin="anonymous">
<div class="container">
<div class="row no-gutters">
<div class="col-1">
<div class="fileListIcon iconFolder"></div>
</div>
<div class="col-9">
<div class="fileListText">
<div class="dirTitle">
updates
<i class=" .displayDir "></i>
</div>
<div class="faqQuestionsTextPreview open" style="display: none;">
<ul>
<div class="row no-gutters">
<div class="col-1">
<div class="fileListIcon iconFolder"></div>
</div>
<div class="col-9">
<div class="fileListText">
<div class="dirTitle">
first_update
<i class=" .displayDir "></i>
</div>
</div>
</div>
<div class="col-2 d-flex justify-content-center">
<div class="fileListChx ">
<input type="checkbox">
</div>
</div>
</div>
<div class="row no-gutters">
<div class="col-1">
<div class="fileListIcon iconFolder"></div>
</div>
<div class="col-9">
<div class="fileListText">
<div class="dirTitle">
second_folder_updates
<i class=" .displayDir "></i>
</div>
<div class="faqQuestionsTextPreview open" style="display: none;">
<ul>
<div class="row no-gutters">
<div class="col-1">
<div class="fileListIcon iconFolder"></div>
</div>
<div class="col-9">
<div class="fileListText">
<div class="dirTitle">
AQW_update
<i class=" .displayDir "></i>
</div>
</div>
</div>
<div class="col-2 d-flex justify-content-center">
<div class="fileListChx ">
<input type="checkbox" >
</div>
</div>
</div>
<div class="row no-gutters">
<div class="col-1">
<div class="fileListIcon iconFolder"></div>
</div>
<div class="col-9">
<div class="fileListText">
<div class="dirTitle">
CSD_update
<i class=" .displayDir "></i>
</div>
</div>
</div>
<div class="col-2 d-flex justify-content-center">
<div class="fileListChx ">
<input type="checkbox">
</div>
</div>
</div>
</ul>
</div>
</div>
</div>
<div class="col-2 d-flex justify-content-center">
<div class="fileListChx ">
<input type="checkbox">
</div>
</div>
</div>
</ul>
</div>
</div>
</div>
<div class="col-2 d-flex justify-content-center">
<div class="fileListChx ">
<input type="checkbox">
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.3.1/dist/js/bootstrap.min.js"
crossorigin="anonymous"></script>
I am trying to make this project where i have a bunch of photos. I want to make it so that whenever i hover on a photo an < i > element displays as block ( default it is none ). I can't figure out how to make it.. everything i used made it so that all the i elements displayed.
This is the javaScript code.
JavaScript
var poza = document.querySelectorAll(".poza");
var plus = document.querySelectorAll(".plus");
poza.forEach(function (e) {
e.addEventListener("mouseover", function () {
for (var i = 0; i < plus.length; i++)
plus[i].style.display = "block"
})
e.addEventListener("mouseout", function () {
for (var i = 0; i < plus.length; i++)
plus[i].style.display = "none"
})
})
HTML
<div class="row poze">
<div class="col-xl-4 col-lg-4 col-md-6 col-sm-12">
<img class="poza" src="https://images.unsplash.com/photo-1534438327276-14e5300c3a48?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt="">
<i class="plus fas fa-plus-square"></i>
</div>
<div class="col-xl-4 col-lg-4 col-md-6 col-sm-12">
<img class="poza" src="https://images.unsplash.com/photo-1571902943202-507ec2618e8f?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt="">
<i class="plus fas fa-plus-square"></i>
</div>
<div class="col-xl-4 col-lg-4 col-md-6 col-sm-12">
<img class="poza" src="https://images.unsplash.com/photo-1540497077202-7c8a3999166f?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt="">
<i class="plus fas fa-plus-square"></i>
</div>
<div class="col-xl-4 col-lg-4 col-md-6 col-sm-12">
<img class="poza" src="https://images.unsplash.com/photo-1534258936925-c58bed479fcb?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt="">
<i class="plus fas fa-plus-square"></i>
</div>
<div class="col-xl-4 col-lg-4 col-md-6 col-sm-12">
<img class="poza" src="https://images.unsplash.com/photo-1517343985841-f8b2d66e010b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt="">
<i class="plus fas fa-plus-square"></i>
</div>
<div class="col-xl-4 col-lg-4 col-md-6 col-sm-12">
<img class="poza" src="https://images.unsplash.com/photo-1561140895-9d144461935e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt="">
<i class="plus fas fa-plus-square"></i>
</div>
You can acheive this using self-executing function:
var poza = document.querySelectorAll(".poza");
var plus = document.querySelectorAll(".plus");
poza.forEach(function (e, i) {
e.addEventListener("mouseover", (function (newI) {
return function() {
plus[newI].style.display = "block"
}
})(i))
e.addEventListener("mouseout", (function (newI) {
return function() {
plus[newI].style.display = "none"
}
})(i))
})
You can get it from the addEventListener as event.target, one possible solution should be like:
poza.forEach(function (e) {
e.addEventListener("mouseover", function (event) {
event.target.style.display = "block"
})
e.addEventListener("mouseout", function (event) {
event.target.style.display = "none"
})
})
See if it helps ;D
The simple trick you can do is on mouse enter event add a class say hover-effect in each element in an array of poza elements. Then in css use the following rule
i {
display: none;
}
.hover-effect+i {
display: 'block';
}
On mouse leave remove the class. This approach will be neat and clean.
(see documentation on + selector)
I want to do one of those cool dashboard counter animations using my Django variables. My code isn't rendering any numbers yet so I'm doing something wrong.
Something like this if what I'm after:
Here's my code so far:
<div class="row">
<div class="col-lg-3 col-sm-6">
<div class="card m-2 p-4">
<i class="counter-icon fa fa-users"></i>
<h2 class="users-count"></h2>
<h3 class="count-label">Users</h3>
</div>
</div>
<div class="col-lg-3 col-sm-6">
<div class="card m-2 p-4">
<i class="counter-icon fa fa-handshake-o"></i>
<h2 class="dealers-count"></h2>
<h3 class="count-label">Dealers</h3>
</div>
</div>
<div class="col-lg-3 col-sm-6">
<div class="card m-2 p-4">
<i class="counter-icon fa fa-address-card"></i>
<h2 class="staff-count"></h2>
<h3 class="count-label">Employees</h3>
</div>
</div>
<div class="col-lg-3 col-sm-6">
<div class="card m-2 p-4">
<i class="counter-icon fa fa-eye"></i>
<h2 class="visitors-count"></h2>
<h3 class="count-label">Visitors Today</h3>
</div>
</div>
</div>
<script>
document.addEventListener("DOMContentLoaded", () => {
function counter(id, start, end, duration) {
let obj = document.getElementsByClassName(id),
current = start,
range = end - start,
visitors_range = 11 - start,
increment = end > start ? 1 : -1,
step = Math.abs(Math.floor(duration / range)),
timer = setInterval(() => {
current += increment;
obj.textContent = current;
if (current == end) {
clearInterval(timer);
}
}, step);
}
counter("users-count", 0, {{users.count}}, 3000);
counter("dealers-count", 100, {{dealers.count}}, 2500);
counter("staff-count", 0, {{staff.count}}, 3000);
counter("visitors-count", 0, {{visitors.count}}, 3000);
});
</script>
I have some JavaScript (Jquery) that will show a set amount of div's depending on the data arbitrate in the html.
If attribute set to 3 it will show 3 div's and clicking 'show more' will show all div's
It needs to do this for multiple sections, each with their own data attribute and only show or hide the divs that belong to the section clicked.
My current problem is that all sections are being shown on click and then vanishing as soon as they appear.
The desired effect is to have each section hide and show based on the click individually.
var INF = window.INF || {};
INF.sectorPageStrengths = (function(window, $, namespace) {
'use strict';
//variables
var _sectorPageStrengths = $('.sectorpage-strengths'),
_elements = 0,
// methods
init,
_bindShowMore, _bindShowLess,
_adjustHeigt, _checkElemnt, equalHeight;
_checkElemnt = function($element) {
var _vp = INF.global.device.viewportN;
if (_vp === 0) {
var count = $element.data('desktop');
$element.find('.marg1:nth-child(n+' + (count + 1) + ')').hide();
if ($element.find('.marg1').length >= (count + 1)) {
$element.find('.view-all-sectors-btn-container').show();
} else {
$element.find('.view-all-sectors-btn-container').hide();
}
_elements = count;
} else if (_vp === 1) {
$element.find('.marg1:nth-child(n+5)').hide();
if ($element.find('.marg1').length > 4) {
$element.find('.view-all-sectors-btn-container').show();
} else {
$element.find('.view-all-sectors-btn-container').hide();
}
_elements = 4;
} else {
$element.find('.marg1:nth-child(n+4)').hide();
_elements = 3;
}
};
_bindShowMore = function(container) {
// if data-items, data-infinite is defined, used it
var _showMore = $('.view-all-sectors-btn');
_showMore.on('click', function() {
$('.sectorpage-strengths .container > .row + .row >.marg1:nth-child(n+' + (_elements + 1) + ')').slideToggle();
$(this).parents('.sectorpage-strengths').toggleClass('showLess');
});
};
_bindShowLess = function() {
var _showLess = _sectorPageStrengths.find('.view-all-sectors-btn.less');
_showLess.on('click', function() {
$('html, body').animate({
scrollTop: _sectorPageStrengths.offset().top - 35
}, 700);
});
};
init = function() {
var EachView = jQuery('.sectorpage-strengths');
EachView.each(function(index, element) {
if (_sectorPageStrengths.length > 0) {
_checkElemnt($(element));
_bindShowMore(_sectorPageStrengths);
_bindShowLess();
$(window).on('load', function() {
equalHeight();
});
}
});
$("#loadPDFComponentModal").on('hidden.bs.modal', function() {
$("#hiddenIframe").html("");
});
};
return {
init: init
};
}(this, jQuery, 'INF'));
jQuery(INF.sectorPageStrengths.init());
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<section class="sectorpage-strengths" data-desktop="1">
<div class="container">
<div class="row">
<h2>heading main</h2>
</div>
<div class="row sectorpage-strengths-list">
<div class=" marg1">
<div class="sectorpage-strengths-list-item">
<div class="main-container">
<div class="yellow-container" style="height: 140px;">
<h3>heading</h3>
</div>
</div>
<div class="text-description">
text
</div>
<div class="slant"></div>
</div>
</div>
<div class=" marg1" style="display: none;">
<div class="sectorpage-strengths-list-item">
<div class="main-container">
<div class="yellow-container" style="height: 140px;">
<h3>heading</h3>
</div>
</div>
<div class="text-description">
text
</div>
<div class="slant"></div>
</div>
</div>
</div>
<div class="row view-all-sectors-btn-container">
<span class="center-block view-all-sectors-btn text-center more" role="button">View more<br><i class="informa-icon glyphicon glyphicon-plus-sign"></i></span>
<span class="center-block view-all-sectors-btn text-center less" role="button">View less<br><i class="informa-icon glyphicon glyphicon-minus-sign"></i></span>
</div>
</div>
</section>
<section class="sectorpage-strengths" data-desktop="1">
<div class="container">
<div class="row">
<h2>heading main</h2>
</div>
<div class="row sectorpage-strengths-list">
<div class=" marg1">
<div class="sectorpage-strengths-list-item">
<div class="main-container">
<div class="yellow-container" style="height: 140px;">
<h3>heading</h3>
</div>
</div>
<div class="text-description">
text
</div>
<div class="slant"></div>
</div>
</div>
<div class=" marg1" style="display: none;">
<div class="sectorpage-strengths-list-item">
<div class="main-container">
<div class="yellow-container" style="height: 140px;">
<h3>heading</h3>
</div>
</div>
<div class="text-description">
text
</div>
<div class="slant"></div>
</div>
</div>
</div>
<div class="row view-all-sectors-btn-container">
<span class="center-block view-all-sectors-btn text-center more" role="button">View more<br><i class="informa-icon glyphicon glyphicon-plus-sign"></i></span>
<span class="center-block view-all-sectors-btn text-center less" role="button">View less<br><i class="informa-icon glyphicon glyphicon-minus-sign"></i></span>
</div>
</div>
</section>
You are listening all the 'view more' button click in your code. so it causing problem.
Update code
code should handle individual container. The file changes are,
_checkElemnt = function($element) {
var _vp = 0;//INF.global.device.viewportN;
if (_vp === 0) {
var count = $element.data('desktop');
$element.find('.marg1').hide();
if ($element.find('.marg1').length >= (count + 1)) {
$element.find('.view-all-sectors-btn-container').show();
} else {
$element.find('.view-all-sectors-btn-container').hide();
}
_elements = count;
} else if (_vp === 1) {
$element.find('.marg1:nth-child(n+5)').hide();
if ($element.find('.marg1').length > 4) {
$element.find('.view-all-sectors-btn-container').show();
} else {
$element.find('.view-all-sectors-btn-container').hide();
}
_elements = 4;
} else {
$element.find('.marg1:nth-child(n+4)').hide();
_elements = 3;
}
$element.find('.marg1').slice(0,count).each(function(index, ele){
$(ele).attr('data-display', true).show();
});
};
and
_bindShowMore = function(container) {
var _showMore = $(container).find('.view-all-sectors-btn');
_showMore.on('click', function(element) {
var isAllVisible = $(this).closest('.sectorpage-strengths').hasClass('showLess');
$(this).closest('.container').find('.row + .row >.marg1:not([data-display])').slideToggle();
$(this).parents('.sectorpage-strengths').toggleClass('showLess');
$(this).text(isAllVisible ?'view more' : 'view less');
if(isAllVisible){
console.log('isAllVisible', isAllVisible); // you handle some other action here if required
}
});
};
and
init = function() {
var EachView = jQuery('.sectorpage-strengths');
EachView.each(function(index, element) {
if (_sectorPageStrengths.length > 0) {
_checkElemnt($(element));
_bindShowMore(element);
// _bindShowLess(); this behaviour handled in bindShowMore itself
$(window).on('load', function() {
equalHeight();
});
}
});
i hope this will help you.
Here I bypass your code to just provide the simplest answer to the actual issue. I will leave it to you to work that in your code.
NOTE If you choose to not use a class you can do .toggle(true); instead of .toggleClass('hidden', true);
I used a class to simplify the original HTML.
$('.sectorpage-strengths').on('click', '.view-all-sectors-btn', function(event) {
var sect = $(event.delegateTarget);
var sectCount = sect.data('desktop');
var strengths = sect.find('.sectorpage-strengths-list').find('.marg1');
strengths.toggleClass('hidden', false);
var showCount = $(this).hasClass('less') ? strengths.length - 1 : sectCount - 1;
strengths.slice(0, showCount).toggleClass('hidden', true);
$(this).toggleClass('hidden', true);
$(this).siblings('.view-all-sectors-btn').toggleClass('hidden', false);
});
.sectorpage-strengths .marg1 {
border: solid lime 1px;
}
.yellow-container {
height: 140px;
background-color: #FFFFE0;
}
.hidden {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<section class="sectorpage-strengths" data-desktop="1">
<div class="container">
<div class="row">
<h2>heading main1</h2>
</div>
<div class="row sectorpage-strengths-list">
<div class=" marg1">
<div class="sectorpage-strengths-list-item">
<div class="main-container">
<div class="yellow-container">
<h3>heading1 1</h3>
</div>
</div>
<div class="text-description">
text
</div>
<div class="slant"></div>
</div>
</div>
<div class=" marg1 hidden">
<div class="sectorpage-strengths-list-item">
<div class="main-container">
<div class="yellow-container">
<h3>heading1 2</h3>
</div>
</div>
<div class="text-description">
text
</div>
<div class="slant"></div>
</div>
</div>
</div>
<div class="row view-all-sectors-btn-container">
<span class="center-block view-all-sectors-btn text-center more" role="button">View more<br><i class="informa-icon glyphicon glyphicon-plus-sign"></i></span>
<span class="center-block view-all-sectors-btn text-center less hidden" role="button">View less<br><i class="informa-icon glyphicon glyphicon-minus-sign"></i></span>
</div>
</div>
</section>
<section class="sectorpage-strengths" data-desktop="1">
<div class="container">
<div class="row">
<h2>heading main2</h2>
</div>
<div class="row sectorpage-strengths-list">
<div class=" marg1">
<div class="sectorpage-strengths-list-item">
<div class="main-container">
<div class="yellow-container">
<h3>heading2 1</h3>
</div>
</div>
<div class="text-description">
text
</div>
<div class="slant"></div>
</div>
</div>
<div class=" marg1 hidden">
<div class="sectorpage-strengths-list-item">
<div class="main-container">
<div class="yellow-container">
<h3>heading2 2</h3>
</div>
</div>
<div class="text-description">
text
</div>
<div class="slant"></div>
</div>
</div>
</div>
<div class="row view-all-sectors-btn-container">
<span class="center-block view-all-sectors-btn text-center more" role="button">View more<br><i class="informa-icon glyphicon glyphicon-plus-sign"></i></span>
<span class="center-block view-all-sectors-btn text-center less hidden" role="button">View less<br><i class="informa-icon glyphicon glyphicon-minus-sign"></i></span>
</div>
</div>
</section>
I try to write an filter in Javascript, which sorts different content blocks with headlines (the headlines are the filters).
I´ll try to explain what kind of filter I want to have.
For example I´ve 3 contentenblocks the first is only content1 the secont is content 1,2 and 3 and the third is content 2 and 3.
I wrote sth. like that.
HTML:
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-4 text-center">
<div id="filter1" class="filter_btn">
Filter 1
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-4 text-center">
<div id="filter2" class="filter_btn">
Filter 2
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-4 text-center">
<div id="filter3" class="filter_btn">
Filter 3
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-4 text-center ">
<div class="filter_check">
filter checker
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-4 text-center ">
<div class="filter_clear">
filter clear
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-xs-12 text-left st_dis_none filter1 filter1_only">
<a href="">
<div class="col-xs-12 col-sm-9 no-padding">
<h4>filter1 only content</h4>
</div>
<div class="col-xs-12 text-left st_dis_none filter1 filter2 filter3">
<a href="">
<div class="col-xs-12 col-sm-9 no-padding">
<h4>filter1 and filter2 and filter 3</h4>
</div>
</a>
</div>
<div class="col-xs-12 text-left st_dis_none filter2 filter3">
<a href="">
<div class="col-xs-12 col-sm-9 no-padding">
<h4>filter2 and filter 3</h4>
</div>
</a>
</div>
JS sth like that
var array = new Array();
$(function () {
$('.filter_btn').click(function () {
array.push(this.id);
});
$('.filter_clear').click(function () {
$(".post").hide();
array = [];
});
$('.filter_check').click(function () {
alert(array);
});
});
$(function () {
$('#filter1').click(function () {
$(".filter2:not(.filter1_only .filter1)").hide();
$(".filter3:not(.filter1_only .filter1)").hide();
$(".filter1").show();
});
});
//
$(function () {
$('#filter2').click(function () {
// $(".filter1_only:not(.filter2_only .filter2)").hide();
// $(".filter3_only:not(.filter2_only .filter2)").hide();
$(".filter2").show();
});
});
$(function () {
$('#filter3').click(function () {
// $(".filter1_only:not(.filter3_only .filter3)").hide();
// $(".filter2_only:not(.filter3_only .filter3)").hide();
$(".filter3").show();
});
});
I tried to do sth with arrays und array. IndexOf but I do not know how to go on with this...
DEMO Code-Pen
You can add a class to main div and show hide its child according to filter please see below code
<div class="row mainfilter">
<div class="col-xs-12 text-left st_dis_none filter1 filter1_only">
<a href="">
<div class="col-xs-12 col-sm-9 no-padding">
<h4>filter1 only content</h4>
</div>
</div>
<div class="col-xs-12 text-left st_dis_none filter1 filter2 filter3">
<a href="">
<div class="col-xs-12 col-sm-9 no-padding">
<h4>filter1 and filter2 and filter 3</h4>
</div>
</a>
</div>
<div class="col-xs-12 text-left st_dis_none filter2 filter3">
<a href="">
<div class="col-xs-12 col-sm-9 no-padding">
<h4>filter2 and filter 3</h4>
</div>
</a>
</div>
</div>
Javascript
$(function () {
$('#filter1').click(function () {
$(".mainfilter").children().hide();
$(".filter1").show();
});
});
//
$(function () {
$('#filter2').click(function () {
// $(".filter1_only:not(.filter2_only .filter2)").hide();
// $(".filter3_only:not(.filter2_only .filter2)").hide();
$(".mainfilter").children().hide();
$(".filter2").show();
});
});
$(function () {
$('#filter3').click(function () {
// $(".filter1_only:not(.filter3_only .filter3)").hide();
// $(".filter2_only:not(.filter3_only .filter3)").hide();
$(".mainfilter").children().hide();
$(".filter3").show();
});
});
var fil1 = "";
var fil2 = "";
var filcomp = "";
$(function func() {
/*Filter 1*/
$("#Filter_btn_1").click(function () {
fil1 = ".filter_option1";
filter();
});
$("#Filter_btn_2").click(function () {
fil1 = ".filter_option2";
filter();
});
$("#Filter_btn_3").click(function () {
fil1 = ".filter_option3";
filter();
});
/*Filter 2*/
$("#Filter_btn_4").click(function () {
fil2 = ".filter_option4";
filter();
});
$("#Filter_btn_5").click(function () {
fil2 = ".filter_option5";
filter();
});
$("#Filter_btn_6").click(function () {
fil2 = ".filter_option6";
filter();
});
filcomp = fil1 + fil2;
$('.filter_btn').click(function () {
$(".filter_btn").removeClass("filter_selected");
$(this).addClass("filter_selected");
});
$('.filter_btn2').click(function () {
$(".filter_btn2").removeClass("filter_selected");
$(this).addClass("filter_selected");
});
$('.filter_reset_btn').click(function () {
location.reload();
});
function filter() {
alert(filcomp);
func();
$(".post").hide();
$("div").filter(filcomp).show();
};
});