There are two radio buttons, you need to make tabs out of them.

<div class="btn-group btn-group" data-toggle="buttons"> <label class="my_b btn"> <input type="radio" name='gender1' > <i class="fa fa-circle-o fa-2x"></i> <i class="fa fa-dot-circle-o fa-2x"></i> <span>Tab 1</span> </label> <label class="my_b btn active"> <input type="radio" name='gender1' checked> <i class="fa fa-circle-o fa-2x"></i> <i class="fa fa-dot-circle-o fa-2x"></i> <span>Tab 2</span> </label> </div>

    2 answers 2

    You can, for example, like this:

     label { text-align: center; border: 1px solid black; cursor: pointer; display: inline-block; width: 57px; } input { display: none; } .tab1, .tab2 { width: 120px; height: 60px; border: 1px solid black; border-top: none; display: none; text-align: center; padding-top: 10px; color: white; } .tab1 { background-color: green; } .tab2 { background-color: blue; } #tab1:checked ~ div.tab1, #tab2:checked ~ div.tab2 { display: block; } 
     <label for="tab1" class="my_b btn">Tab 1</label> <input type="radio" id="tab1" name='gender1' > <label for="tab2" class="my_b btn active">Tab 2</label> <input type="radio" id="tab2" name='gender1' checked> <div class="tab1"> Это содержимое таба номер 1 </div> <div class="tab2"> Это содержимое таба номер 2 </div>

    • you are not so knoaki! - user220409
    • @OlmerDale in the sense of not such? ) <input type = "radio" id = "tab1" name = 'gender1'> Exactly such as in the question, I just added an id to them - humster_spb
    • You have buttons, and the author needs Knoaki! - user220409
    • with radio buttons in any way? - user22977
    • This is with radio buttons)) - humster_spb

    I did it here but it didn’t work !!!

      <div class="btn-group btn-group" data-toggle="buttons"> <label for=tab1 class="my_b btn" id="tab1"> <input type="radio" name='gender1' id="tab1"> <i class="fa fa-circle-o fa-2x"></i> <i class="fa fa-dot-circle-o fa-2x" id="tab1"></i> <span>tab 1</span> </label> <label for=tab2 class="my_b btn active" id="tab2"> <input type="radio" name='gender1' id="tab2" checked> <i class="fa fa-circle-o fa-2x"></i> <i class="fa fa-dot-circle-o fa-2x" id="tab1"></i> <span>tab 2</span> </label> </div> <div class="tab1">text 1</div> <div class="tab2">text 2</div> #tab1:checked ~ .tab1, #tab2:checked ~ .tab2 { display: block; } .tab1,.tab2 {display: none; }