check if radio button is checked and display div

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