How to create group of buttons in a page ?

Last Updated : 10 Feb, 2022

In this article, we will learn How to create a group of buttons on the page. This can be done by setting the ‘data-role‘ attribute to controlgroup.

controlgroup: Groups multiple buttons and other widgets into one visual set, Visually integrate multiple button-styled inputs of a single type into a group.

data-mini true | false – Compact-sized version for all items in the controlgroup.
data-type horizontal | vertical – For horizontal or vertical item alignment.

Syntax:

<div data-role="controlgroup">
    <a href="#" data-role="button">button 1</a>
    <a href="#" data-role="button">button 2</a>
    <a href="#" data-role="button">button 2</a>
</div>

CDN link:

<link rel=”stylesheet” href=”https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css” />
<script src=”https://code.jquery.com/jquery-1.11.1.min.js”></script>
<script src=”https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js”></script>

Approach:

Firstly, add the above jQuery and JQuery UI CDN links to the script or download them to your local machine. Create a DIV tag and set the data-role attribute to controlgroup. In DIV container create 3 anchor tags and set the data-role attribute to a button.

Change the border color of buttons using the following code

$("a").css("border-color", "black")

Example 1: This example illustrates the group of buttons as a vertical list.

HTML

<!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.0"> 
    <link rel="stylesheet" 
          href= 
"https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" /> 
    <script src= 
"https://code.jquery.com/jquery-1.11.1.min.js"> 
    </script> 
    <script src= 
"https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"> 
    </script> 
</head> 
<body> 
    <div data-role="controlgroup">  
        <a href="#" data-role="button">button 1</a>  
        <a href="#" data-role="button">button 2</a> 
        <a href="#" data-role="button">button 2</a>  
    </div> 
  
    <script> 
        $("a").css("border-color", "black") 
    </script> 
</body> 
  
</html>

Output:

Example 2: This example illustrates the group of buttons as a horizontal list. By setting the data-type attribute to horizontal we can group buttons as horizontal lists.

HTML

<!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.0"> 
    <link rel="stylesheet" 
          href= 
"https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" /> 
    <script src= 
"https://code.jquery.com/jquery-1.11.1.min.js"> 
    </script> 
    <script src= 
"https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"> 
    </script> 
</head> 
  
<body> 
    <div data-role="controlgroup" data-type="horizontal"> 
         <a href="#" data-role="button">button 1</a> 
         <a href="#" data-role="button">button 2</a>  
         <a href="#" data-role="button">button 2</a>  
    </div> 
  
    <script> 
        $("a").css("border-color", "black") 
    </script> 
</body> 
  
</html>