I'm trying to get several buttons to vertically stretch to the size of the container, but I can't figure out how I did it before. I've tried all of the possibilities on https://getbootstrap.com/docs/4.0/utilities/flex/ (like align-items-stretch, align-self-stretch, align-content-stretch, but none seem to do anything for single column vertical stretching, at least how I implemented them. How is it done? Thanks!
(https://codepen.io/jasonws/pen/poyYMpz)
<div class="container mt-3">
<div class="d-flex align-content-stretch border" style="height:150px; width:200px; flex-direction: column">
<button type="button" class="btn btn-primary my-1">Flex item 1</button>
<button type="button" class="btn btn-primary my-1">Flex item 2</button>
<button type="button" class="btn btn-primary my-1">Flex item 3</button>
</div>
</div>
Just remove the other things from your d-flex class
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container mt-3">
<div class="border" style="display: grid">
<button type="button" class="btn btn-primary my-1 m-2">Flex item 1</button>
<button type="button" class="btn btn-primary my-1 m-2 ">Flex item 2</button>
<button type="button" class="btn btn-primary my-1 m-2 ">Flex item 3</button>
</div>
</div>
Related
I need to have multiples divs on a page, each one one with 3 buttons that hide and show content inside of each div. The objective is exactly the same in both divs but what is happening is that when i press a button on the first div it also triggers the action on the other divs. How can i fix this? My idea is to have, for example, a unique id per div that allows me to use the same buttons across the page multiples times without having to repeat the JS code.
This is my initial code, and i want to be able to add something that i can use the buttons but only triggers inside the div their in.
Hope someone can point me in the right direction.
$('.descontoBTN').on('click', function () {
$(".pacote div").hide()
$(".desconto").show()
$('.descontoBTN').addClass('active')
$('.mensalidadeBTN').removeClass('active')
$('.tvBTN').removeClass('active')
});
$('.mensalidadeBTN').on('click', function () {
$(".pacote div").hide()
$(".mensalidade").show()
$('.descontoBTN').removeClass('active')
$('.mensalidadeBTN').addClass('active')
$('.tvBTN').removeClass('active')
});
$('.tvBTN').on('click', function () {
$(".pacote div").hide()
$(".tv").show()
$('.descontoBTN').removeClass('active')
$('.mensalidadeBTN').removeClass('active')
$('.tvBTN').addClass('active')
});
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<div class="row">
<div class="col-12" id="pack1">
<div class="pacote px-4 pt-4 pb-1">
<div class="desconto">
<h4><strong>TITLE1</strong></h4>
<h6><del>€99,99/mês</del></h6>
<h3>€93,99<span>/mês</span></h3>
</div>
<div class="mensalidade" style="display:none;">
<h4><strong>TITLE2</strong></h4>
<h6>1 Mensalidade</h6>
<h3>€95,99<span>/mês</span></h3>
</div>
<div class="tv" style="display:none;">
<h4><strong>TITLE3</strong></h4>
<h6>TV 32"</h6>
<h3>€95,99<span>/mês</span></h3>
</div>
</div>
<div class="ofertas px-4 pb-1">
<div class="btn-group d-flex gap-2" role="group">
<button type="button" class="btn btn-dark w-100 active descontoBTN">Desconto €3/mês</button>
<button type="button" class="btn btn-dark w-100 mensalidadeBTN">1 Mensalidade</button>
<button type="button" class="btn btn-dark w-100 tvBTN">TV 32"</button>
</div>
</div>
</div>
<div class="col-12" id="pack2">
<div class="pacote px-4 pt-4 pb-1">
<div class="desconto">
<h4><strong>TITLE1</strong></h4>
<h6><del>€89,99/mês</del></h6>
<h3>€83,99<span>/mês</span></h3>
</div>
<div class="mensalidade" style="display:none;">
<h4><strong>TITLE2</strong></h4>
<h6>2 Mensalidade</h6>
<h3>€195,99<span>/mês</span></h3>
</div>
<div class="tv" style="display:none;">
<h4><strong>TITLE3</strong></h4>
<h6>TV 32"</h6>
<h3>€295,99<span>/mês</span></h3>
</div>
</div>
<div class="ofertas px-4 pb-1">
<div class="btn-group d-flex gap-2" role="group">
<button type="button" class="btn btn-dark w-100 active descontoBTN">Desconto €3/mês</button>
<button type="button" class="btn btn-dark w-100 mensalidadeBTN">1 Mensalidade</button>
<button type="button" class="btn btn-dark w-100 tvBTN">TV 32"</button>
</div>
</div>
</div>
<div class="col-12" id="pack3">
<div class="pacote px-4 pt-4 pb-1">
<div class="desconto">
<h4><strong>TITLE1</strong></h4>
<h6><del>€199,99/mês</del></h6>
<h3>€193,99<span>/mês</span></h3>
</div>
<div class="mensalidade" style="display:none;">
<h4><strong>TITLE2</strong></h4>
<h6>1 Mensalidade</h6>
<h3>€95,99<span>/mês</span></h3>
</div>
<div class="tv" style="display:none;">
<h4><strong>TITLE3</strong></h4>
<h6>TV 32"</h6>
<h3>€95,99<span>/mês</span></h3>
</div>
</div>
<div class="ofertas px-4 pb-1">
<div class="btn-group d-flex gap-2" role="group">
<button type="button" class="btn btn-dark w-100 active descontoBTN">Desconto €3/mês</button>
<button type="button" class="btn btn-dark w-100 mensalidadeBTN">1 Mensalidade</button>
<button type="button" class="btn btn-dark w-100 tvBTN">TV 32"</button>
</div>
</div>
</div>
</div>
</div>
You can reduce the amount of repeated code by creating an eventHandler to handle all button clicks.
Updated
I have adjusted the demo to use the HTML added to the question. I am not sure if I have capture all your requirements but the amount of code duplication has been reduced.
See demo below
$('.ofertas button').on('click', function() {
// find closest parent 'group'
let columnGroupElementId = $(this).closest('div.col-12').attr('id');
let elementIdSelector = '#' + columnGroupElementId
// hide all .pacote divs within it
$(elementIdSelector).find(".pacote div").hide();
// remove class from all buttons in it
// the line below may or may not be needed, I am not sure of your requirements
$(this).closest(".ofertas").find('button').removeClass('active');
$(this).addClass('active');
// get a list of classes for selected button
var classList = $(this).attr('class').split(/\s+/);
var classNameToShow = '';
// get the value of the class name that ends with BTN and use it as the class name to show
$.each(classList, function(index, item) {
var indexOfBtn = item.indexOf('BTN');
if (indexOfBtn >= 0) {
classNameToShow = item.substring(0, indexOfBtn);
//console.log('-'+classNameToShow+'-');
}
});
// show only the child of the selected one
$(elementIdSelector).find("div." + classNameToShow).show();
});
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<div class="row">
<div class="col-12" id="pack1">
<div class="pacote px-4 pt-4 pb-1">
<div class="desconto">
<h4><strong>TITLE1</strong></h4>
<h6><del>€99,99/mês</del></h6>
<h3>€93,99<span>/mês</span></h3>
</div>
<div class="mensalidade" style="display:none;">
<h4><strong>TITLE2</strong></h4>
<h6>1 Mensalidade</h6>
<h3>€95,99<span>/mês</span></h3>
</div>
<div class="tv" style="display:none;">
<h4><strong>TITLE3</strong></h4>
<h6>TV 32"</h6>
<h3>€95,99<span>/mês</span></h3>
</div>
</div>
<div class="ofertas px-4 pb-1">
<div class="btn-group d-flex gap-2" role="group">
<button type="button" class="btn btn-dark w-100 active descontoBTN" data-value="desconto">
Desconto €3/mês
</button>
<button type="button" class="btn btn-dark w-100 mensalidadeBTN" data-value="mensalidade">
1 Mensalidade
</button>
<button type="button" class="btn btn-dark w-100 tvBTN" data-value="tv">
TV 32"
</button>
</div>
</div>
</div>
<div class="col-12" id="pack2">
<div class="pacote px-4 pt-4 pb-1">
<div class="desconto">
<h4><strong>TITLE1</strong></h4>
<h6><del>€89,99/mês</del></h6>
<h3>€83,99<span>/mês</span></h3>
</div>
<div class="mensalidade" style="display:none;">
<h4><strong>TITLE2</strong></h4>
<h6>2 Mensalidade</h6>
<h3>€195,99<span>/mês</span></h3>
</div>
<div class="tv" style="display:none;">
<h4><strong>TITLE3</strong></h4>
<h6>TV 32"</h6>
<h3>€295,99<span>/mês</span></h3>
</div>
</div>
<div class="ofertas px-4 pb-1">
<div class="btn-group d-flex gap-2" role="group">
<button type="button" class="btn btn-dark w-100 active descontoBTN">Desconto €3/mês</button>
<button type="button" class="btn btn-dark w-100 mensalidadeBTN">1 Mensalidade</button>
<button type="button" class="btn btn-dark w-100 tvBTN">TV 32"</button>
</div>
</div>
</div>
<div class="col-12" id="pack3">
<div class="pacote px-4 pt-4 pb-1">
<div class="desconto">
<h4><strong>TITLE1</strong></h4>
<h6><del>€199,99/mês</del></h6>
<h3>€193,99<span>/mês</span></h3>
</div>
<div class="mensalidade" style="display:none;">
<h4><strong>TITLE2</strong></h4>
<h6>1 Mensalidade</h6>
<h3>€95,99<span>/mês</span></h3>
</div>
<div class="tv" style="display:none;">
<h4><strong>TITLE3</strong></h4>
<h6>TV 32"</h6>
<h3>€95,99<span>/mês</span></h3>
</div>
</div>
<div class="ofertas px-4 pb-1">
<div class="btn-group d-flex gap-2" role="group">
<button type="button" class="btn btn-dark w-100 active descontoBTN">Desconto €3/mês</button>
<button type="button" class="btn btn-dark w-100 mensalidadeBTN">1 Mensalidade</button>
<button type="button" class="btn btn-dark w-100 tvBTN">TV 32"</button>
</div>
</div>
</div>
</div>
</div>
You need to leverage $(this). This is just a basic example of usage:
$('.myButtonClass').on('click', function(){
$('.myButtonClass').not(this).hide()
$(this).parent().find('.otherTargetedClass').addClass('active')
$(this).siblings().fadeOut('slow')
$(this).parent().show()
})
Also, it looks like you are using the id attribute the same as the class attribute. Id's are unique and there should never be duplicates of the same id on a page. Classes can be used multiple times on a page.
I need to design buttons (I'm using bootstrap) in the Blazor project. I have 2 button groups on one Razor page. 3 to 4 buttons in each group. I want to use Javascript to change the color button which is onclick function.
User will click any button from group 1 (when clicking change color to green) and click the button from group 2 without deselecting button from group 1.
The onclick call need to be here <div class="btn-group"> because I already have onclick on my button<button type="button" class="btn btn-primary" #onclick="() => UpdateTheChart(13)">#Language.T37</button>
I have tried :focus in CSS but only 1 button can be select.
This is my code, I take out the onclick in button for test purposes.
.btn:hover {
font-weight: bold;
color: white;
/*green*/
background-color: #85c995;
}
<div class="row">
<div class="column" style="width:30%">
<div class="btn-group">
<button type="button" class="btn btn-primary" style="outline-color:red; ">Sunday</button>
<button type="button" class="btn btn-primary">Tuesday</button>
<button type="button" class="btn btn-primary">Friday</button>
</div>
</div>
<div class="column" style="width:70%">
<div class="btn-group">
<button type="button" class="btn btn-primary">9 am</button>
<button type="button" class="btn btn-primary">2 pm</button>
<button type="button" class="btn btn-primary">5 pm</button>
<button type="button" class="btn btn-primary">8 pm</button>
</div>
</div>
</div>
function switch_to_green(el){
//Check clicked button is on the same group
if(el.parentElement.getAttribute("data-group") == 1){
//Get all buttons of group 1
let g1_buttons = document.querySelectorAll('#group1 .btn');
for(let i =0; i<g1_buttons.length;i++){
//Remove green color from unselected buttons
g1_buttons[i].classList.remove('green');
}
}else{
//Get all buttons of group 2
let g2_buttons = document.querySelectorAll('#group2 .btn');
for(let i =0; i<g2_buttons.length;i++){
//Remove green color from unselected buttons
g2_buttons[i].classList.remove('green');
}
}
//Add green color to the only selected one
el.classList.add('green');
}
.btn:hover {
font-weight: bold;
color: white;
/*green*/
background-color: #85c995;
}
.btn.green{
color: white;
/*green*/
background-color: #85c995;
}
<div class="row">
<div class="column" style="width:30%">
<div class="btn-group" id="group1" data-group="1">
<button type="button" class="btn btn-primary" style="outline-color:red; " onclick="switch_to_green(this)">Sunday</button>
<button type="button" class="btn btn-primary" onclick="switch_to_green(this)">Tuesday</button>
<button type="button" class="btn btn-primary" onclick="switch_to_green(this)">Friday</button>
</div>
</div>
<div class="column" style="width:70%">
<div class="btn-group" id="group2" data-group="2">
<button type="button" class="btn btn-primary" onclick="switch_to_green(this)">9 am</button>
<button type="button" class="btn btn-primary" onclick="switch_to_green(this)">2 pm</button>
<button type="button" class="btn btn-primary" onclick="switch_to_green(this)">5 pm</button>
<button type="button" class="btn btn-primary" onclick="switch_to_green(this)">8 pm</button>
</div>
</div>
</div>
I'm trying out bootstrap and seem to be stuck. I have some radio buttons but what I want is it to be outlined when not selected and solid or "btn-primary" when it is selected.
I can attempt to do wit with JavaScript but i might have to give each an individual ID and go from there. I'm sure there is a better way with JavaScript
<div class="row">
<div class="col offset-md-2">
<div class="form-group">
<div class="btn-group">
<button type="button" class="btn btn-outline-secondary" id="zone1">Zone 1</button>
<button type="button" class="btn btn-outline-secondary" id="zone2">Zone 2</button>
<button type="button" class="btn btn-outline-secondary" id="zone3">Zone 3</button>
<button type="button" class="btn btn-outline-secondary" id="zone4">Zone 4</button>
<button type="button" class="btn btn-outline-secondary" id="zone5">Zone 5</button>
<button type="button" class="btn btn-outline-secondary" id="zone6">Zone 6</button>
<button type="button" class="btn btn-outline-secondary" id="bush">Bush</button>
</div>
</div>
</div>
</div>
If you want to achieve this with pure JavaScript, you could bind a click handler to each element. The handler would modify the element's class when the button was clicked:
var buttons = document.getElementsByTagName("button");
for (var i = 0; i < buttons.length; i++) {
buttons[i].onclick = function() {
this.classList.remove('btn-outline-secondary');
this.classList.add('btn-primary');
}
}
.btn-outline-secondary {border: 1px solid #aaa;}
.btn-primary {border: 1px solid blue; background: blue; color: white;}
<div class="row">
<div class="col offset-md-2">
<div class="form-group">
<div class="btn-group">
<button type="button" class="btn btn-outline-secondary" id="zone1">Zone 1</button>
<button type="button" class="btn btn-outline-secondary" id="zone2">Zone 2</button>
<button type="button" class="btn btn-outline-secondary" id="zone3">Zone 3</button>
<button type="button" class="btn btn-outline-secondary" id="zone4">Zone 4</button>
<button type="button" class="btn btn-outline-secondary" id="zone5">Zone 5</button>
<button type="button" class="btn btn-outline-secondary" id="zone6">Zone 6</button>
<button type="button" class="btn btn-outline-secondary" id="bush">Bush</button>
</div>
</div>
</div>
</div>
See these two answers for more information on binding events without a framework and changing the class of elements.
An alternative
If you're open to using a library such as jQuery, binding the event handler could be a lot simpler. With the jQuery library included, your code would be:
$("button").click(function(){ /*apply new class using .removeClass() and .addClass() methods*/ });
See the jQuery documentation for more information on .click().
var button = document.getElementsByTagName("button");
for (var i = 0; i < button.length; i++) {
button[i].onmouseover = function() {
this.classList.remove('btn-outline-secondary');
this.classList.add('btn-primary');
}
button[i].onmouseout = function() {
this.classList.remove('btn-primary');
this.classList.add('btn-outline-secondary');
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<body>
<div class="caontainer">
<div class="row">
<div class="col offset-md-2">
<div class="form-group">
<div class="btn-group">
<button type="button" class="btn btn-outline-secondary" id="zone1">Zone 1</button>
<button type="button" class="btn btn-outline-secondary" id="zone2">Zone 2</button>
<button type="button" class="btn btn-outline-secondary" id="zone3">Zone 3</button>
<button type="button" class="btn btn-outline-secondary" id="zone4">Zone 4</button>
<button type="button" class="btn btn-outline-secondary" id="zone5">Zone 5</button>
<button type="button" class="btn btn-outline-secondary" id="zone6">Zone 6</button>
<button type="button" class="btn btn-outline-secondary" id="bush">Bush</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Hope it'll help :)
Here I have tried to show the buttons in a circular shape using bootstrap, CSS, and HTML5. I want it in exact circular shape. Friends, can you please fix it. Please try to help me I want it in responsive too. Below is my code kindly go through it. Here I have tried to show the buttons in a circular shape using bootstrap, CSS, and HTML5.
<div class="col-md-12">
<div class="row" align="center">
<div class="col-md-6">
<button type="button" class="btn btn-info btn-circle btn-xl"><i class="">Product
identification</i></button>
</div>
<div class="col-md-6">
<button type="button" class="btn btn-info btn-circle btn-xl"><i class="">Cataloguing, listing <br> and pricing</i></button>
</div>
</div>
</div>
<div class="col-md-12">
<div class="row" align="center">
<div class="col-md-6">
</div>
<div class="col-md-6">
<button type="button" class="btn btn-info btn-circle btn-xl"><i class="">Cataloguing, listing <br> and pricing</i></button>
</div>
</div>
</div>
<div class="col-md-12">
<div class="row" align="center">
<div class="col-md-4">
<button type="button" class="btn btn-info btn-circle btn-xl"><i class="">Front ending <br> end customers</i></button>
</div>
<div class="col-md-4">
<button type="button" class="btn btn-info btn-circle btn-xl"><i class="" style="font-size:17px;"><b>ZRPL</b></i></button>
</div>
<div class="col-md-4">
<button type="button" class="btn btn-info btn-circle btn-xl"><i class="">Enhance product <br> visibility and deals</i></button>
</div>
</div>
</div>
<div class="col-md-12">
<div class="row" align="center">
<div class="col-md-6">
<button type="button" class="btn btn-info btn-circle btn-xl"><i class="">Returns and ARB management</i></button>
</div>
<div class="col-md-6">
<button type="button" class="btn btn-info btn-circle btn-xl"><i class="">Logistical
support</i></button>
</div>
</div>
</div>
Add this css style in your button. It will make a circular shape on you button. you can give any width and height value on your button. just make sure that height and width should have same value.
width:170px;
height:170px;
border-radius:50%
I have wrote a jQuery to change the button colour to red when some one clicks on it. But that is only work with the first panel but its not working for the rest of the panels. In the first set of button it works but not only for everything. This is the jQuery part.
function DurationOnClick(element){
var buttonId = element.id;
var buttonName = element.name;
var buttonIds = ["1Hour", "30Min", "1Day" , "1Week", "1Month"];
var chartType = $('#chartType').val();
var idValue = $('#IdValue').val();
//after user click the option here we are changing the option black to red.
$(buttonIds).each(function(i, e) {
$('#'+e+'[name='+buttonName+']').css("color", "");
});
$('#'+buttonId+'[name='+buttonName+']').css("color", "Blue"); `
The html code is like this :
<div class="row">
<div class="col-md-6">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title" style="color:Black">Memory Consumption Average</h3>
</div>
<div class="panel-body">
<button class="btn btn-default btn-xs" name="MemoryConsumption" id="30Min" onclick="return DurationOnClick(this)">30 mins</button>
<button class="btn btn-default btn-xs" name="MemoryConsumption" id="1Hour" style="color:Red" onclick="return DurationOnClick(this)">1 hour</button>
<button class="btn btn-default btn-xs" name="MemoryConsumption" id="1Day" onclick="return DurationOnClick(this)">1 day</button>
<button class="btn btn-default btn-xs" name="MemoryConsumption" id="1Week" onclick="return DurationOnClick(this)">1 week</button>
<button class="btn btn-default btn-xs" name="MemoryConsumption" id="1Month" onclick="return DurationOnClick(this)">1 month</button>
<div class="container content" style="width: 600px;">
<div class="row text-center" id="chart3">
</div>
</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title" style="color:Black">Load Average</h3>
</div>
<div class="panel-body">
<button class="btn btn-default btn-xs" name="LoadAverage" id="30Min" onclick="return DurationOnClick(this)">30 mins</button>
<button class="btn btn-default btn-xs" name="LoadAverage" id="1Hour" style="color:Red" onclick="return DurationOnClick(this)">1 hour</button>
<button class="btn btn-default btn-xs" name="LoadAverage" id="1Day" onclick="return DurationOnClick(this)">1 day</button>
<button class="btn btn-default btn-xs" name="LoadAverage" id="1Week" onclick="return DurationOnClick(this)">1 week</button>
<button class="btn btn-default btn-xs" name="LoadAverage" id="1Month" onclick="return DurationOnClick(this)">1 month</button>
<div class="container content" style="width: 600px;">
<div class="row text-center" id="chart2">
</div>
</div>
</div>
</div>
</div>
</div>
After removing the first panel the colour changing will happen for the next immediate chart but the charts below that one the changing colour is not happening. Any help to figure out the issue will be really appreciated.
Please use the below code. This will work perfect with your case:-
function DurationOnClick(ref) {
var buttonName = $(ref).attr("name");
$("button[name=" + buttonName + "]").each(function () {
$(this).css("color", "");
});
$(ref).css("color", "Blue");
}
As already explained the problem is you have duplicate IDs, the id-selector will select only the first element with the id so your code will always select the first set of elements.
But a more jQuery-ish solution will be use jQuery event handlers along with class(duration) to group them like
$('button.duration').click(function() {
$(this).addClass('selected').siblings('.selected').removeClass('selected');
})
.btn.btn-default.selected {
color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/css/bootstrap.css" />
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/css/bootstrap-theme.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/js/bootstrap.js"></script>
<div class="row">
<div class="col-md-6">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title" style="color:Black">Memory Consumption Average</h3>
</div>
<div class="panel-body">
<button class="btn btn-default btn-xs duration" name="MemoryConsumption" data-id="30Min">30 mins</button>
<button class="btn btn-default btn-xs duration selected" name="MemoryConsumption" data-id="1Hour">1 hour</button>
<button class="btn btn-default btn-xs duration" name="MemoryConsumption" data-id="1Day">1 day</button>
<button class="btn btn-default btn-xs duration" name="MemoryConsumption" data-id="1Week">1 week</button>
<button class="btn btn-default btn-xs duration" name="MemoryConsumption" data-id="1Month">1 month</button>
<div class="container content" style="width: 600px;">
<div class="row text-center" id="chart3">
</div>
</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title" style="color:Black">Load Average</h3>
</div>
<div class="panel-body">
<button class="btn btn-default btn-xs duration" name="LoadAverage" data-id="30Min">30 mins</button>
<button class="btn btn-default btn-xs duration selected" name="LoadAverage" data-id="1Hour">1 hour</button>
<button class="btn btn-default btn-xs duration" name="LoadAverage" data-id="1Day">1 day</button>
<button class="btn btn-default btn-xs duration" name="LoadAverage" data-id="1Week">1 week</button>
<button class="btn btn-default btn-xs duration" name="LoadAverage" data-id="1Month">1 month</button>
<div class="container content" style="width: 600px;">
<div class="row text-center" id="chart2">
</div>
</div>
</div>
</div>
</div>
</div>
You have duplicated ID. Your code is ok, but you did it wrong.
id attribute is considered unique.
classattribute is considered multiple.
You have put several same id, but CSS and JS are looking only for ONE, so they process the first (only) and leave.
Change id to class.
Example: class="30mins" will turn redall the "30mins" buttons.
Do it for every group you want to turn red on click.
You should not have duplicate ID in the HTML form. Consider using the first set of IDs only.
Apparently you cant have numbers as the first character of an ID or class for your css to apply. If you#re applying style to your 30min 1hour etc, you should consider renaming them. I'm not sure if this conflicts with JS as well. See this example:
<div class="char">char</div>
<div class="char1">char1</div>
<div class="1char">1char</div>
<div class="1111">1111</div>
JSFiddle