How to show/hide tab sections using checkboxes with the same name?

How to show/hide tab sections using checkboxes with the same name? - javascript

I have tabs section with 3 sections, Each tab has its own heading and content.
But I don't want to show all the 3 tabs, Just what the user select by checking the related checkbox, There are 3 related checkboxes, One for each tab.
Here is the code:
//Function to hide all siblings but leave the clicked one
function hideAllChildrenButOne(parentId, toRevealId) {
$('#'+parentId).children().css('display', 'none');
$('#'+toRevealId).css('display', 'block');
}
//Function to show the tab header and content when a checkbox is checked
function showSection(parentId, toRevealId){
$('#'+parentId).children().css('display', 'none');
$('#'+toRevealId).css('display', 'block');
var relatedSection = $('#'+toRevealId).attr('data-section');
$('#'+relatedSection).css('display', 'block');
}
$(document).ready(function() {
//On clicking a tab header('Father', 'Mother', 'Brother')
$('.tab-header').click(function(event) {
$(this).addClass('tab_active').siblings().removeClass('tab_active');
var related_section = $(this).attr('data-section');
hideAllChildrenButOne('relative_content', related_section);
});
//On changing any checkbox with name=relative[]
$("input[name='relative[]']").change( function () {
var self = $(this);
if (self.is(":checked")) {
showSection('relative_tabs', self.attr('data-header'), self.attr('id'));
}
});
});
.relative_container{
position: relative;
padding: 45px 15px 15px;
margin: 0 -15px 15px;
border-color: #e5e5e5 #eee #eee;
border-style: solid;
border-width: 1px 0;
-webkit-box-shadow: inset 0 3px 6px rgba(0,0,0,.05);
box-shadow: inset 0 3px 6px rgba(0,0,0,.05);
}
#media (min-width: 768px){
.relative_container {
margin-right: 0;
margin-left: 0;
background-color: #fff;
border-color: #ddd;
border-width: 1px;
border-radius: 4px 4px 0 0;
-webkit-box-shadow: none;
box-shadow: none;
}
}
.relative_tabs{
margin-bottom: 15px;
border-bottom: 1px solid #ddd;
list-style: none;
padding: 7px 0;
}
.relative_tabs:before{
display: table;
content: " ";
}
.relative_tabs>li{
display: inline-block;
margin-bottom: -1px;
}
.relative_tabs>li>a{
margin-right: 2px;
line-height: 1.42857143;
border: 1px solid transparent;
border-radius: 4px 4px 0 0;
padding: 9px 15px;
text-decoration: none;
cursor: pointer;
}
.relative_tabs>li.tab_active>a{
color: #555;
cursor: default;
background-color: #fff;
border: 1px solid #ddd;
border-bottom-color: transparent;
}
.relative_content div{
display: none;
}
.relative_content>div.active{
display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<form>
<label>Father<input type="checkbox" name="relative[]" value="Father" data-header="father-tab"></label>
<label>Mother<input type="checkbox" name="relative[]" value="Mother" data-header="mother-tab"></label>
<label>Brother<input type="checkbox" name="relative[]" value="Brother" data-header="brother-tab"></label>
<div class="relative_container">
<div class="relative_header">
<ul class="relative_tabs" id="relative_tabs">
<li id="father-tab" data-section="Father_info" class="tab-header tab_active">
<a>Father</a>
</li>
<li data-section="Mother_info" class="tab-header" id="mother-tab">
<a>Mother</a>
</li>
<li data-section="Brother_info" class="tab-header" id="brother-tab">
<a>Brother</a>
</li>
</ul>
</div>
<div class="relative_content" id="relative_content">
<div class="tab-content active" id="Father_info">Father Info</div>
<div class="tab-content" id="Mother_info">Mother Info</div>
<div class="tab-content" id="Brother_info">Brother Info</div>
</div>
</div>
</form>
Now it's showing one tab on checking any checkbox, So if I check Father checkbox father tab would be shown, Then if I check Mother checkbox mother tab would be shown and father tab would become hidden.
I want to show the tabs of the checked checkboxes only, So if 1 checkbox is checked only the related tab is shown, If 2 checkboxes are checked the related two tabs are shown and the 3rd is hidden..etc.
Of course if the user checks all the checkboxes and then unchecked them, They would become hidden.

What you are trying to achieve can easily be done by re-writing the showSection function. You just need to toggle the visibility of the tabs everytime a checkbox is selected.
function showSection(parentId, toRevealId) {
$('#' + toRevealId).toggle('display');
if ($('input[data-header=' + toRevealId + ']').is(':checked')) {
$('#' + toRevealId).trigger('click');
}
}
In the code below, apart from modifying the showSection function - I've initially selected all the checkbox so as to align the toggle functionality. You will still need to work on the code to include functionality to select the next active tab when the active tab is hidden (like the if block above which is selecting the tab when the corresponding checkbox is selected).
Hope this helps.
//Function to hide all siblings but leave the clicked one
function hideAllChildrenButOne(parentId, toRevealId) {
$('#' + parentId).children().css('display', 'none');
$('#' + toRevealId).css('display', 'block');
}
//Function to show the tab header and content when a checkbox is checked
function showSection(parentId, toRevealId) {
$('#' + toRevealId).toggle('display');
if ($('input[data-header=' + toRevealId + ']').is(':checked')) {
$('#' + toRevealId).trigger('click');
}
}
$(document).ready(function() {
//On clicking a tab header('Father', 'Mother', 'Brother')
$('.tab-header').click(function(event) {
$(this).addClass('tab_active').siblings().removeClass('tab_active');
var related_section = $(this).attr('data-section');
hideAllChildrenButOne('relative_content', related_section);
});
//On changing any checkbox with name=relative[]
$("input[name='relative[]']").change(function() {
var self = $(this);
//if (self.is(":checked")) {
showSection('relative_tabs', self.attr('data-header'), self.attr('id'));
//}
});
});
.relative_container {
position: relative;
padding: 45px 15px 15px;
margin: 0 -15px 15px;
border-color: #e5e5e5 #eee #eee;
border-style: solid;
border-width: 1px 0;
-webkit-box-shadow: inset 0 3px 6px rgba(0, 0, 0, .05);
box-shadow: inset 0 3px 6px rgba(0, 0, 0, .05);
}
#media (min-width: 768px) {
.relative_container {
margin-right: 0;
margin-left: 0;
background-color: #fff;
border-color: #ddd;
border-width: 1px;
border-radius: 4px 4px 0 0;
-webkit-box-shadow: none;
box-shadow: none;
}
}
.relative_tabs {
margin-bottom: 15px;
border-bottom: 1px solid #ddd;
list-style: none;
padding: 7px 0;
}
.relative_tabs:before {
display: table;
content: " ";
}
.relative_tabs>li {
display: inline-block;
margin-bottom: -1px;
}
.relative_tabs>li>a {
margin-right: 2px;
line-height: 1.42857143;
border: 1px solid transparent;
border-radius: 4px 4px 0 0;
padding: 9px 15px;
text-decoration: none;
cursor: pointer;
}
.relative_tabs>li.tab_active>a {
color: #555;
cursor: default;
background-color: #fff;
border: 1px solid #ddd;
border-bottom-color: transparent;
}
.relative_content div {
display: none;
}
.relative_content>div.active {
display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<form>
<label>Father<input type="checkbox" name="relative[]" value="Father" data-header="father-tab" checked></label>
<label>Mother<input type="checkbox" name="relative[]" value="Mother" data-header="mother-tab" checked></label>
<label>Brother<input type="checkbox" name="relative[]" value="Brother" data-header="brother-tab" checked></label>
<div class="relative_container">
<div class="relative_header">
<ul class="relative_tabs" id="relative_tabs">
<li id="father-tab" data-section="Father_info" class="tab-header tab_active">
<a>Father</a>
</li>
<li data-section="Mother_info" class="tab-header" id="mother-tab">
<a>Mother</a>
</li>
<li data-section="Brother_info" class="tab-header" id="brother-tab">
<a>Brother</a>
</li>
</ul>
</div>
<div class="relative_content" id="relative_content">
<div class="tab-content active" id="Father_info">Father Info</div>
<div class="tab-content" id="Mother_info">Mother Info</div>
<div class="tab-content" id="Brother_info">Brother Info</div>
</div>
</div>
</form>

Related

Issues selecting the first visible element

I have 3 tabs, Each tab has its own heading and content.
But I don't want to show all the 3 tabs, unless the user select to display a tab by checking the related checkbox, There are 3 related checkboxes, One for each tab.
Here is the code:
//Function to hide all siblings but leave the clicked one
function hideAllChildrenButOne(parentId, toRevealId) {
$('#' + parentId).children().css('display', 'none');
$('#' + toRevealId).css('display', 'block');
}
//Function to show the tab header and content when a checkbox is checked
function showSection(parentId, toRevealId, self) {
var relatedSection = $('#' + toRevealId).attr('data-section');
if(self.is(':checked')){
$('#' + toRevealId).addClass('inline-block');
$('#' + toRevealId).addClass('tab_active');
$('#' + toRevealId).siblings().removeClass('tab_active');
$('#' + relatedSection).siblings().removeClass('active');
$('#' + relatedSection).addClass('block');
$('#' + relatedSection).addClass('active');
}
if ($('#'+self.attr('data-header')).hasClass('tab_active')){
var count = $(".tab-header:visible").length;
if(self.is(':checked') == false && count > 0){
$(".tab-header:visible:first").addClass('tab_active');
$('#'+$(".tab-header:visible:first").attr('data-section')).addClass('active');
}
}
if(self.is(':checked') == false){
$('#' + toRevealId).removeClass('inline-block');
$('#' + toRevealId).removeClass('tab_active');
$('#' + relatedSection).removeClass('block');
$('#' + relatedSection).removeClass('active');
}
}
$(document).ready(function() {
//On clicking a tab header('Father', 'Mother', 'Brother')
$('.tab-header').click(function(event) {
$(this).addClass('tab_active').siblings().removeClass('tab_active');
var related_section = $(this).attr('data-section');
hideAllChildrenButOne('relative_content', related_section);
});
//On changing any checkbox with name=relative[]
$("input[name='relative[]']").change(function() {
var self = $(this);
showSection('relative_tabs', self.attr('data-header'), self);
});
});
.relative_container{
position: relative;
padding: 45px 15px 15px;
margin: 0 -15px 15px;
border-color: #e5e5e5 #eee #eee;
border-style: solid;
border-width: 1px 0;
-webkit-box-shadow: inset 0 3px 6px rgba(0,0,0,.05);
box-shadow: inset 0 3px 6px rgba(0,0,0,.05);
}
#media (min-width: 768px){
.relative_container {
margin-right: 0;
margin-left: 0;
background-color: #fff;
border-color: #ddd;
border-width: 1px;
border-radius: 4px 4px 0 0;
-webkit-box-shadow: none;
box-shadow: none;
}
}
.relative_tabs{
margin-bottom: 15px;
border-bottom: 1px solid #ddd;
list-style: none;
padding: 7px 0;
}
.relative_tabs:before{
display: table;
content: " ";
}
.tab-header{
display: none;
margin-bottom: -1px;
}
.tab-header>a{
margin-right: 2px;
line-height: 1.42857143;
border: 1px solid transparent;
border-radius: 4px 4px 0 0;
padding: 9px 15px;
text-decoration: none;
cursor: pointer;
}
.tab-header.tab_active>a{
color: #555;
cursor: default;
background-color: #fff;
border: 1px solid #ddd;
border-bottom-color: transparent;
}
.relative_content div{
display: none;
}
.relative_content>div.active{
display: block;
}
.tab-content{
display: none;
}
.hidden{
display: none;
}
.inline-block{
display: inline-block;
}
.block{
display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<form>
<label>Father<input type="checkbox" name="relative[]" value="Father" data-header="father-tab"></label>
<label>Mother<input type="checkbox" name="relative[]" value="Mother" data-header="mother-tab"></label>
<label>Guardian<input type="checkbox" name="relative[]" value="Guardian" data-header="guardian-tab"></label>
<div class="relative_container">
<div class="relative_header">
<ul class="relative_tabs" id="relative_tabs">
<li id="father-tab" data-section="Father_info" class="tab-header">
<a>Father</a>
</li>
<li data-section="Mother_info" class="tab-header" id="mother-tab">
<a>Mother</a>
</li>
<li data-section="Guardian_info" class="tab-header" id="guardian-tab">
<a>Guardian</a>
</li>
</ul>
</div>
<div class="relative_content" id="relative_content">
<div class="tab-content" id="Father_info">Father Info</div>
<div class="tab-content" id="Mother_info">Mother Info</div>
<div class="tab-content" id="Guardian_info">Guardian Info</div>
</div>
</div>
</form>
Here is a fiddle for testing/editing:
https://jsfiddle.net/s83evtrm
Everything works fine except the following scenarios:
1- When I check all the 3 checkboxes starting from father checkbox, Then uncheck guardian tha father tab becomes active, When I uncheck father mother tab should become active, But this is not happening, I printed the first visible element in this case and it returned father instead of mother.
i think this could be resolved by moving the 3rd if condition:
if(self.is(':checked') == false){
$('#' + toRevealId).removeClass('inline-block');
$('#' + toRevealId).removeClass('tab_active');
$('#' + relatedSection).removeClass('block');
$('#' + relatedSection).removeClass('active');
}
Before the 2nd one:
if ($('#'+self.attr('data-header')).hasClass('tab_active')){
var count = $(".tab-header:visible").length;
if(self.is(':checked') == false && count > 0){
$(".tab-header:visible:first").addClass('tab_active');
$('#'+$(".tab-header:visible:first").attr('data-section')).addClass('active');
}
}
But in this case the 2rd condition that becomes 3rd won't work.
2- When I check any other checkbox but not the father, Then check the other one, Then check father, Then uncheck father, None of the 2 other tabs become active.
PS: to make a tab active, tab_active class is added to the tab heading ('Father', 'Mother', ..etc) and active is added to the content ('Father Info', 'Mother Info', ..etc)
How to solve this?

What you can try is to force a click on the first selected input if none of the tabs are active:
// Function to hide all siblings but leave the clicked one
function hideAllChildrenButOne(parentId, toRevealId) {
$('#' + parentId).children().css('display', 'none');
$('#' + toRevealId).css('display', 'block');
}
// Function to show the tab header and content when a checkbox is checked
function showSection(parentId, toRevealId, self) {
var relatedSection = $('#' + toRevealId).attr('data-section');
if (self.is(':checked')) {
$('#' + toRevealId).addClass('inline-block');
$('#' + toRevealId).addClass('tab_active');
$('#' + toRevealId).siblings().removeClass('tab_active');
$('#' + relatedSection).siblings().removeClass('active');
$('#' + relatedSection).addClass('block');
$('#' + relatedSection).addClass('active');
}
if ($('#'+self.attr('data-header')).hasClass('tab_active')) {
var count = $('.tab-header:visible').length;
if (self.is(':checked') == false && count > 0) {
$('.tab-header:visible:first').addClass('tab_active');
$('#' + $('.tab-header:visible:first').attr('data-section')).addClass('active');
}
}
if (self.is(':checked') == false) {
$('#' + toRevealId).removeClass('inline-block');
$('#' + toRevealId).removeClass('tab_active');
$('#' + relatedSection).removeClass('block');
$('#' + relatedSection).removeClass('active');
}
}
$(document).ready(function() {
// On clicking a tab header('Father', 'Mother', 'Brother')
$('.tab-header').click(function(event) {
$(this).addClass('tab_active').siblings().removeClass('tab_active');
var related_section = $(this).attr('data-section');
hideAllChildrenButOne('relative_content', related_section);
});
// On changing any checkbox with name=relative[]
$('input[name="relative[]"]').change(function() {
var self = $(this);
showSection('relative_tabs', self.attr('data-header'), self);
// If none of the tabs are active, then activate the first one by unchecking and rechecking it.
if (!$('.tab_active').length) {
$('input:checked').first().click().click();
};
});
});
.relative_container {
position: relative;
padding: 45px 15px 15px;
margin: 0 -15px 15px;
border-color: #e5e5e5 #eee #eee;
border-style: solid;
border-width: 1px 0;
-webkit-box-shadow: inset 0 3px 6px rgba(0, 0, 0, .05);
box-shadow: inset 0 3px 6px rgba(0, 0, 0, .05);
}
#media (min-width: 768px) {
.relative_container {
margin-right: 0;
margin-left: 0;
background-color: #fff;
border-color: #ddd;
border-width: 1px;
border-radius: 4px 4px 0 0;
-webkit-box-shadow: none;
box-shadow: none;
}
}
.relative_tabs {
margin-bottom: 15px;
border-bottom: 1px solid #ddd;
list-style: none;
padding: 7px 0;
}
.relative_tabs:before {
display: table;
content: " ";
}
.tab-header {
display: none;
margin-bottom: -1px;
}
.tab-header > a {
margin-right: 2px;
line-height: 1.42857143;
border: 1px solid transparent;
border-radius: 4px 4px 0 0;
padding: 9px 15px;
text-decoration: none;
cursor: pointer;
}
.tab-header.tab_active > a {
color: #555;
cursor: default;
background-color: #fff;
border: 1px solid #ddd;
border-bottom-color: transparent;
}
.relative_content div {
display: none;
}
.relative_content > div.active {
display: block;
}
.tab-content {
display: none;
}
.hidden {
display: none;
}
.inline-block {
display: inline-block;
}
.block {
display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<form>
<label>Father<input type="checkbox" name="relative[]" value="Father" data-header="father-tab"></label>
<label>Mother<input type="checkbox" name="relative[]" value="Mother" data-header="mother-tab"></label>
<label>Guardian<input type="checkbox" name="relative[]" value="Guardian" data-header="guardian-tab"></label>
<div class="relative_container">
<div class="relative_header">
<ul class="relative_tabs" id="relative_tabs">
<li id="father-tab" data-section="Father_info" class="tab-header">
<a>Father</a>
</li>
<li data-section="Mother_info" class="tab-header" id="mother-tab">
<a>Mother</a>
</li>
<li data-section="Guardian_info" class="tab-header" id="guardian-tab">
<a>Guardian</a>
</li>
</ul>
</div>
<div class="relative_content" id="relative_content">
<div class="tab-content" id="Father_info">Father Info</div>
<div class="tab-content" id="Mother_info">Mother Info</div>
<div class="tab-content" id="Guardian_info">Guardian Info</div>
</div>
</div>
</form>

Deselecting the list item activated and activating the other one by default using jquery

Hi i am having the list of categories present in my website.Written jquery code for that to deselect the category if the user clicks on that list category for second time.Once the user clicks on the selected category it should be deselected and All button category should be selected by default.
AS of now if i click on the selected category for second time it is deselecting that category but the all button is not selecting by default.
Code:
jQuery(document).ready(function() {
jQuery(".tribe-events-category-5").addClass("active");
jQuery(".tribe-events-category-5").trigger("click");
jQuery("#legend li").on("click", function() {
jQuery("#legend li").not(this).removeClass("active");
jQuery(this).toggleClass("active");
});
jQuery(".tribe-events-category-5").addClass("active");
});
#legend li:not(.active) {
opacity: 0.3;
}
.tribe-events-category-5 {
background-color: #800000;
border-left: 5px solid #800000;
border-right: 5px solid transparent;
color: #fff;
line-height: 1.4em;
padding-left: 5px;
}
#legend li {
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="legend">
<li class="tribe-events-category-all"><span>All</span></li>
<li class="tribe-events-category-5"><span>Music</span></li>
<li><span>Dance</span></li>
<li><span>Festives</span></li>
</ul>

Not sure this is what you were expecting for or not. Just take a look into it. Here is a fiddle with your code but has been edited a little and one more thing instead of using jQuery all the time you can use $ instead.
$(document).ready(function(){
$(".tribe-events-category-5").addClass("active");
$("#legend li").on("click", function(){
$("#legend li").not(this).removeClass("active");
if($("#legend li").hasClass("active")){
$(".tribe-events-category-all").addClass("active");
}else{
$(".tribe-events-category-all").removeClass("active");
}
$(this).toggleClass("active");
});
});
#legend li:not(.active) {
opacity: 0.3;
}
.tribe-events-category-5{
background-color: #800000;
border-left: 5px solid #800000;
border-right: 5px solid transparent;
color: #fff;
line-height: 1.4em;
padding-left: 5px;
}
#legend li{
cursor:pointer;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<ul id="legend">
<li class="tribe-events-category-all"><span>All</span></li>
<li class="tribe-events-category-5"><span>Music</span></li>
<li><span>Dance</span></li>
<li><span>Festives</span></li>
</ul>

You can simply achieve it by finding class for All and toggle it using jQuery(this).prev('.tribe-events-category-all').toggleClass("active"); like this
jQuery(document).ready(function(){
jQuery(".tribe-events-category-5").addClass("active");
jQuery(".tribe-events-category-5").trigger("click");
jQuery("#legend li").on("click", function(){
jQuery("#legend li").not(this).removeClass("active");
jQuery(this).toggleClass("active");
if(!$(this).hasClass("tribe-events-category-all") && !$(this).hasClass("active")){
jQuery(this).siblings('.tribe-events-category-all').toggleClass("active");
}
});
jQuery(".tribe-events-category-5").addClass("active");
});
#legend li:not(.active) {
opacity: 0.3;
}
.tribe-events-category-5{
background-color: #800000;
border-left: 5px solid #800000;
border-right: 5px solid transparent;
color: #fff;
line-height: 1.4em;
padding-left: 5px;
}
#legend li{
cursor:pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="legend">
<li class="tribe-events-category-all"><span>All</span></li>
<li class="tribe-events-category-5"><span>Music</span></li>
<li><span>Dance</span></li>
<li><span>Festives</span></li>
</ul>

Split BUtton is not Working

I am using this example on my application.
https://codepen.io/kushalpandya/pen/IAhin/
Button is appearing perfectly on the screen. I place div section and all css acordingly. Now when I click on arrow button don't know why options are not showing.
My Split button is not working.
$(function() {
var splitBtn = $('.x-split-button');
$('button.x-button-drop').on('click', function() {
if (!splitBtn.hasClass('open'))
splitBtn.addClass('open');
});
$('.x-split-button').click(function(event) {
event.stopPropagation();
});
$('html').on('click', function() {
if (splitBtn.hasClass('open'))
splitBtn.removeClass('open');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="containerButton">
<span class="x-split-button">
<button class="x-button x-button-main">❖ Action</button>
<button class="x-button x-button-drop">▼</button>
<ul class="x-button-drop-menu">
<li>
Item - 1
</li>
<li>
Item - 2
</li>
<li>
Long Item - 3
</li>
</ul>
</span>
</div>
Did I placed <Script> tag correctly.

also you need to add css! check this:
$(function() {
var splitBtn = $('.x-split-button');
$('button.x-button-drop').on('click', function() {
if (!splitBtn.hasClass('open'))
splitBtn.addClass('open');
});
$('.x-split-button').click(function(event) {
event.stopPropagation();
});
$('html').on('click', function() {
if (splitBtn.hasClass('open'))
splitBtn.removeClass('open');
});
});
.container {
text-align: center;
}
.container > h2 {
text-align: center;
}
.x-split-button {
position: relative;
display: inline-block;
text-align: left;
margin-top: 20px;
}
.x-button {
position: relative;
margin: 0;
height: 30px;
float: left;
outline: none;
line-height: 27px;
background: #F2F2F2;
border: 1px solid #E0E0E0;
box-shadow: 1px 1px 2px #E0E0E0;
}
.x-button:hover {
cursor: pointer;
background: #E0E0E0;
}
.x-button:active {
background: #D3D3D3;
}
.x-button.x-button-drop {
border-left: 0;
height: 30px;
}
.open > .x-button-drop-menu {
display: block;
}
.x-button-drop-menu {
position: absolute;
top: 27px;
right: 0;
z-index: 1000;
display: none;
float: left;
min-width: 160px;
padding: 5px 0;
margin: 2px 0 0;
font-size: 14px;
list-style: none;
background-color: #F2F2F2;
background-clip: padding-box;
border: 1px solid #E0E0E0;
box-shadow: 1px 1px 2px #E0E0E0;
}
.x-button-drop-menu li a {
display: block;
padding: 3px 20px;
clear: both;
font-family: arial;
color: #444;
text-decoration: none;
}
.x-button-drop-menu li a:hover {
background: #D3D3D3;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="containerButton">
<span class="x-split-button">
<button class="x-button x-button-main">❖ Action</button>
<button class="x-button x-button-drop">▼</button>
<ul class="x-button-drop-menu">
<li>
Item - 1
</li>
<li>
Item - 2
</li>
<li>
Long Item - 3
</li>
</ul>
</span>
</div>

Clickable drop-down menu javascript

I have used JavaScript to create 3 clickable drop-down menu button in a webpage. when I click one button, script is works well. I can see the following menu is displayed. When I another button, the following menu is displayed. however, the previous menu is still there.
Here is my script. Hope someone can help me. Thank you!
<script type="text/javascript" >
$(document).ready(function() {
$(".account").click(function() {
var X = $(this).attr('id');
if (X == 1) {
$(".submenu").hide();
$(this).attr('id', '0');
} else {
$(".submenu").show();
$(this).attr('id', '1');
}
});
//Mouse click on sub menu
$(".submenu").mouseup(function() {
return false
});
//Mouse click on my account link
$(".account").mouseup(function() {
return false
});
//Document Click
$(document).mouseup(function() {
$(".submenu").hide();
$(".account").attr('id', '');
});
});
</script>
// CSS
.dropdown
{
color:#000;
margin: 0px 22px 0 0;
width: 300px;
height: 30px;
text-align:center;
}
.submenu
{
background:#FFF ;
position: absolute;
top: 118px;
left: 515px;
z-index: 100;
width: 250px;
display: none;
border-radius: 6px;
border: outset 2px #0066FF;
box-shadow: 0 0px 0px rgba(0, 0, 0, 0.05);
}
.dropdown li a
{
color:#555555;
display: block;
font-family: arial;
font-weight: bold;
padding: 6px 15px;
cursor: pointer;
text-decoration:none;
margin-top:-5px;
}
.dropdown li a:hover
{
background:#155FB0;
color: #FFFFFF;
text-decoration: none;
}
a.account
{
font-size: 18px;
line-height: 10px;
color: #000;
border: ridge 2px #0066FF;
position: absolute;
z-index: 110;
display: block;
padding: 11px 0 0 0px;
height: 20px;
width: 300px;
margin: 0px 0 0 0px;
text-align:center;
text-decoration: none;
background: url(images-new/arrow.png) 275px 9px no-repeat;
cursor:pointer;
}
.root
{
list-style:none;
margin:0px;
padding:0px;
font-size: 11px;
padding: 11px 0 0 0px;
border-top:1px solid #dedede;
}
// html
<div class="dropdown">
<a class="account" >My Account</a>
<div class="submenu">
<ul class="root">
<li ><a href="#Dashboard" >Dashboard</a></li>
<li ><a href="#Profile" >Profile</a></li>
<li >Settings</li>
<li >Send Feedback</li>
</ul>
</div>
</div>

My personal recommendation is to do this with with a combination of JS & CSS.
You should use an active class to hide and show your elements:
//JS
$('.menu a').on('click', function({
$('.menu a').removeClass('active');
$(this).addClass('active');
});
// CSS
.active .submenu {
display: block;
}

jQuery check if 4 fields are filled in

I am working on a form with 4 fields which I directly validate. So if a field is filled in correctly I give this field green borders for example. But now I want to do a check if all the fields are filled in and then I show a message.
My idea is to first make a function for each field like this below. And then check the 4 functions if they return true. But that didn't work, so I first check a single function (in this example for the field 'width') if they match, an alert returns. But this also doesn't work, so I cannot go any further now.
Can anybody help me to make this function work first?
(The #config-steps #width is an input field with the an id 'width')
My code snippet:
jQuery(document).ready(function($) {
// Validate text fields
$("#config-steps #width, #config-steps #height").on('input', function() {
var input = $(this);
var width = input.val();
if (width.match(/^\d+$/)) {
input.removeClass('invalid').addClass('valid');
input.parents('li').find('.step-number').removeClass('unvalid-step').addClass('valid-step');
} else {
input.removeClass('valid').addClass('invalid');
input.parents('li').find('.step-number').removeClass('valid-step').addClass('unvalid-step');
}
});
// Validate select box
$("#config-steps #type").change(function() {
var slct = $(this);
var type = slct.val()
if (type) {
slct.parents('li').find('.step-number').removeClass('unvalid-step').addClass('valid-step');
} else {
slct.parents('li').find('.step-number').removeClass('valid-step').addClass('unvalid-step');
}
});
// Check all fields filled in.
function check_field() {
function validate_width() {
var width = $("#config-steps #width").val();
if (width.match(/^\d+$/)) {
alert('test');
} else {
return false;
}
}
}
});
.valid {
background: #f7fff7 !important;
border: 1px solid #459b40 !important;
}
.invalid {
background: #fff7f7 !important;
border: 1px solid #ff0000 !important;
}
.clear {
clear: both;
}
#config-steps li:nth-child(odd) {
background: #f6f8f9;
}
#config-steps li {
border-bottom: 1px solid #e1e6ea;
padding: 20px;
list-style: none;
}
#config-steps li .step-number {
color: #FFF;
font-size: 16px;
display: inline-block;
background: #f08f02;
border: 1px solid #d98c1a;
padding: 8px 11px;
font-weight: bold;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
float: left;
min-width: 8px;
text-align: center;
margin: 0 15px 0 0;
-moz-box-shadow: inset 0px 0 1px #FFF;
-webkit-box-shadow: inset 0px 0 1px #FFF;
box-shadow: inset 0px 0 1px #FFF;
}
#config-steps li .valid-step {
background: #55ad50;
border: 1px solid #2b8825;
}
#config-steps li .unvalid-step {
background: #ed7171;
border: 1px solid #cf0000;
}
#config-steps li .step-description {
font-size: 14px;
float: left;
padding: 10px 0 0 0;
}
#config-steps li .step-action {
float: right;
}
#config-steps li .step-action .textfield {
background: #f1f9ff;
border: 1px solid #9eabb6;
padding: 7px;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
}
#config-steps li .step-action input[type="text"] {
width: 180px;
text-align: right;
}
#config-steps li .step-action input[type="text"]:focus {
background: #fffcf6;
border: 1px solid #f6a41d;
}
#config-steps li .step-action select {
margin: 7px 3px 0 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form method="post" id="config">
<ul id="config-steps">
<li> <span class="step-number">1</span>
<p class="step-description">Width (mm)</p>
<div class="step-action">
<input autofocus type="text" class="textfield" id="width" />
</div>
<!--End step-action-->
<div class="clear"></div>
</li>
<li> <span class="step-number">2</span>
<p class="step-description">Height (mm)</p>
<div class="step-action">
<input type="text" class="textfield" id="height" />
</div>
<!--End step-action-->
<div class="clear"></div>
</li>
<li> <span class="step-number">3</span>
<p class="step-description">Glasstype (mm)</p>
<div class="step-action">
<select id="type">
<option value="">-- Select glasstype --</option>
<option value="1">Mat</option>
<option value="2">Glossy</option>
</select>
</div>
<!--End step-action-->
<div class="clear"></div>
</li>
</ul>
<!--End config-steps-->
</form>
<!--End config-->

Use $('#width').change for checking
$('input,select').change(function(){
var width = $("#config-steps #width").val();
var height = $("#config-steps #height").val();
var size = $("#config-steps select").val();
if (width.match(/^\d+$/)&&height.match(/^\d+$/)&&size.match(/^\d+$/)) {
alert('Well done!');
} else {
return false;
}
});
Updated here:
jQuery(document).ready(function($) {
// Validate text fields
$("#config-steps #width, #config-steps #height").on('input', function() {
var input = $(this);
var width = input.val();
if (width.match(/^\d+$/)) {
input.removeClass('invalid').addClass('valid');
input.parents('li').find('.step-number').removeClass('unvalid-step').addClass('valid-step');
} else {
input.removeClass('valid').addClass('invalid');
input.parents('li').find('.step-number').removeClass('valid-step').addClass('unvalid-step');
}
});
// Validate select box
$("#config-steps #type").change(function() {
var slct = $(this);
var type = slct.val()
if (type) {
slct.parents('li').find('.step-number').removeClass('unvalid-step').addClass('valid-step');
} else {
slct.parents('li').find('.step-number').removeClass('valid-step').addClass('unvalid-step');
}
});
// Check all fields filled in.
$('input,select').change(function() {
var width = $("#config-steps #width").val();
var height = $("#config-steps #height").val();
var size = $("#config-steps select").val();
if (width.match(/^\d+$/) && height.match(/^\d+$/) && size.match(/^\d+$/)) {
alert('Well done!');
} else {
return false;
}
});
});
.valid {
background: #f7fff7 !important;
border: 1px solid #459b40 !important;
}
.invalid {
background: #fff7f7 !important;
border: 1px solid #ff0000 !important;
}
.clear {
clear: both;
}
#config-steps li:nth-child(odd) {
background: #f6f8f9;
}
#config-steps li {
border-bottom: 1px solid #e1e6ea;
padding: 20px;
list-style: none;
}
#config-steps li .step-number {
color: #FFF;
font-size: 16px;
display: inline-block;
background: #f08f02;
border: 1px solid #d98c1a;
padding: 8px 11px;
font-weight: bold;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
float: left;
min-width: 8px;
text-align: center;
margin: 0 15px 0 0;
-moz-box-shadow: inset 0px 0 1px #FFF;
-webkit-box-shadow: inset 0px 0 1px #FFF;
box-shadow: inset 0px 0 1px #FFF;
}
#config-steps li .valid-step {
background: #55ad50;
border: 1px solid #2b8825;
}
#config-steps li .unvalid-step {
background: #ed7171;
border: 1px solid #cf0000;
}
#config-steps li .step-description {
font-size: 14px;
float: left;
padding: 10px 0 0 0;
}
#config-steps li .step-action {
float: right;
}
#config-steps li .step-action .textfield {
background: #f1f9ff;
border: 1px solid #9eabb6;
padding: 7px;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
}
#config-steps li .step-action input[type="text"] {
width: 180px;
text-align: right;
}
#config-steps li .step-action input[type="text"]:focus {
background: #fffcf6;
border: 1px solid #f6a41d;
}
#config-steps li .step-action select {
margin: 7px 3px 0 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form method="post" id="config">
<ul id="config-steps">
<li> <span class="step-number">1</span>
<p class="step-description">Width (mm)</p>
<div class="step-action">
<input autofocus type="text" class="textfield" id="width" />
</div>
<!--End step-action-->
<div class="clear"></div>
</li>
<li> <span class="step-number">2</span>
<p class="step-description">Height (mm)</p>
<div class="step-action">
<input type="text" class="textfield" id="height" />
</div>
<!--End step-action-->
<div class="clear"></div>
</li>
<li> <span class="step-number">3</span>
<p class="step-description">Glasstype (mm)</p>
<div class="step-action">
<select id="type">
<option value="">-- Select glasstype --</option>
<option value="1">Mat</option>
<option value="2">Glossy</option>
</select>
</div>
<!--End step-action-->
<div class="clear"></div>
</li>
</ul>
<!--End config-steps-->
</form>
<!--End config-->

You will need to call the
check_field();
Function after each input has been updated. I've created an example of how you can achieve this.
http://jsfiddle.net/EsBTg/6/

You can use .each() function in jQuery to test several elements at once:
function validate_width() {
var error = 0;
$("#width, #height, #type").each(function () {
if (!$(this).val().match(/^\d+$/)) {
error++;
}
});
if (!error){
alert("Everything's fine!");
}
}
jQuery(document).ready(function($) {
// Validate text fields
$("#config-steps #width, #config-steps #height").on('input', function() {
var input = $(this);
var width = input.val();
if (width.match(/^\d+$/)) {
input.removeClass('invalid').addClass('valid');
input.parents('li').find('.step-number').removeClass('unvalid-step').addClass('valid-step');
} else {
input.removeClass('valid').addClass('invalid');
input.parents('li').find('.step-number').removeClass('valid-step').addClass('unvalid-step');
}
});
// Validate select box
$("#config-steps #type").change(function() {
var slct = $(this);
var type = slct.val()
if (type) {
slct.parents('li').find('.step-number').removeClass('unvalid-step').addClass('valid-step');
} else {
slct.parents('li').find('.step-number').removeClass('valid-step').addClass('unvalid-step');
}
});
// Check all fields filled in.
function validate_width() {
var error = 0;
$("#width, #height, #type").each(function() {
if (!$(this).val().match(/^\d+$/)) {
error++;
}
});
if (error) {
alert("There were " + error + " errors.");
} else {
alert("Everything's fine!");
}
}
$("#check").click(function() {
validate_width();
})
});
.valid {
background: #f7fff7 !important;
border: 1px solid #459b40 !important;
}
.invalid {
background: #fff7f7 !important;
border: 1px solid #ff0000 !important;
}
.clear {
clear: both;
}
#config-steps li:nth-child(odd) {
background: #f6f8f9;
}
#config-steps li {
border-bottom: 1px solid #e1e6ea;
padding: 20px;
list-style: none;
}
#config-steps li .step-number {
color: #FFF;
font-size: 16px;
display: inline-block;
background: #f08f02;
border: 1px solid #d98c1a;
padding: 8px 11px;
font-weight: bold;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
float: left;
min-width: 8px;
text-align: center;
margin: 0 15px 0 0;
-moz-box-shadow: inset 0px 0 1px #FFF;
-webkit-box-shadow: inset 0px 0 1px #FFF;
box-shadow: inset 0px 0 1px #FFF;
}
#config-steps li .valid-step {
background: #55ad50;
border: 1px solid #2b8825;
}
#config-steps li .unvalid-step {
background: #ed7171;
border: 1px solid #cf0000;
}
#config-steps li .step-description {
font-size: 14px;
float: left;
padding: 10px 0 0 0;
}
#config-steps li .step-action {
float: right;
}
#config-steps li .step-action .textfield {
background: #f1f9ff;
border: 1px solid #9eabb6;
padding: 7px;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
}
#config-steps li .step-action input[type="text"] {
width: 180px;
text-align: right;
}
#config-steps li .step-action input[type="text"]:focus {
background: #fffcf6;
border: 1px solid #f6a41d;
}
#config-steps li .step-action select {
margin: 7px 3px 0 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form method="post" id="config">
<ul id="config-steps">
<li> <span class="step-number">1</span>
<p class="step-description">Width (mm)</p>
<div class="step-action">
<input autofocus type="text" class="textfield" id="width" />
</div>
<!--End step-action-->
<div class="clear"></div>
</li>
<li> <span class="step-number">2</span>
<p class="step-description">Height (mm)</p>
<div class="step-action">
<input type="text" class="textfield" id="height" />
</div>
<!--End step-action-->
<div class="clear"></div>
</li>
<li> <span class="step-number">3</span>
<p class="step-description">Glasstype (mm)</p>
<div class="step-action">
<select id="type">
<option value="">-- Select glasstype --</option>
<option value="1">Mat</option>
<option value="2">Glossy</option>
</select>
</div>
<!--End step-action-->
<div class="clear"></div>
</li>
</ul>
<!--End config-steps-->
</form>
<!--End config-->
<input id=check value=Check type=button>

Develop Reference

JavaScript is the programming language of the Web.

How to show/hide tab sections using checkboxes with the same name? - javascript

Related

Issues selecting the first visible element

Deselecting the list item activated and activating the other one by default using jquery

Split BUtton is not Working

Clickable drop-down menu javascript

jQuery check if 4 fields are filled in

Categories

Resources