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 >
    <div >
        <div >
            <input type="radio" name="programdivs" id="albums" data-target="Albums"  checked>
            <label for="albums" id="albumsLabel" >Albums</label>

            <input type="radio" name="programdivs" id="articles" data-target="ARTICLES BY" >
            <label for="articles" >Articles</label>

            <input type="radio" name="programdivs" id="documents" data-target="DOCUMENTS BY" >
            <label for="documents" >Documents</label>

            <input type="radio" name="programdivs" id="subs" data-target="SUBSCRIPTIONS OF" >
            <label for="subs" >Subscriptions</label>

            <input type="radio" name="programdivs" id="workshops" data-target="WORKSHOPS BY" >
            <label for="workshops" >Workshops</label>

            <input type="radio" name="programdivs" id="recs" data-target="RECS BY" >
            <label for="recs" >Recs</label>
        </div>
    </div>
    <div >
        <div >
            <h1 >ALBUMS BY </h1> <h1 >&nbsp; SAMPAT</h1>
        </div>
        <div >
            <div  id="albumsContainer">
                This will contain albums
            </div>
            <div  id="articlesContainer">
                This will contain Articles
            </div>
            <div  id="documentsContainer">
                This will contain Documents
            </div>
            <div  id="subContainer">
                This will contain Subscriptions
            </div>
            <div  id="workshopsContainer">
                This will contain Workshops
            </div>
            <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

CodePudding user response：

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";
        }
      }
})
})