CODEWITHSUNDEEP
twitter-bootstrapbuttonbuttongroup
passionFinder
passionFinder

Reputation: 139

How do I create two different button groups

I am creating two button groups. whenever I click a button from second button group, already selected button from 1st group is getting deselected. i am able to select only one button both group. i want to select one button from each group.

<li class="col-md-12 panel-select">
     <div class="col-md-2">Subject</div>
     <div class="col-md-9" id="">
           <div class="btn-group" role="group" aria-label="..."><button type="button" class="btn btn-default">English</button></div>
            <div class="btn-group" role="group" aria-label="..."><button type="button" class="btn btn-default">Geography</button></div>
            <div class="btn-group" role="group" aria-label="..."><button type="button" class="btn btn-default">History</button></div>        
       </div>              
   </li>
   <li class="col-md-12 panel-select">
        <div class="col-md-2">Class</div>
       <div class="col-md-9" id="">
         <div class="btn-group" role="group" aria-label="..."><button type="button" class="btn btn-default">I</button></div>
        <div class="btn-group" role="group" aria-label="..."><button type="button" class="btn btn-default">II</button></div>
        <div class="btn-group" role="group" aria-label="..."><button type="button" class="btn btn-default">III</button></div>
   </div>
</li>`

Upvotes: 0

Views: 2088

Answers (1)

ridoansaleh
ridoansaleh

Reputation: 624

Step by step to get this done :

  1. Add a class to a selected button that user just clicked
    $(this).addClass("selected");
  2. Create custom css for the selected button (which we named selected).
    .selected { background-color: #A8A8A8; color: #FFFFFF; }
  3. Get the id of button's parent that was selected.
    group = $(this).parent().attr('id');

  4. Get all the child elements of the button's parent that was selected. Then store these to variable which named childClasses.
    childClasses = $("#" + group).children();

  5. Check if there were previous button have selected in the same group button. If any, just remove 'selected' class from those elements.

    for(var i = 0; i < childClasses.length; i++){ if(this.textContent != childClasses[i].textContent){ $("#" + childClasses[i].id).removeClass("selected"); } }

You could also learn from the source code i've provided below. I hope this helps you. 

$(document).ready(function() {
  $(".btn-default").click(function() {

    var childClasses, group;

    // add class "selected" to a clicked button
    $(this).addClass("selected");

    // get the parent's id of button element 
    group = $(this).parent().attr('id');

    // store all element of selected group 
    childClasses = $("#" + group).children();

    // remove previous selected button when user select a new button in the same group button
    for (var i = 0; i < childClasses.length; i++) {
      if (this.textContent != childClasses[i].textContent) {
        $("#" + childClasses[i].id).removeClass("selected");
      }
    }

  });
});
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
  <title>Example</title>

  <!-- Bootstrap -->
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

  <style type="text/css">
    .selected {
      background-color: #A8A8A8;
      color: #FFFFFF;
    }
    
    .row {
      padding: 10px;
    }
  </style>
</head>

<body>

  <div class="container-fluid">
    <div class="row">
      <div class="col-lg-2 col-sm-6 col-xs-4">Subject</div>
      <div class="col-lg-9 col-sm-6 col-xs-8">
        <div class="btn-group" id="group1" role="group" aria-label="...">
          <button type="button" id="subject1" class="button1 btn btn-default">English</button>
          <button type="button" id="subject2" class="button1 btn btn-default">Geography</button>
          <button type="button" id="subject3" class="button1 btn btn-default">History</button>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="col-lg-2 col-sm-6 col-xs-4">Class</div>
      <div class="col-lg-9 col-sm-6 col-xs-8">
        <div class="btn-group" id="group2" role="group" aria-label="...">
          <button type="button" id="class1" class="button2 btn btn-default">I</button>
          <button type="button" id="class2" class="button2 btn btn-default">II</button>
          <button type="button" id="class3" class="button2 btn btn-default">III</button>
        </div>
      </div>
    </div>
  </div>

  <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</body>

</html>

Upvotes: 0

Related Questions