Trying to code for my student portfolio but I hit a major snag and nothing actually changes
<script>
$(function() {
$('input[type="checkbox"]').on('change', function() {
var AllChecked = $('.AllToggle').prop('checked');
var UXChecked = $('.UXToggle').prop('checked');
var DesignChecked = $('.DesignToggle').prop('checked');
var ProgChecked = $('.ProgToggle').prop('checked');
var ComChecked = $('.ComToggle').prop('checked');
var VidChecked = $('.VidToggle').prop('checked');
var BusTechChecked = $('.BusTechToggle').prop('checked');
if (AllChecked) {
$('.All').show();
} else if (V1Checked) {
$('.Ux').show();
} else if (UXChecked && DesignChecked) {
$('.UxD').show();
} else if (UXChecked && ProgChecked) {
$('.UxP').show();
} else if (UXChecked && ComChecked) {
$('.UxC').show();
} else if (UXChecked && VidChecked) {
$('.UxV').show();
} else if (UXChecked && DesignChecked && ProgChecked) {
$('.UxDP').show();
} else if (UXChecked && ComChecked && VidChecked) {
$('.UxCV').show();
} else if (DesignChecked) {
$('.D').show();
} else if (DesignChecked && ProgChecked) {
$('.DP').show();
} else if (ProgChecked) {
$('.P').show();
} else if (ComChecked) {
$('.C').show();
} else if (ComChecked && VidChecked) {
$('.CV').show();
} else if (ComChecked && BusTechChecked) {
$('.CBt').show();
} else if (VidChecked) {
$('.V').show();
} else if (BusTechChecked) {
$('.Bt').show();
});
});
</script>
My body:
<body>
<div id='headering'>
<div id='page_title'>
</div>
</div>
<div id='content_border' class='All' class='.Ux' class='.UxD' class='.UxP' class='.UxDP' class='.D' class='.DP'>
<div id='content_inner'>
<br>
<br>
<br>
<br>
<br>
<br>
</div>
</div>
<div id='content_border' class='All' class='.Ux' class='.UxC' class='.UxV' class='.UxCV' class='.C' class='.CV' class='.V'>
<div id='content_inner'>
<br>
<br>
<br>
<br>
<br>
<br>
</div>
</div>
<div id='content_border' class='All' class='.C' class='.CBt' class='.Bt'>
<div id='content_inner'>
<br>
<br>
<br>
<br>
<br>
<br>
</div>
</div>
<div class='nav_border'>
<ul class='nav_inner'>
<li><input type="checkbox" class='AllToggle' checked>All</li>
<li><input type="checkbox" class='UXToggle'>User Experience</li>
<li><input type="checkbox" class='DesignToggle'>Design</li>
<li><input type="checkbox" class='ProgToggle'>Programming</li>
<li><input type="checkbox" class='ComToggle'>Communications</li>
<li><input type="checkbox" class='VidToggle'>Videography</li>
<li><input type="checkbox" class='BusTechToggle'>Business Technology</li>
</ul>
</div>
</div>
</body>
</html>
I don't believe I can use toggle since that would set off other divs to show up or disappear when they're not supposed to. If anyone has any idea of a way of making this work or an alternative method to hide and show divs of overlapping categories without making some appear when they're not supposed to I would really appreciate the help.
Aucun commentaire:
Enregistrer un commentaire