We Keep Coding

Count the number of checked check-boxes in multiple panels and show the relevant number in the correct panel using jQuery/JavaScript

I have multiple panels (class="panel-section) and I was to count the number of checked check-boxes in each and display this number in each panel, and have this number update when there is a check-box change.
This is my HTML code:
<div class="panel-section">
<!-- Layer Group Heading -->
<div class="panel-section-top">
<a href="javascript:;" class="expand-toggle">Group 1
<span id="layer_group_1_count_checkboxes" class="badge"></span></a>
</div> <!-- end (Group Name) -->
<div class="panel-section-main" id="layer_group_1">
<!-- Layer -->
<div class="layer">
<div class="list-group" style="margin-bottom: 0px;">
<label class="checkbox-inline switch-button" for="visible10">
<input type="checkbox" name="layer_10" class="visible" id="visible10">
<div class="switch-button-background">
<div class="switch-button-button"></div>
</div>
</label>
<h4>Layer 1</h4>
</div>
</div> <!-- end .layer -->
<!-- Layer -->
<div class="layer">
<div class="list-group" style="margin-bottom: 0px;">
<label class="checkbox-inline switch-button" for="visible11">
<input type="checkbox" name="layer_11" class="visible" id="visible11">
<div class="switch-button-background">
<div class="switch-button-button"></div>
</div>
</label>
<h4>Layer 2</h4>
</div>
</div> <!-- end .layer -->
</div> <!-- end .layer-main -->
</div> <!-- end .panel-section layer_group_1 -->
<div class="panel-section">
<!-- Layer Group Heading -->
<div class="panel-section-top">
<a href="javascript:;" class="expand-toggle">Group 2
<span id="layer_group_2_count_checkboxes" class="badge"></span></a>
</div> <!-- end (Group Name) -->
<div class="panel-section-main" id="layer_group_2">
<!-- Layer -->
<div class="layer">
<div class="list-group" style="margin-bottom: 0px;">
<label class="checkbox-inline switch-button" for="visible20">
<input type="checkbox" name="layer_20" class="visible" id="visible20">
<div class="switch-button-background">
<div class="switch-button-button"></div>
</div>
</label>
<h4>Layer 1</h4>
</div>
</div> <!-- end .layer -->
<!-- Layer -->
<div class="layer">
<div class="list-group" style="margin-bottom: 0px;">
<label class="checkbox-inline switch-button" for="visible11">
<input type="checkbox" name="layer_21" class="visible" id="visible21">
<div class="switch-button-background">
<div class="switch-button-button"></div>
</div>
</label>
<h4>Layer 2</h4>
</div>
</div> <!-- end .layer -->
</div> <!-- end .layer-main -->
</div> <!-- end .panel-section layer_group_2 -->
And I can get the number of total check-boxes that are active using the following:
//Get the number of total layers active
$(document).ready(function () {
$("input[type=checkbox]").each(function () {
$(this).change(updateCount);
});
updateCount();
function updateCount () {
var count = $("input[type=checkbox]:checked").size();
$("#count_checkboxes").text(count);
$("#status").toggle(count > 0);
};
});
But instead of just "#count_checkboxes" I want the id from the panel-section-main div to join with it so I can pass the number to the right section (eg "#layer_group_1_count_checkboxes").
I may not be going about this the best way so also open to better ideas people may have.
This is an example of the output I want:

When trying to genericise content, aka. DRY (Don't Repeat Yourself) it up, you should avoid id attributes as they are the opposite of what you need. Instead target elements by their classes so you can deal with them by their behaviour instead of targeting them directly.
As such you can achieve what you need when a checkbox is changed by looping through all the panels and finding the number of checked checkboxes and updating the .badge within that panel.
Also note that size() has been removed from the latest versions of jQuery. I'd suggest updating to jQuery 3.4 and using the length property instead. Try this:
jQuery(function($) {
$("input[type=checkbox]").on('change', updateCount);
updateCount();
function updateCount() {
$('.panel-section').each(function() {
var $panel = $(this);
var count = $panel.find(':checkbox:checked').length;
$panel.find('.badge').text(count);
});
};
});
.panel-section-main {
border: 1px solid #CCC;
}
a {
text-decoration: none;
}
.badge {
background-color: #C00;
border-radius: 50%;
padding: 5px 9px;
color: #FFF;
}
.panel-section-main .layer .list-group {
margin-bottom: 0px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<div class="panel-section">
<div class="panel-section-top">
<a href="#" class="expand-toggle">
Group 1
<span class="badge"></span>
</a>
</div>
<div class="panel-section-main">
<div class="layer">
<div class="list-group">
<label class="checkbox-inline switch-button">
<input type="checkbox" name="layer_10" class="visible" id="visible10">
<div class="switch-button-background">
<div class="switch-button-button"></div>
</div>
</label>
<h4>Layer 1</h4>
</div>
</div>
<div class="layer">
<div class="list-group">
<label class="checkbox-inline switch-button">
<input type="checkbox" name="layer_11" class="visible" id="visible11">
<div class="switch-button-background">
<div class="switch-button-button"></div>
</div>
</label>
<h4>Layer 2</h4>
</div>
</div>
</div>
</div>
<div class="panel-section">
<div class="panel-section-top">
<a href="#" class="expand-toggle">
Group 2
<span class="badge"></span>
</a>
</div>
<div class="panel-section-main">
<div class="layer">
<div class="list-group">
<label class="checkbox-inline switch-button" for="visible20">
<input type="checkbox" name="layer_20" class="visible" id="visible20">
<div class="switch-button-background">
<div class="switch-button-button"></div>
</div>
</label>
<h4>Layer 1</h4>
</div>
</div>
<div class="layer">
<div class="list-group">
<label class="checkbox-inline switch-button">
<input type="checkbox" name="layer_21" class="visible" id="visible21">
<div class="switch-button-background">
<div class="switch-button-button"></div>
</div>
</label>
<h4>Layer 2</h4>
</div>
</div>
</div>
</div>

whats the best way to control showing and hiding multiple charts and divs in a page

I am new in javascript,i have a page consist of different Card layouts and each card has its own chart or buttons or grids,some of them should be hidden by default and some of them should be hide or visible by click,since the page is growing by more demands ,controlling these hid/e/show is becoming a nightmare,i would like you tell me whats the best way to do this?for example i have a following div which has a chart:
<section style="width:100%;margin-top:2%;" >
<div id="btnCurrentStatID" class="card ShowHide" style="float:right;width:20%;height:350px;display:none;">
<div class="wrapper">
<div class="containerBtns" style="width:100%;float:right" >
<button type="button" id="btnErrorStat" class="btnsForCrew-Common "></button>
<button type="button" id="btnIdle" class="btnsForCrew-Common "></button>
<button type="button" id="btnService" class="btnsForCrew-Common "></button>
<button type="button" id="btnLinkDn" class="btnsForCrew-Common"></button>
<button type="button" id="btnDataIn" class="btnsForCrew-Common" ></button>
<button type="button" id="btnrepOff" class="btnsForCrew-Common"></button>
</div>
</div>
</div>
<div id="faultStatChartID" class="card ShowHide" >
<div id="chart">
</div>
</div>
<div id="pieChartID" class="card ShowHide">
<div id="pieChart"></div>
</div>
</section>
<section style="width:100%;float:left;margin-top:3%;" id="faultStatSubGroupsSec">
<div id="subcatNameChartSectionID" class="card" style="width:49%;float:left;display:none">
<div class="container">
<div id="subcatNameChart"></div>
</div>
</div>
<div id="subcatErrorChartSectionID" class="card" style="width:49%;float:right;display:none">
<div class="container">
<div id="subcatErrorChart"></div>
</div>
</div>
<div id="subCatIdnameSectionID" class="card" style="width:49%;float:left;display:none">
<div class="container">
<div id="subCatIdname"></div>
</div>
</div>
<div id="subCatITurNameSectionID" class="card"style="width:49%;float:right;display:none">
<div class="container">
<div id="subCatITurName"></div>
</div>
</div>
<div></div>
<div></div>
</section>
i gave it showhide class,and by default its hidden,when i click on filter button it will be visible,and other divs should be hidden,it this continues,imagine how many time i should do it and manage to control them all,
$(".ShowHide").css("display", "block");
$("#subcatNameChartSectionID").hide();
$("#subcatErrorChartSectionID").hide();
$("#subCatIdnameSectionID").hide();
$("#subCatITurNameSectionID").hide();

A way would be to use a class for hiding.
.hide {
display: none;
}
And a hideable class for accessing every item that should be able to be hidden. The class hide can be added to hide the element.
<div class="hideable">1 hideable</div>
jQuery offers methods for class manipulation:
$('.hideable').toggleClass('hide');
$('#unique4').removeClass('hide');
$('#unique5').addClass('hide');
Here is the full snippet code:
$('.hideable').toggleClass('hide');
$('#unique4').removeClass('hide');
$('#unique5').addClass('hide');
.hide {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="unique1" class="hideable">
1 hideable
</div>
<div id="unique2" class="hideable">
2 hideable
</div>
<div id="unique3" class="hideable hide">
3 hideable
</div>
<div id="unique4" class="hideable hide">
4 hideable
</div>
<div id="unique5" class="hide">
5 other
</div>

Expand / Show and hide div element in a listview

As you can see, is this a list view and my mission is when you click on an element / div then the div with the images expand / show. Now that is easy, even for a backend developer, but I would like to:
1. when I click again on the same element, then the element will hide.
2. When I click on another element, then the element that is already expand will hide and the other element that I click on, will expand / show.
I need Script and CSS for this please.
<div class="row">
#foreach(var post in CurrentPage.Children)
{
<div class="col-md-12">
<div class="content equal" onclick="showhide()">
<a href="#post.Url">
<div class="date">#post.CreateDate.ToLongDateString()</div>
<h2>#post.Name</h2>
<p>#Umbraco.Truncate(post.Introduction, 240, true)</p>
</a>
</div>
<div class="images(-expand)">
<img src="#post.Image" />
</div>
</div>
}
</div>

Try as follows.
$('.content.equal').click(function() {
$('.content.equal').not(this).next().slideUp();
$(this).next().slideToggle();
});
$('.content.equal a').click(function(event) {
event.preventDefault();
});
.images {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-12">
<div class="content equal">
<a href="#post.Url">
<div class="date">12-01-2017</div>
<h2>Name1</h2>
<p>#Umbraco.Truncate(post.Introduction, 240, true)</p>
</a>
</div>
<div class="images">
<img src="http://i164.photobucket.com/albums/u8/hemi1hemi/COLOR/COL9-6.jpg" />
</div>
</div>
<div class="col-md-12">
<div class="content equal">
<a href="#post.Url">
<div class="date">12-01-2017</div>
<h2>Name1</h2>
<p>#Umbraco.Truncate(post.Introduction, 240, true)</p>
</a>
</div>
<div class="images">
<img src="http://i164.photobucket.com/albums/u8/hemi1hemi/COLOR/COL9-6.jpg" />
</div>
</div>
<div class="col-md-12">
<div class="content equal">
<a href="#post.Url">
<div class="date">12-01-2017</div>
<h2>Name1</h2>
<p>#Umbraco.Truncate(post.Introduction, 240, true)</p>
</a>
</div>
<div class="images">
<img src="http://i164.photobucket.com/albums/u8/hemi1hemi/COLOR/COL9-6.jpg" />
</div>
</div>

Issue in opening modal over modal?

So I am trying to open modal over other modal which is not working. there is one link say "login" which opens up another modal for me. why this is happening ?
primary modal call from following
<ul class="one-page-menu" data-easing="easeInOutExpo" data-speed="1250" data-offset="160">
<li>Sign Up</li>
<li class="menu-item-emphasis"><div>Login</div></li>
</ul>
primary modal
<div class="modal1 mfp-hide" id="modal-get-started" >
<div class="block divcenter" style="background-color: #FFF; max-width: 500px;">
<div style="padding: 50px;">
<form name="reg_form" id="get-started-form" class="nobottommargin">
<div class="row clearfix">
<div class="col-sm-12">
<h3 class="font-body">Register for Free Trial</h3>
</div>
</div>
<button class="button button-rounded btn-block t400 center capitalize si-facebook si-colored noleftmargin norightmargin" ng-click="fbLogin()">Login with Facebook</button>
<button id="customGoogleBtn1" class="button button-rounded btn-block t400 center capitalize si-gplus si-colored nomargin">Login with Google</button>
<br>
<div style='padding-top: 30px;padding-left: 50px' ng-show ="errorAlreadyRegister">
<span style='color:red;x' >Seems already registered. <a ng-click= "closePopup()" href="#" > Log in </a> instead?</span>
</div>
</form>
</div>
</div>
</div>
wants to open on login link
<div class="modal1 mfp-hide" id="modal-login" >
<div class="block divcenter" style="background-color: #FFF; max-width: 400px;">
<div style="padding: 50px;">
<h3 class="font-body">Login to your Account</h3>
<form class="nobottommargin">
<div class="col_full">
<label class="font-body capitalize" for="login-form-modal-username">Username:</label>
<input type="text" id="login-form-modal-username" name="login-form-modal-username" value="" class="form-control" />
</div>
<div class="col_full">
<label class="font-body capitalize" for="login-form-modal-password">Password:</label>
<input type="password" id="login-form-modal-password" name="login-form-modal-password" value="" class="form-control" />
</div>
<div class="col_full nobottommargin">
<button class="button button-rounded nomargin" id="login-form-modal-submit" name="login-form-modal-submit" value="login">Login</button>
Forgot Password?
</div>
</form>
<div class="line line-sm"></div>
<button class="button button-rounded btn-block t400 center capitalize si-facebook si-colored noleftmargin norightmargin" ng-click="fbLogin()">Login with Facebook</button>
<button id="customGoogleBtn" class="button button-rounded btn-block t400 center capitalize si-gplus si-colored nomargin">Login with Google</button>
<!-- Login with Google -->
</div>
</div>
</div>
function called on login link
$scope.closePopup = function(){
$.magnificPopup.close();
$.magnificPopup.open({
items: {
src: '#modal-login'
}
});
}

Loading a tab on button click

I am not that much familiar with button html or jquery so please forgive if this is a repeated question or if I asked it wrong. What i want to do is is to load a tab on an external button click. The code for the tabs are as follows,
<div id="wrapper">
<div id="content">
<div class="c1">
<div class="controls">
</div>
<div class="tabs">
<div id="tab-1" class="tab">
<article>
<div class="text-section">
<h1>Dashboard</h1>
<p>TVAS data visualizer</p>
</div>
<div style="margin-top: 10px;margin-left: 10px;width: 21%;height: 20px; float: left">
<input type="button" id="btn" name="btn" value="Button" />
<div style="margin-left: 15px; float: left">
Filter :
</div>
<div id='jqxdropdown' style="margin-left: 5px; float: left">
</div>
</div>
<div style="margin-top: 10px;width: 78%;height: 20px; float: right">
<div id='jqxcalendar' style="margin-left: 10px;float: left;"></div>
<div style="margin-left: 10px;float: left;">
<input id="filterButton" type="button" value="Filter"/>
</div>
<div style="margin-left: 10px; float: left">
<font size="1" color="red">
*Filter by ISP only applies to the bar/pie chart
</font>
</div>
</div>
<div id="barChartdiv" style="margin-top: 10px;width:60%; height: 400px;float: left;"></div>
<div id="pieChartDiv" style="margin-top: 10px;width:40%; height: 400px;float: right;"></div>
<div id="linechartdiv" style="width: 100%; height: 500px;float: left;"></div>
</article>
</div>
<div id="tab-2" class="tab">
<article>
<div class="text-section">
<h1>Map view</h1>
<p>TVAS birds eye view</p>
</div>
<div id="google_map_canvas" style="margin-top: 10px;width:1450px; height: 650px;float: left;">
</div>
<div id="over_map">
<input id="outgoingButton" type="button" value="Outgoing"/>
<input id="incomingButton" type="button" value="Incomng"/>
</div>
</article>
</div>
<div id="tab-3" class="tab">
<article>
<div class="text-section">
<h1>Dashboard</h1>
<p>TVAS trend visualizer</p>
</div>
</article>
</div>
</div>
</div>
</div>
<aside id="sidebar">
<strong class="logo">lg</strong>
<ul class="tabset buttons">
<li class="active">
<span>Dashboard</span><em></em>
<span class="tooltip"><span>Dashboard</span></span>
</li>
<li>
<span>Map visualization</span><em></em>
<span class="tooltip"><span>Map visualization</span></span>
</li>
<li>
<span>Trending</span><em></em>
<span class="tooltip"><span>Trending</span></span>
</li>
</ul>
<span class="shadow"></span>
</aside>
</div>
what this code currently does is when the user clicks on the necessary sidebar element it loads its corresponding div to the left of the page. what I need to do the same by clicking on a button jquery or javascript which is situated in the header area of the page.
for example something like this,
<script type="text/javascript">
$(document).ready(function () {
$("input[name='btn']").click(function() {
//code to display the contents of a tab
});
});
</script>
any help would be much helpful :) I don't know how to make this question even more clearer. hope its understandable Thank you :)

I think this will work, I'm sure there is a more concise way though.
$("#tab-1").click(function() {
$(".tab").hide();
$("#tab-1").show();
});
$("#tab-2").click(function() {
$(".tab").hide();
$("#tab-2").show();
});
$("#tab-3").click(function() {
$(".tab").hide();
$("#tab-3").show();
});
Update: This actually works (be sure to change the class and id selectors to your naming convention), as tested here.
$().ready(function() {
$(".show-tab").click(function() {
$(".tab").hide();
var tabid = $(this).attr("id").substring(5);
$("#"+tabid).show();
});
$("#show-tab-1").click();
});