Using Bootstrap "Collapse" on radio buttons to show/hide content (NO JS)

Question

I am using Bootstrap 3 and I want to create a radio button group that shows/hides content based on the radio button selected. I want to use all HTML and data attributes if possible.

Below is my code:

 <div id="parent"> 

     <input type="radio" name="group1" value="1" data-parent="#parent" data-toggle="collapse" data-target="#div1" />
     <input type="radio" name="group1" value="2" data-parent="#parent" data-toggle="collapse" data-target="#div2" />

     <div class="panel-collapse collapse in" id="div1">Content</div>
     <div class="panel-collapse collapse in" id="div2">Content</div>

   </div>

This will show/hode the target DIV just fine, but I need it to close all other DIVs under inside the #Parent DIV.

I know you can do this with panels but I've never seen it done with Radio buttons, and I'm so close.

Any ideas ?

Answer 1

You could do a combination of panels and radio buttons. Just use the radio buttons as the toggle, and use it to control the panels.

demo http://www.bootply.com/Fdjc8kQiER#

source code

<input type="radio" name="group1" value="1" data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
<input type="radio" name="group1" value="2" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
<input type="radio" name="group1" value="3" data-toggle="collapse" data-parent="#accordion" href="#collapseThree">

<div class="panel-group" id="accordion">
    <div class="panel panel-default">
        <div class="panel-heading">
            <h4 class="panel-title">
                1. What is HTML?
            </h4>
        </div>
        <div id="collapseOne" class="panel-collapse collapse in">
            <div class="panel-body">
                <p>HTML stands for HyperText Markup Language. HTML is the main markup language for describing the structure of Web pages. <a href="http://www.tutorialrepublic.com/html-tutorial/" target="_blank">Learn more.</a></p>
            </div>
        </div>
    </div>
    <div class="panel panel-default">
        <div class="panel-heading">
            <h4 class="panel-title">
                2. What is Bootstrap?
            </h4>
        </div>
        <div id="collapseTwo" class="panel-collapse collapse">
            <div class="panel-body">
                <p>Bootstrap is a powerful front-end framework for faster and easier web development. It is a collection of CSS and HTML conventions. <a href="http://www.tutorialrepublic.com/twitter-bootstrap-tutorial/" target="_blank">Learn more.</a></p>
            </div>
        </div>
    </div>
    <div class="panel panel-default">
        <div class="panel-heading">
            <h4 class="panel-title">
                3. What is CSS?
            </h4>
        </div>
        <div id="collapseThree" class="panel-collapse collapse">
            <div class="panel-body">
                <p>CSS stands for Cascading Style Sheet. CSS allows you to specify various style properties for a given HTML element such as colors, backgrounds, fonts etc. <a href="http://www.tutorialrepublic.com/css-tutorial/" target="_blank">Learn more.</a></p>
            </div>
        </div>
    </div>
</div>

the only thing that isn't perfect about this, is that for some reason the radio buttons don't update when you select one. you can't see the selected one anymore. (no idea how this happens... something with bootstrap? pls comment if you know how to fix, so i can edit)

hope it helps