How to show respective div on clicking a radio button
I want to show respective divs when clicked on the radio button. div and radio buttons are on different plains thus I am not able to do this using input:checked + .descendingelement method. I have created a codepen. My aim is that if i click on Albums radio button then only the div related to albums should be visible. and if i click on articles radio button articles' div should be visible. If possible to do so using css only please help me or I need to use javascript for this. Initially Articles should be visible.
<div class="creator-programs">
<div class="programTitles">
<div class="programTitles-inner">
<input type="radio" name="programdivs" id="albums" data-target="Albums" class="programButton" checked>
<label for="albums" id="albumsLabel" class="programlabel">Albums</label>
<input type="radio" name="programdivs" id="articles" data-target="ARTICLES BY" class="programButton">
<label for="articles" class="programlabel">Articles</label>
<input type="radio" name="programdivs" id="documents" data-target="DOCUMENTS BY" class="programButton">
<label for="documents" class="programlabel">Documents</label>
<input type="radio" name="programdivs" id="subs" data-target="SUBSCRIPTIONS OF" class="programButton">
<label for="subs" class="programlabel">Subscriptions</label>
<input type="radio" name="programdivs" id="workshops" data-target="WORKSHOPS BY" class="programButton">
<label for="workshops" class="programlabel">Workshops</label>
<input type="radio" name="programdivs" id="recs" data-target="RECS BY" class="programButton">
<label for="recs" class="programlabel">Recs</label>
</div>
</div>
<div class="programValues">
<div class="programTitle">
<h1 class="title-target">ALBUMS BY </h1> <h1 class="programHeading"> SAMPAT</h1>
</div>
<div class="program-content">
<div class="program-data-div" id="albumsContainer">
This will contain albums
</div>
<div class="program-data-div" id="articlesContainer">
This will contain Articles
</div>
<div class="program-data-div" id="documentsContainer">
This will contain Documents
</div>
<div class="开发者_Go百科program-data-div" id="subContainer">
This will contain Subscriptions
</div>
<div class="program-data-div" id="workshopsContainer">
This will contain Workshops
</div>
<div class="program-data-div" id="recsContainer">
This will contain Recs
</div>
</div>
</div>
</div>
.creator-programs{
font-family:Montserrat, sans-serif ;
display:grid;
grid-template-columns: 1fr 5fr;
margin:20px 2.4em;
padding:15px 8px;
background-color:#333;
border-radius:8px;
}
.programTitles-inner{
display:flex;
flex-direction: column;
gap:20px;
}
.programTitles-inner input:checked + label{
background:#F0F0F0;
color:#000;
transition:all 0.8s ease-in;
}
.programButton{
userselect:none;
border:none;
display:none;
border:none;
border-radius:10px;
padding:10px 20px;
width:200px;
font-size:1.3rem;
font-weight:700;
cursor:pointer;
background:none;
color:#fff;
}
.programlabel{
border:none;
border:none;
border-radius:10px;
padding:10px 20px;
text-align: center;
width:200px;
font-size:1.3rem;
font-weight:700;
cursor:pointer;
background:none;
color:#fff;
transition:all 0.8s ease-out;
}
.programTitle{
display:flex;
}
.programTitles-inner input:checked + label{
background:#F0F0F0;
color:#000;
transition:all 0.8s ease-in;
}
.program-data-div{
display:none;
}
#albums:checked .program-data-div:first-child{
display: flex !important;;
}
.programButton:focus{
border:none;
}
.programValues{
color:#fff;
display: flex;
flex-direction: column;
align-items: center;
}
.programTitles-inner{
display:flex;
flex-direction: column;
gap:20px;
}
let progButtons = document.querySelectorAll(".programButton")
progButtons.forEach(function (progbtn) {
progbtn.addEventListener('click', function(event){
// console.log(event.target.getAttribute("data-target"))
document.querySelector(".title-target").innerHTML = event.target.getAttribute("data-target")
})
})
codepen: https://codepen.io/sampat-28/pen/KKeJyMg
I give you a javascript solution, the progButtons.forEach function will be changed as below:
progButtons.forEach(function (progbtn) {
progbtn.addEventListener('click', function(event){
// console.log(event.target.getAttribute("data-target"))
document.querySelector(".title-target").innerHTML = event.target.getAttribute("data-target")
let progContents=document.querySelector(".program-content").children;
for (let i=0;i<progContents.length;i++){
if (progContents[i].id===(event.target.id+"Container")){
progContents[i].className="";
}else{
progContents[i].className="program-data-div";
}
}
})
})
精彩评论