How to set default filter to hide div
<div class="nav">
<a href="#" data-category-type="high">high</a>
<a href="#" data-category-type="low" data-category-name="air">low</a>
<a href="#" data-category-name="pizza">pizza</a>
</div>
<div id="Categories">
<div class="hide" data-category-type="high" data-category-name="pizza">high</div>
<div class="hide" data-category-type="low" data-category-name="pasta">low</div>
<div class="hide" data-category-type="low" data-category-name="pizza">low</div>
<div class="hide" data-category-type="high" data-category-name="pasta">high</div>
</div>
JavaScript:
$('.nav a').on('click', function (e) {
e.preventDefault();
var cat = $(this).data('categoryType');
var nam = $(this).data('categoryName');
$('#Categories > div').hide();
$('#Categories > div[data-category-type="'+cat+'"]').show();
$('#Categories > div[data-category-name="'+nam+'"]').show();
});
By default, I only want to show divs with type "tall", Can anyone please tell me how to set the default state and not show all of them?
+3
source to share
4 answers
Hide all divs in categories and show them with type = "high"
$('#Categories > div').hide();
$('#Categories > div[data-category-type="high"]').show();
$('.nav a').on('click', function (e) {
e.preventDefault();
var cat = $(this).data('categoryType');
var nam = $(this).data('categoryName');
$('#Categories > div').hide();
$('#Categories > div[data-category-type="'+cat+'"]').show();
$('#Categories > div[data-category-name="'+nam+'"]').show();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="nav">
<a href="#" data-category-type="high">high</a>
<a href="#" data-category-type="low" data-category-name="air">low</a>
<a href="#" data-category-name="pizza">pizza</a>
</div>
<div id="Categories">
<div class="hide" data-category-type="high" data-category-name="pizza">high</div>
<div class="hide" data-category-type="low" data-category-name="pasta">low</div>
<div class="hide" data-category-type="low" data-category-name="pizza">low</div>
<div class="hide" data-category-type="high" data-category-name="pasta">high</div>
</div>
0
source to share
Can you try, I just added a condition to check if its high
$('.nav a').on('click', function (e) {
e.preventDefault();
var cat = $(this).data('categoryType');
var nam = $(this).data('categoryName');
$('#Categories > div').hide();
if(cat=="high"){
$('#Categories > div[data-category-type="'+cat+'"]').show();
$('#Categories > div[data-category-name="'+nam+'"]').show();
}else{
$('#Categories > div[data-category-type="'+cat+'"]').hide();
$('#Categories > div[data-category-name="'+nam+'"]').hide();
}
});
0
source to share
You can do this in two ways.
-
set style = "display: none" for the sections you don't want to be shown.
-
Hide div inside $ (document) .ready.
Use the html or javascript mentioned below.
$('#Categories > div[data-category-type=low]').hide();
$('.nav a').on('click', function (e) {
e.preventDefault();
var cat = $(this).data('categoryType');
var nam = $(this).data('categoryName');
$('#Categories > div').hide();
$('#Categories > div[data-category-type="'+cat+'"]').show();
$('#Categories > div[data-category-name="'+nam+'"]').show();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="nav">
<a href="#" data-category-type="high">high</a>
<a href="#" data-category-type="low" data-category-name="air">low</a>
<a href="#" data-category-name="pizza">pizza</a>
</div>
<div id="Categories">
<div class="hide" data-category-type="high" data-category-name="pizza">high</div>
<div class="hide" style="display:none" data-category-type="low" data-category-name="pasta">low</div>
<div class="hide" style="display:none" data-category-type="low" data-category-name="pizza">low</div>
<div class="hide" data-category-type="high" data-category-name="pasta">high</div>
</div>
0
source to share
You can hide the div with CSS styling like:
<div class="hide" data-category-type="high" data-category-name="pizza">high</div>
<div style="display: none" class="hide" data-category-type="low" data-category-name="pasta">low</div>
<div style="display: none" class="hide" data-category-type="low" data-category-name="pizza">low</div>
<div class="hide" data-category-type="high" data-category-name="pasta">high</div>
0
source to share