Upon clicking any label in the #nav section, a popup is displayed. However, I want the content inside the popup to change depending on which label is clicked. Currently, the different popup content divs will all hide or show based on CSS only, so I believe my jQuery selector might be incorrect. How can I resolve this issue? Would it be better to add or remove active classes instead of using a radio setup? Thank you for your help!
UPDATE1: After fixing the typo mentioned in the comments, it seems that my current issue is not displaying the other unchecked-radio targets.
UPDATE2: By adding
$('[id^="c-"]').hide();#c-ask if its label was the last one clicked.)
HTML:
<input hidden type="radio" id="ask" name="popinfo"/>
<input hidden type="radio" id="sub" name="popinfo"/>
<input hidden type="radio" id="mnu" name="popinfo"/>
<div id="fade">
<div id="popup">
<div id="c-ask">ask</div>
<div id="c-sub">sub</div>
<div id="c-mnu">mnu</div>
</div>
</div>
<section id="splash">
<div class="info">
//
</div>
<div id="nav">
<i class="fa fa-home"></i>
<label for="ask"><i class="fa fa-envelope"></i></label>
<i class="fa fa-user"></i>
<label for="sub"><i class="fas fa-edit"></i></label>
<label for="mnu"><i class="fas fa-plus"></i></label>
</div>
</section>
CSS:
#splash {
width:100%;
height:100vh;
background:#ff0;
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
text-align: center;
}
.info {margin: auto;}
#nav {
margin-bottom:0;
display:flex;
flex-direction:row;
justify-content:center;
align-items:center;
justify-content:space-evenly;
width:100%;
height:40px;
background:#f00;
}
#c-ask, #c-sub, #c-mnu {display:none;}
#fade {
width:100%;
height:100%;
position:fixed;
top:0; left:0;
background:rgba(0,0,0,0.5);
display:none;
z-index:1;
}
#popup {
display:none;
z-index:2;
width:50%;
height:50%;
background:#fff;
border: 1px solid #000;
margin:auto;
padding: 20px;
overflow-x:hidden;
overflow-y:auto;
position: absolute;
top:50%; left:50%;
transform: translate(-50%, -50%);
}
jQuery:
$('label').click(function(){
$("#fade").fadeToggle();
$("#popup").fadeToggle();
var $target = $('input[type="radio"]:checked').attr('id');
$('[id^="c-"]').hide();
$("#c-" + $target).show();
});
$("#fade").click(function(){
$(this).fadeOut();
$("#popup").fadeOut();
});