check if radio button is checked and display div - html

Question

i have tried This from stackoverflow
which i haven't been able to get to work..
i have .playlist-list and .playlist-feature where only one should be displayed, with a radio button to check on.
so which ever radio button is checked, it should display : block the div. and hide the other.
but it is somehow not working..
I can start out with .playlist-feature being displayed fine, where i check on another button. but here it does not seem to work..
any idea as to a solution to this ?
My code:
html:
<div class="playlist-top">
<label for="playlist-button">Spilleliste</label>
<label for="playlist-feature-button">Indslag</label>
</div>
<input type="radio" id="playlist-list-button" />
<input type="radio" id="playlist-feature-button" />
<div class="playlist-content">
<div class="playlist-list">
<ul class="bar">
<li>
<span>12:36</span ><p class="text- uppercase">brian adams</p><span class="dr-icon-audio-boxed"></span>
<p>You Belong to me</p>
</li>
</ul>
</div>
<div class="playlist-feature">
<ul class="bar">
<li>
<span>08:51</span><span class="dr-icon-audio-boxed"></span>
<p>Gærdesmutten er sej trods sin beskedne størrelse</p>
</li>
</ul>
</div>
</div>
My CSS
#playlist:checked ~div.playlist-toggle{
.playlist-wrapper .container .playlist-content{
.playlist-feature{
display:block;
}
}
}
#playlist-list-button:checked ~div.playlist-toggle{
.playlist-wrapper .container .playlist-content{
.playlist-list{
display:block;
}
.playlist-feature{
display:none;
}
}
}
#playlist-feature-button:checked ~div.playlist-toggle{
.playlist-wrapper .container .playlist-content{
.playlist-feature{
display:block;
}
.playlist-list{
display:none;
}
}
}

Answer 1

I think this one useful for you with jquery
Put this code in your header,
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<style>
.playlist-list{
display: block;
}
.playlist-feature{
display:none;
}
</style>
<script>
$(document).ready(function () {
$('input[type=radio][name=rb1]').change(function () {
if (this.value == 'playlist-list-button') {
$('.playlist-list').show();
$('.playlist-feature').hide();
}
else if (this.value == 'playlist-feature-button') {
$('.playlist-feature').show();
$('.playlist-list').hide();
}
});
});
</script>
And HTML like this
<div class="playlist-top">
<label for="playlist-button" >Spilleliste</label>
<input type="radio" value="playlist-list-button" id="playlist-list-button" name="rb1" checked="" class="rb1" />
<label for="playlist-feature-button" >Indslag</label>
<input type="radio" value="playlist-feature-button" id="playlist-feature-button" name="rb1" class="rb1"/>
</div>
<div class="playlist-content">
<div class="playlist-list">
<ul class="bar">
<li>
<span>12:36</span ><p class="text- uppercase">brian adams</p><span class="dr-icon-audio-boxed"></span>
<p>You Belong to me</p>
</li>
</ul>
</div>
<div class="playlist-feature">
<ul class="bar">
<li>
<span>08:51</span><span class="dr-icon-audio-boxed"></span>
<p>Gærdesmutten er sej trods sin beskedne størrelse</p>
</li>
</ul>
</div>
</div>

Answer 2

i got it to work with this:
because the playlist-content is right under the input, it seems it could access it through that. so i could display the div and hide it at will.
and the class on .playlist-button was wrong.. it should have been .playlist-list-button.. no idea why i didn't see that before..
#playlist-feature-button:checked ~ div.playlist-content {
.playlist-feature {
display: block;
}
.playlist-list {
display: none;
}
}