如何在单击单选按钮时显示相应的 div

Question

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">&nbsp; 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="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

Answer 1

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