Develop Reference

How to add & remove active state in bootstrap btn

function openclass(className) {
var i;
var x = document.getElementsByClassName("standard");
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
document.getElementById(className).style.display = "block";
}
<div class="page-header">
<button type="button" class="btn btn-primary active" aria-pressed="true" onclick="openclass('viewclass')">View Class</button>
<button type="button" class="btn btn-primary" aria-pressed="true" onclick="openclass('addclass')">Add Class</button>
<button type="button" class="btn btn-primary" onclick="openclass('addsection')">Add Section</button>
<button type="button" class="btn btn-primary" onclick="openclass('assignteacher')">Assign Teacher</button>
</div>
<div id="viewclass" class="standard">
<h1>View Class</h1>
</div>
<div id="addclass" class="standard" style="display:none">
<h2>Add Class</h2>
</div>
<div id="addsection" class="standard" style="display:none">
<h2>add section</h2>
</div>
<div id="assignteacher" class="standard" style="display:none">
<h2>assign teacher</h2>
</div>
With first button already active, I want to make every other button active on click and and remove older active, I know it can be done through js but really can't seem to figure it out

You just need to add the clickedbutton inside the onclick arguments. You can do that by using the this keyword. So onclick=openClass(this, 'className')
And then, on click, remove all the ' active classes ' and add the active class to the clickedButton
function openclass(clickedBtn, className) {
var i;
var x = document.getElementsByClassName("standard");
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
document.getElementById(`${className}`).style.display = "block";
// add remove active class
document.querySelectorAll('.btn').forEach(btn => btn.classList.contains('active') && btn.classList.remove('active'))
clickedBtn.classList.add('active')
}
.btn.active {
background:Red;
}
<div class="page-header">
<button type="button" class="btn btn-primary active" aria-pressed="true" onclick="openclass(this,'viewclass')">View Class</button>
<button type="button" class="btn btn-primary" aria-pressed="true" onclick="openclass(this, 'addclass')">Add Class</button>
<button type="button" class="btn btn-primary" onclick="openclass(this,'addsection')">Add Section</button>
<button type="button" class="btn btn-primary" onclick="openclass(this,'assignteacher')">Assign Teacher</button>
</div>
<div id="viewclass" class="standard">
<h1>View Class</h1>
</div>
<div id="addclass" class="standard" style="display:none">
<h2>Add Class</h2>
</div>
<div id="addsection" class="standard" style="display:none">
<h2>add section</h2>
</div>
<div id="assignteacher" class="standard" style="display:none">
<h2>assign teacher</h2>
</div>

How use the same function that have different ids and a button to use the same function

I am using the following code:
Here is the HTML for the navigation:
<li>Open... <p class="shortcut">(Ctrl + O)</p></li>
Here is the window that has the button:
<div class="panel panel-default ui-draggable" style="visibility: hidden" id="openDocument">
<div class="panel-heading ui-draggable-handle" id="openDocumentHandle">Open File <button class="btn btn-default btn btn-default btn-sm windowButtons" id="openDocumentClose"><i class="fa fa-close"></i></button></div>
<div class="panel-body">
<form>
<div class="form-group">
<label for="filesToOpen">Choose File to Open</label>
<select class="form-control" id="filesToOpen"></select>
</div>
<button type="button" class="btn btn-default btn-block" id="openBtn" onclick="filesystem.loadFloorplan()">Open File</button>
</form>
</div>
Here is the JS section:
var ui = new fp.FloorplanUI(myFloorplan, "ui", "myFloorplan", fp.GUI_STATE);
function floorplanUIHideShow(id, div) {
document.getElementById(id).addEventListener('click', function(e) {
ui.hideShow(div);
e.preventDefault();
});
}
floorplanUIHideShow('showOpenWindow', 'openDocument', 'openDocumentClose');
Each id has a button that needs to use the same ui.HideShow(); function.
I am unable to get this to work..
Any help would be great.
Thanks-

swap div when click button jquery

How can I use jquery to swap div , I want to if i click botton it'll desplay lay-out-sw and if I click en it should swap
In my html
<div class="layout-sw">
sw
</div>
<div class="layout-en">
en
</div>
<div class="btn-group" role="group" aria-label="...">
<button type="button" class="btn btn-info btn-language btn-sw">SW</button>
<button type="button" class="btn btn-default btn-language btn-en">EN</button>
</div>
I use this jquery but i got some error
<script type="text/javascript">
$(function() {
$('.layout-en').hide();
$('.btn-language').on('click',function(e){
$('.btn-language').removeClass('btn-info').addClass('btn-default');
$(this).removeClass('btn-default').addClass('btn-info');
$('.layout-sw,.layout-en').hide();
($(this).text()=='SW') ? $('.layout-sw').show() : $('.layout-en').show();
})
$('.btn-on-off').on('click',function(e){
$(this).closest('.btn-on-off-widget').find('.btn-value').val($(this).attr('value'));
$(this).next('.btn-on-off').removeClass('btn-primary btn-gray').addClass('btn-default');
$(this).prev('.btn-on-off').removeClass('btn-primary btn-gray').addClass('btn-default');
if($(this).attr('value')==0){
$(this).removeClass('btn-default').addClass('btn-gray');
}else{
$(this).removeClass('btn-default').addClass('btn-primary');
}
})
});
</script>

You can simply use show() and hide() function of jQuery as below.
$(document).ready(function() {
$('.layout-en').hide();
$('.btn-sw').click(function() {
$('.layout-sw').show();
$('.layout-en').hide();
});
$('.btn-en').click(function() {
$('.layout-en').show();
$('.layout-sw').hide();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="layout-sw">
sw
</div>
<div class="layout-en">
en
</div>
<div class="btn-group" role="group" aria-label="...">
<button type="button" class="btn btn-info btn-language btn-sw">SW</button>
<button type="button" class="btn btn-default btn-language btn-en">EN</button>
</div>

JavaScript onclick() event won't execute

I want to save the name of a button when button is pressed.
Than I show a modal and redirect to a page using the button name.
JavaScript:
function onClickBtnRemove()
{
deviceIdName = this.name;
}
function onClickBtnConfirmRemove() {
window.location.href = "/Home/Remove/" + deviceIdName;
}
html:
<script>
var deviceIdName;
</script>
<button class="btn btn-default" type="button" name="123" onclick="onClickBtnRemove()" data-toggle="modal" data-target="#remove" >
<span class="glyphicon glyphicon-trash"></span>
</button>
<div class="modal fade" id="remove" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-body">
<h4>Are you sure you want to remove this device?</h4>
<div class="modal-footer">
<button type="button" class="btn btn-primary active" data-dismiss="modal" onclick="onClickBtnConfirmRemove()">Remove</button>
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
</div>
</div>
</div>
</div>

css only appends to the first panel

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