Develop Reference

Hide certain inputs and show others using a switch button in jQuery

Hello Stackoverflow community, hope that you're doing well, what I'm trying to do is when I click the switch button I want it to hide certain inputs and show others, my code is a form to add students and teachers, since there are cummon inputs I tought about hide the uncummon one when I press the switch button and when I click it again do the opposite but all of that seem to be failed, I can only hide some and when I click it again it won't work, here what I did:
The Jquery code:
$(document).ready(function(){
$('.teacher').hide();
$('.switch').click(function(){
$('.student').hide();
$('.teacher').show();
});
});
The HTML code:
<label>Student </label>
<label class="switch">
<input type="checkbox" id="switchVal" value="0">
<span class="slider"></span>
</label>
<label> Teacher</label>

$('.teacher').hide();
$('.switch').click(function() {
$('.student').toggle();
$('.teacher').toggle();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='student'>Student</div>
<div class="switch">
<input type="checkbox" id="switchVal" value="0">
<span class="slider"></span>
</div>
<div class='teacher'>Teacher</div>

Use $(".teacher, .student").toggle();
Or, if needed, for more granular control you could always get the current checkbox state using
const isChecked = this.checked; // boolean`
Example:
jQuery($ => {
$(".teacher").hide();
$("#switchVal").on("input", function() {
$(".teacher, .student").toggle();
});
});
.toggler {
display: inline-flex;
gap: 0 5px;
cursor: pointer;
}
.toggler-checkbox {
display: inline-block;
width: 35px;
height: 15px;
background: #444;
border-radius: 1.2em;
}
.toggler-checkbox::before {
content: "";
position: relative;
display: inline-block;
width: 15px;
height: 15px;
background: #0bf;
border-radius: 1em;
transition: transform 0.3s;
}
.toggler input:checked ~ .toggler-checkbox::before {
transform: translateX(20px);
}
.toggler-label {
user-select: none;
}
.toggler-label:nth-of-type(1) {
order: -1;
color: #0bf;
}
.toggler input:checked ~ .toggler-label:nth-of-type(1) {
color: inherit;
}
.toggler input:checked ~ .toggler-label:nth-of-type(2) {
color: #0bf;
}
<label class="toggler">
<input type="checkbox" id="switchVal" value="0" hidden>
<span class="toggler-checkbox"></span>
<b class="toggler-label">Student</b>
<b class="toggler-label">Teacher</b>
</label>
<ul>
<li class="student">Student: Anna</li>
<li class="student">Student: John</li>
<li class="teacher">Teacher: Mark</li>
<li class="student">Student: Tara</li>
<li class="teacher">Teacher: Zack</li>
</ul>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

How to change value, name and placeholder of an input tag when an anchor tag is clicked using Javascript?

<div class="filter_search">
<button class="fas fa-filter circle-icon"></button>
<ul>
<li>Events</li>
<li>Users</li>
</ul>
</div>
The above code opens a drop down menu. When I click on Users, I want to change the following input tag's placeholder value to 'Search Users' and 'Search Events' when Events is clicked. Also I want to change the name and value also.
Input form:
<form method="GET">
<input id="searchBar" class="form-control" type="text" placeholder="Search Events" name="q_posts" value="{{ request.GET.q_posts }}">
<input type="submit" value="Search">
</form>
CSS for opening the drop down menu:
.filter_search ul{
position: absolute;
color: #FFFFFF;
background: #FFFFFF;
box-shadow: 4px 4px 20px rgba(26, 60, 68, 0.09);
border-radius: 10px;
margin-top: 2px;
padding: 6px;
width: 120px;
height: 65px;
display: flex;
justify-content: space-around;
align-items: center;
flex-direction: column;
list-style: none;
opacity: 0;
pointer-events: none;
transition: .1s ease;
transform: translateY(10px);
}
.filter_search button:focus + ul{
opacity: 1;
pointer-events: all;
}
Is it possible to do so?

$(".link-list a").click(function(){
linkTxt = $(this).text();
$("#searchBar").attr("placeholder","Search "+linkTxt).attr("name",linkTxt);
// to change value uncomment below
// $("#searchBar")..attr("value",linkTxt);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="filter_search">
<button class="fas fa-filter circle-icon"></button>
<ul class="link-list">
<li>Events</li>
<li>Users</li>
</ul>
</div>
<form method="GET">
<input id="searchBar" class="form-control" type="text" placeholder="Search Events" name="q_posts" value="">
<input type="submit" value="Search">
</form>
Please use this.

How to add border to label when radio button is selected

<label for="seeker" class="checkbox">
I am a Job Seeker
<input type="radio" id="seeker" name="designation">
</label>
<label for="employer" class="checkbox">
I am an Employer
<input type="radio" id="employer" name="designation">
</label>
I have multiple HTML radio inputs which are wrapped around labels (https://i.imgur.com/GLdqodq.png) when a radio is selected for say input name "designation" I'd like to add a border color to the label of the radio button that was selected and remove the border from the other labels (https://i.imgur.com/LOMlBUP.png), here's the the JS code I tried using but for some reason when a radio button is unchecked JS can't seem to detect the event.
const radios = document.querySelectorAll('.checkbox input')
radios.forEach((radio) => {
radio.addEventListener('change', e => {
if (e.target.checked) {
// logic to add label border
} else {
// logic to remove label border
}
})
})
I know this can be done using the CSS plus (+) operator but seems like that would require the label to preceded the input, something I wouldn't want to do. However I'm open to using a CSS method as long as the markup wouldn't have to be changed.

const inputs= document.body.querySelectorAll("input")
document.addEventListener("change", (e)=>{
inputs.forEach(input=>{
if(input.checked){
input.labels[0].style="border-style: solid; padding: 10px;"
}
if(!input.checked){
input.labels[0].style=""
}
})
})
here is the js logic

You can also try this code snippet. I have also provided the required styling if you want.
document.querySelector(".first-checkbox").addEventListener('click', function(){
document.querySelector(".first-checkbox").classList.add("active");
document.querySelector(".second-checkbox").classList.remove("active");
})
document.querySelector(".second-checkbox").addEventListener('click', function(){
document.querySelector(".second-checkbox").classList.add("active");
document.querySelector(".first-checkbox").classList.remove("active");
})
.first-checkbox,.second-checkbox{
border:1px solid #D3D3D3;
border-radius:5px;
padding:5px;
}
.checkbox-container{
width:80%;
display:flex;
justify-content:space-around;
padding:20px;
border:1px solid #C0C0C0;
border-radius:5px;
}
.active{
border:1px solid black;
border-radius:5px;
padding:5px;
}
<div class="checkbox-container">
<label for="seeker" class="first-checkbox">
I am a Job Seeker
<input type="radio" id="seeker" name="designation">
</label>
<label for="employer" class="second-checkbox">
I am an Employer
<input type="radio" id="employer" name="designation">
</label>
</div>

You can simply do it css using input:checked selector
Take an example from below code and codepen link https://codepen.io/naren-irain/pen/XWXWWqq
.radiobox {
display: inline-block;
cursor: pointer;
user-select: none;
}
.radiobox input {
position: absolute;
opacity: 0;
}
.radiobox .check {
background: #fff;
border: 1px solid #979797;
border-radius: 50%;
display: inline-block;
width: 16px;
height: 16px;
position: relative;
top: 1px;
margin-right: 5px;
vertical-align: top;
}
.radiobox span, .radioTab span, .checkbox span {
display: inline-block;
vertical-align: top;
}
.radiobox .check i,
.radioTab .check i {
background: #0db837;
border-radius: 50%;
display: block;
width: 10px;
height: 10px;
position: absolute;
top: 50%;
left: 50%;
margin: -5px 0 0 -5px;
opacity: 0;
transform: scale(0.75);
transition: all 0.3s;
}
.radiobox input:checked+.check,
.radioTab input:checked+ span .check {
border-color: #5cb85c;
}
.radiobox input:checked+.check i,
.radioTab input:checked+ span .check i {
opacity: 1;
transform: scale(1);
}
<h4>Select any one option</h4>
<label class="radiobox" for="one">
<input type="radio" id="one" name="designation" value="one" />
<span class="check"><i></i></span>
<span>This is one option</span>
</label>
<br/>
<br/>
<label class="radiobox" for="two">
<input type="radio" id="two" name="designation" value="two" />
<span class="check"><i></i></span>
<span>Never think this is an option</span>
</label>

Moving tab is not working after some seconds on next button click

I have three tabs which add or remove active class on anchor tag not li when click on next button.
I tried that when I click on next button its disabled for some seconds then move to next tab button but issue is that moving is not working.
Here is code of html
<ul class="nav nav-pills" style="width: 1050px">
<li class="nav-item"><a class="active" href="#Race" data-toggle="tab">Race</a>
</li>
<li class="nav-item"><a class="active" href="#Ace" data-toggle="tab">Ace</a>
</li>
<li class="nav-item"><a class="active" href="#Deep" data-toggle="tab">Deep</a>
</li>
</ul>
<div class="tab-content">
<!-- Race -->
<div class="tab-pane active" id="Race">
<button class="btn-style" type="submit">Next</button>
</div>
<!-- ACE -->
<div class="tab-pane" id="Ace">
<button class="btn-style" type="submit">Next</button>
</div>
and jquery code
$(".btn-style").click(function () {
$(".btn-style").prop("disabled", true );
setTimeout(function() {
$(".btn-style").prop("disabled", false );
var target = $(".nav-pills li.nav-item a.active");
var sibbling;
if ($(this).text() === "Next") {
sibbling = target.next();
} else {
//sibbling = target.prev();
}
if (sibbling.is("li")) {
target.removeClass("active")
sibbling.addClass("active").children("a").tab("show");
}
}, 3000);
});

Target will be an array since there is more than 1 anchor with an active class.
You can try something easier like this CodePen
<style>
/* Checked Tabs */
.tabs-checked input:nth-of-type(1):checked ~ .tab:nth-of-type(1),
.tabs-checked input:nth-of-type(2):checked ~ .tab:nth-of-type(2),
.tabs-checked input:nth-of-type(3):checked ~ .tab:nth-of-type(3)
{
display: block;
}
.tab-area {
width: 21%;
margin: 2%;
}
input {
display: none;
}
.tab {
clear: both;
background: #ddd;
padding: 25px;
display: none;
height: 180px;
border: 1px solid #bbb;
}
.tab-link:focus,
.tab-link:hover,
#tab-C:checked ~ label:nth-of-type(3),
#tab-B:checked ~ label:nth-of-type(2),
#tab-B:not(:checked) ~ #tab-C:not(:checked) ~ label:nth-of-type(1) {
background: #ddd;
}
.tab-link:focus:after,
.tab-link:hover:after,
#tab-C:checked ~ label:nth-of-type(3):after,
#tab-B:checked ~ label:nth-of-type(2):after,
#tab-B:not(:checked) ~ #tab-C:not(:checked) ~ label:nth-of-type(1):after {
position: absolute;
content: "";
margin: 5px 0 0 0;
width: 55px;
height: 1px;
display: block;
background: #ddd;
}
.tab-link {
text-transform: uppercase;
font-size: 10px;
cursor: pointer;
color: #555;
font-weight: bold;
text-decoration: none;
display: block;
float: left;
width: 55px;
padding: 5px 0;
text-align: center;
background: #ccc;
border: 1px solid #bbb;
border-left: 0;
border-bottom: 0;
}
.tab-link:hover {
background: #eee;
color: #666;
}
.tab-link:nth-of-type(1) {
border-left: 1px solid #bbb;
}
</style>
<form class="tab-area tabs-checked" name="temp">
<input checked type="radio" name="tab" id="tab-A" value="1"/>
<input type="radio" name="tab" id="tab-B" value="2"/>
<input type="radio" name="tab" id="tab-C" value="3"/>
<label class="tab-link" for="tab-A">Tab 1</label>
<label class="tab-link" for="tab-B">Tab 2</label>
<label class="tab-link" for="tab-C">Tab 3</label>
<article class="tab">
<h3>I love :checked. :checked is great. If only I could toggle any item and not just input elements we'd be golden.</h3>
</article>
<article class="tab">
<h3>Tab 2</h3>
<p>Lorem Ipsum Dolor Sit</p>
</article>
<article class="tab">
<h3>Tab 3</h3>
<p>Lorem Ipsum Dolor Sit</p>
</article>
<h2 class="title">Checked Tabs</h2>
<p><strong>Independent, Default Selected</strong></p>
<p>Works In: Chrome(latest), Opera(Latest), FireFox(Latest), IE9</p>
</form>
<div >
<button onclick="doNext();" id="btn">NEXT</button>
</div>
<script>
function doNext()
{
btn.disabled = true;
setTimeout(function()
{
document.temp.tab.value = document.temp.tab.value % 3 + 1;
btn.disabled = false;
},3000)
}
</script>

Focus on absolute element

I have a button witch shows only when the parent(parent-class) element is hover. The parent-class has position:relative, and the button has absolute:position. It's works fine.
Now i want to have a drop down list witch appears only when i click the button.
I try to set the absolute:position and display:none to dropdown-list class, and display the dropdown only when i focus the button.
But it's not working.
This is an example code:
<div class="parent-class">
<button class="btn" >button</button>
<ul class="dropdown-list">
<li > content1</li>
<li > content1</li>
</ul>
</div>
.parent-class{
position: relative;
}
.parent-class:hover .btn{
display:block;
}
.btn{
position:absolute;
display:none;
}
.btn:focus .dropdown-list{
display: block;
}
.dropdown-list{
position: absolute;
display: none;
}
Also i used Angular 2, so if there is a way to resolve this with angular 2 it would be perfect

Your problem is that when you use .btn:focus .dropdown-list you expect the .dropdown-list element to be a child element of the .btn element (and in your case - they are not). The .dropdown-list is a sibling element of the .btn.
You can fix this by using the ~ (sibling selector):
.parent-class{
position: relative;
border: 1px solid red;
width: 100px;
height: 100px;
}
.parent-class:hover .btn{
display:block;
}
.btn{
position:absolute;
display:none;
}
.btn:focus ~ .dropdown-list{
display: block;
}
.dropdown-list{
position: absolute;
display: none;
}
<div class="parent-class">
<button class="btn" >button</button>
<ul class="dropdown-list">
<li > content1</li>
<li > content1</li>
</ul>
</div>