Develop Reference

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

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>

How to display form field one by one after clicking on button

I have one field in the first page and user will enter the 1 digit number in it. After entering the number that field will hide and display the next field called as Fullname with the button but when I clicked on the button my page refreshed and it goes to the first page.
I need when the user entered the Fullname and clicked on the button then next filed will display which is called Password.
I have a different button in each field.
Would you help me in this?
style
#password_form, #mobile_form{
display: none;
}
HTML
<div class="yoursection">
<form name="user-confirmation">
<label>Code no</label>
<input type="text" name="code" id="code" placeholder="code" maxlength="1">
</form>
</div>
<div class="active_form" style="display: none;">
<!--Name form********************************************************-->
<form id="name_form" action="#" method="post" >
<label>Full name</label>
<input type="text" name="fullname" id="fullname" placeholder="Full name">
<input type="submit" name="submit" value="Continue to Password" id="continue_to_password">
</form>
<!--password form********************************************************-->
<form id="password_form" action="#" method="post">
<label>Password</label>
<input type="password" name="password" id="password" placeholder="password name">
<input type="submit" name="submit" value="Continue to mobile no" id="continue_to_mobile">
</form>
<!--mobile form********************************************************-->
<form id="mobile_form" action="#" method="post">
<label>Mobile number</label>
<input type="text" name="mobile" id="mobile" placeholder="mobile no">
<input type="submit" name="submit" value="Submit" id="submit">
</form>
</div>
<!--active form-->
Script
/*on key up calling ajax*/
$("#code").keyup(function () {
$("form[name='user-confirmation']").submit();
});
/*Checking code */
$(function () {
$('form[name="user-confirmation"]').on('submit', function (e) {
e.preventDefault();
$.ajax({
type: 'post',
url: 'test4.php',
data: $('form[name="user-confirmation-code"]').serialize(),
success: function (data) {
if (data.trim() === 'true') {
$('.yoursection').hide();
$('.active_form').show();
} else {
$('#red-color').html(data);
}
}
});
});
});
/*When clicked on button*/
$('#continue_to_password').on('click', function () {
$('#name_form').hide();
$('#password_from').show();
});
$('#continue_to_mobile').on('click', function () {
$('#password_from').hide();
$('#mobile_form').show();
});
test4.php
This is for demo
<?php
echo "true";
?>

Remove the form tag, change the code as follows:
$("#code").keyup(function () {
$.ajax({
type: 'post',
url: 'test4.php',
data: $(this).val(),
success: function (data) {
if (data.trim() === 'true') {
$('.yoursection').hide();
$('.active_form').show();
} else {
$('#red-color').html(data);
}
}
});
});
});
Note: this will trigger the ajax each time you press a key in the #code field
Change your input to buttons have only one form for the login
$("#code").keyup(function() {
$('.active_form').show();
//$.ajax({
// type: 'post',
// url: 'test4.php',
//data: $(this).val(),
//success: function(data) {
// if (data.trim() === 'true') {
// $('.yoursection').hide();
// $('.active_form').show();
// } else {
// $('#red-color').html(data);
// }
// }
// });
});
/*When clicked on button*/
$('body').on('click', '#continue_to_password', function(e) {
$('#name_form').hide();
$('#password_form').show();
});
$('#continue_to_mobile').on('click', function() {
$('#password_form').hide();
$('#mobile_form').show();
});
.active_form,
#password_form,
#mobile_form {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="yoursection">
<label>Code no</label>
<input type="text" name="code" id="code" placeholder="code" maxlength="1">
</div>
<form class="active_form">
<!--Name form********************************************************-->
<div id="name_form">
<label>Full name</label>
<input type="text" name="fullname" id="fullname" placeholder="Full name">
<button type="button" id="continue_to_password">Continue to Password</button>
</div>
<!--password form********************************************************-->
<div id="password_form">
<label>Password</label>
<input type="password" name="password" id="password" placeholder="password name">
<button type="button" id="continue_to_mobile">Continue to mobile no</button>
</div>
<!--mobile form********************************************************-->
<div id="mobile_form">
<label>Mobile number</label>
<input type="text" name="mobile" id="mobile" placeholder="mobile no">
<button type="submit">Submit</button>
</div>
</form>
<!--active form-->

You can use the <button></button> tag with your existing .on("click") event.
<input type="submit"> will always reload your page.

I believe the best way to handle this would be to store the forms inside an array. Add the step class to each form.
var steps = $('form.step');
Then simply iterate over each form. Since jQuery will get the elements in the order they appear on the document, you won't have to do any configuration.
var currentStep = 0;
$('input[type="submit"]').on('click', function () {
currentStep += 1;
HideSteps();
});
function HideSteps()
{
for (var i = 0; i < $(steps).length; i++)
{
if (i != currentStep)
{
var disabledForm = $(steps)[i];
$(disabledForm).css({ display: none });
}
else
{
var activeForm = $(steps)[i];
$(activeForm).css({ display: block });
}
}
}
And to disable the submittion, use e.preventDefault() on the submit event.
$('input[name="submit"]').on('click', function (event) {
e.preventDefault();
});

Try this sliding form that shows some validation feedback to the user after each step...
$(function() {
/*
number of fieldsets
*/
var fieldsetCount = $('#formElem').children().length;
/*
current position of fieldset / navigation link
*/
var current = 1;
/*
sum and save the widths of each one of the fieldsets
set the final sum as the total width of the steps element
*/
var stepsWidth = 0;
var widths = new Array();
$('#steps .step').each(function(i) {
var $step = $(this);
widths[i] = stepsWidth;
stepsWidth += $step.width();
});
$('#steps').width(stepsWidth);
/*
to avoid problems in IE, focus the first input of the form
*/
$('#formElem').children(':first').find(':input:first').focus();
/*
show the navigation bar
*/
$('#navigation').show();
/*
when clicking on a navigation link
the form slides to the corresponding fieldset
*/
$('#navigation a').bind('click', function(e) {
var $this = $(this);
var prev = current;
$this.closest('ul').find('li').removeClass('selected');
$this.parent().addClass('selected');
/*
we store the position of the link
in the current variable
*/
current = $this.parent().index() + 1;
$('#steps').stop().animate({
marginLeft: '-' + widths[current - 1] + 'px'
}, 500, function() {
if (current == fieldsetCount)
validateSteps();
else
validateStep(prev);
$('#formElem').children(':nth-child(' + parseInt(current) + ')').find(':input:first').focus();
});
e.preventDefault();
});
/*
clicking on the tab (on the last input of each fieldset), makes the form
slide to the next step
*/
$('#formElem > fieldset').each(function() {
var $fieldset = $(this);
$fieldset.children(':last').find(':input').keydown(function(e) {
if (e.which == 9) {
$('#navigation li:nth-child(' + (parseInt(current) + 1) + ') a').click();
/* force the blur for validation */
$(this).blur();
e.preventDefault();
}
});
});
/*
validates errors on all the fieldsets
records if the Form has errors in $('#formElem').data()
*/
function validateSteps() {
var FormErrors = false;
for (var i = 1; i < fieldsetCount; ++i) {
var error = validateStep(i);
if (error == -1)
FormErrors = true;
}
$('#formElem').data('errors', FormErrors);
}
/*
validates one fieldset
and returns -1 if errors found, or 1 if not
*/
function validateStep(step) {
if (step == fieldsetCount) return;
var error = 1;
var hasError = false;
$('#formElem').children(':nth-child(' + parseInt(step) + ')').find(':input:not(button)').each(function() {
var $this = $(this);
var valueLength = jQuery.trim($this.val()).length;
if (valueLength == '') {
hasError = true;
$this.css('background-color', '#FFEDEF');
} else
$this.css('background-color', '#FFFFFF');
});
var $link = $('#navigation li:nth-child(' + parseInt(step) + ') a');
$link.parent().find('.error,.checked').remove();
var valclass = 'checked';
if (hasError) {
error = -1;
valclass = 'error';
}
$('<span class="' + valclass + '"></span>').insertAfter($link);
return error;
}
/*
if there are errors don't allow the user to submit
*/
$('#registerButton').bind('click', function() {
if ($('#formElem').data('errors')) {
alert('Please correct the errors in the Form');
return false;
}
});
});
* {
margin: 0px;
padding: 0px;
}
body {
color: #444444;
font-size: 13px;
background: #f2f2f2;
font-family: "Century Gothic", Helvetica, sans-serif;
}
#content {
margin: 15px auto;
text-align: center;
width: 600px;
position: relative;
height: 100%;
}
#wrapper {
-moz-box-shadow: 0px 0px 3px #aaa;
-webkit-box-shadow: 0px 0px 3px #aaa;
box-shadow: 0px 0px 3px #aaa;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
border: 2px solid #fff;
background-color: #f9f9f9;
width: 600px;
overflow: hidden;
}
#steps {
width: 600px;
/*height:320px;*/
overflow: hidden;
}
.step {
float: left;
width: 600px;
/*height:320px;*/
}
#navigation {
height: 45px;
background-color: #e9e9e9;
border-top: 1px solid #fff;
-moz-border-radius: 0px 0px 10px 10px;
-webkit-border-bottom-left-radius: 10px;
-webkit-border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
}
#navigation ul {
list-style: none;
float: left;
margin-left: 22px;
}
#navigation ul li {
float: left;
border-right: 1px solid #ccc;
border-left: 1px solid #ccc;
position: relative;
margin: 0px 2px;
}
#navigation ul li a {
display: block;
height: 45px;
background-color: #444;
color: #777;
outline: none;
font-weight: bold;
text-decoration: none;
line-height: 45px;
padding: 0px 20px;
border-right: 1px solid #fff;
border-left: 1px solid #fff;
background: #f0f0f0;
background: -webkit-gradient( linear, left bottom, left top, color-stop(0.09, rgb(240, 240, 240)), color-stop(0.55, rgb(227, 227, 227)), color-stop(0.78, rgb(240, 240, 240)));
background: -moz-linear-gradient( center bottom, rgb(240, 240, 240) 9%, rgb(227, 227, 227) 55%, rgb(240, 240, 240) 78%)
}
#navigation ul li a:hover,
#navigation ul li.selected a {
background: #d8d8d8;
color: #666;
text-shadow: 1px 1px 1px #fff;
}
span.checked {
background: transparent url(../images/checked.png) no-repeat top left;
position: absolute;
top: 0px;
left: 1px;
width: 20px;
height: 20px;
}
span.error {
background: transparent url(../images/error.png) no-repeat top left;
position: absolute;
top: 0px;
left: 1px;
width: 20px;
height: 20px;
}
#steps form fieldset {
border: none;
padding-bottom: 20px;
}
#steps form legend {
text-align: left;
background-color: #f0f0f0;
color: #666;
font-size: 24px;
text-shadow: 1px 1px 1px #fff;
font-weight: bold;
float: left;
width: 590px;
padding: 5px 0px 5px 10px;
margin: 10px 0px;
border-bottom: 1px solid #fff;
border-top: 1px solid #d9d9d9;
}
#steps form p {
float: left;
clear: both;
margin: 5px 0px;
background-color: #f4f4f4;
border: 1px solid #fff;
width: 400px;
padding: 10px;
margin-left: 100px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
-moz-box-shadow: 0px 0px 3px #aaa;
-webkit-box-shadow: 0px 0px 3px #aaa;
box-shadow: 0px 0px 3px #aaa;
}
#steps form p label {
width: 160px;
float: left;
text-align: right;
margin-right: 15px;
line-height: 26px;
color: #666;
text-shadow: 1px 1px 1px #fff;
font-weight: bold;
}
#steps form input:not([type=radio]),
#steps form textarea,
#steps form select {
background: #ffffff;
border: 1px solid #ddd;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
outline: none;
padding: 5px;
width: 200px;
float: left;
}
#steps form input:focus {
-moz-box-shadow: 0px 0px 3px #aaa;
-webkit-box-shadow: 0px 0px 3px #aaa;
box-shadow: 0px 0px 3px #aaa;
background-color: #FFFEEF;
}
#steps form p.submit {
background: none;
border: none;
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
}
#steps form button {
border: none;
outline: none;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
color: #ffffff;
display: block;
cursor: pointer;
margin: 0px auto;
clear: both;
padding: 7px 25px;
text-shadow: 0 1px 1px #777;
font-weight: bold;
font-family: "Century Gothic", Helvetica, sans-serif;
font-size: 22px;
-moz-box-shadow: 0px 0px 3px #aaa;
-webkit-box-shadow: 0px 0px 3px #aaa;
box-shadow: 0px 0px 3px #aaa;
background: #4797ED;
}
#steps form button:hover {
background: #d8d8d8;
color: #666;
text-shadow: 1px 1px 1px #fff;
}
span.reference {
position: fixed;
left: 5px;
top: 5px;
font-size: 10px;
text-shadow: 1px 1px 1px #fff;
}
span.reference a {
color: #555;
text-decoration: none;
text-transform: uppercase;
}
span.reference a:hover {
color: #000;
}
h1 {
color: #ccc;
font-size: 36px;
text-shadow: 1px 1px 1px #fff;
padding: 20px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="content">
<div id="wrapper">
<div id="steps">
<form id="formElem" name="formElem" action="" method="post">
<fieldset class="step">
<legend>Account</legend>
<p><label for="username">User name</label><input id="username" name="username" /></p>
<p><label for="email">Email</label><input id="email" name="email" placeholder="mominriyadh#gmail.com" type="email" AUTOCOMPLETE=OFF/></p>
<p><label for="password">Password</label><input id="password" name="password" type="password" AUTOCOMPLETE=OFF/></p>
</fieldset>
<fieldset class="step">
<legend>Personal Details</legend>
<p><label for="name">Full Name</label><input id="name" name="name" type="text" AUTOCOMPLETE=OFF/></p>
<p><label for="country">Country</label><input id="country" name="country" type="text" AUTOCOMPLETE=OFF/></p>
<p><label for="phone">Phone</label><input id="phone" name="phone" placeholder="e.g. +351215555555" type="tel" AUTOCOMPLETE=OFF/></p>
<p><label for="website">Website</label><input id="website" name="website" placeholder="e.g. http://www.codrops.com" type="tel" AUTOCOMPLETE=OFF/></p>
</fieldset>
<fieldset class="step">
<legend>Payment</legend>
<p><label for="cardtype">Card</label><select id="cardtype" name="cardtype"><option>Visa</option><option>Mastercard</option><option>American Express</option></select></p>
<p><label for="cardnumber">Card number</label><input id="cardnumber" name="cardnumber" type="number" AUTOCOMPLETE=OFF/></p>
<p><label for="secure">Security code</label><input id="secure" name="secure" type="number" AUTOCOMPLETE=OFF/></p>
<p><label for="namecard">Name on Card</label><input id="namecard" name="namecard" type="text" AUTOCOMPLETE=OFF/></p>
</fieldset>
<fieldset class="step">
<legend>Settings</legend>
<p><label for="newsletter">Newsletter</label><select id="newsletter" name="newsletter"><option value="Daily" selected>Daily</option><option value="Weekly">Weekly</option><option value="Monthly">Monthly</option><option value="Never">Never</option></select></p>
<p><label for="updates">Updates</label><select id="updates" name="updates"><option value="1" selected>Package 1</option><option value="2">Package 2</option><option value="0">Don't send updates</option>
</select></p>
<p><label for="tagname">Newsletter Tag</label><input id="tagname" name="tagname" type="text" AUTOCOMPLETE=OFF/></p>
</fieldset>
<fieldset class="step">
<legend>Confirm</legend>
<p>Everything in the form was correctly filled if all the steps have a green checkmark icon. A red checkmark icon indicates that some field is missing or filled out with invalid data. In this last step the user can confirm the submission of the
form. </p>
<p class="submit"><button id="registerButton" type="submit">Register</button></p>
</fieldset>
</form>
</div>
<div id="navigation" style="display:none;">
<ul>
<li class="selected">Account</li>
<li>Personal Details</li>
<li>Payment</li>
<li>Settings</li>
<li>Confirm</li>
</ul>
</div>
</div>
</div>

Can't Get If / Else Statement To Trigger

Here's my full code for what I'm working on:
https://codepen.io/sygilmore89/pen/BREvqG?editors=1010
The exact issue I'm having is that the if / else statement at the end isn't triggering like I would hope. I added the counter variable, and listed it to verify it's at the number I need, to account for an exact sequence of clicks to produce a particular outcome. If the player doesn't do that exact sequence, then the game should end in another way.
I'm puzzled as I don't see how it isn't triggering that counter is three AND the bottom left div is without text. Instead of putting the X where it should go at the point, it only continues to trigger the else statement. I probably should scrap it and try another method entirely but at this point I'm just confused as to why that exact line isn't working.
$(document).ready(function() {
var counter = 0;
$("#letterChoice").hide();
$("#button1").on("click", function() {
$("#letterChoice").show();
});
$("#buttonR").on("click", function() {
$("#letterChoice").show();
$("#topLeft").text("");
$("#topLeft").off("click");
$("#topCenter").text("");
$("#topCenter").off("click");
$("#topRight").text("");
$("#topRight").off("click");
$("#middleLeft").text("");
$("#middleLeft").off("click");
$("#middleMid").text("");
$("#middleMid").off("click");
$("#middleRight").text("");
$("#middleRight").off("click");
$("#bottomLeft").text("");
$("#bottomLeft").off("click");
$("#bottomMid").text("");
$("#bottomMid").off("click");
$("#bottomRight").text("");
$("#bottomRight").off("click");
counter = 0;
$("#test").text(counter);
});
$("#buttonX").on("click", function() {
$("#middleMid").text("O");
$("#middleMid").off("click");
if ($("#topLeft").text("")) {
$("#topLeft").on("click", function() {
$("#topLeft").text("X");
$("#topCenter").text("O");
counter++; //1
$("#test").text(counter);
});
}
if ($("#bottomMid").text("")) {
$("#bottomMid").on("click", function() {
$("#bottomMid").text("X");
$("#middleLeft").text("O");
counter++;
$("#test").text(counter);
});
}
if ($("#middleRight").text("")) {
$("#middleRight").on("click", function() {
$("#middleRight").text("X");
$("#topRight").text("O");
counter++;
$("#test").text(counter);
});
}
if ($("#bottomLeft").text("") && counter == 3) {
$("#bottomLeft").on("click", function() {
$("#bottomLeft").text("X");
$("#bottomRight").text("O");
});
} else {
$("#bottomLeft").on("click", function() {
$("#bottomLeft").text("X");
$("#bottomMid").text("O");
$("#topLeft").off("click");
$("#topCenter").off("click");
$("#topRight").off("click");
$("#middleLeft").off("click");
$("#middleMid").off("click");
$("#middleRight").off("click");
$("#bottomLeft").off("click");
$("#bottomMid").off("click");
$("#bottomRight").off("click");
});
}
});
});
body {
margin-top: 15px;
}
#board {
background-color: white;
width: 480px;
height: 480px;
}
.title {
margin-bottom: 15px;
}
#topLeft {
border: 1px solid black;
height: 160px;
width: 160px;
font-size: 92.5px;
}
#topCenter {
border: 1px solid black;
height: 160px;
width: 160px;
font-size: 92.5px;
}
#topRight {
border: 1px solid black;
height: 160px;
width: 160px;
font-size: 92.5px;
}
#middleLeft {
border: 1px solid black;
height: 160px;
width: 160px;
font-size: 92.5px;
}
#middleMid {
border: 1px solid black;
height: 160px;
width: 160px;
font-size: 92.5px;
}
#middleRight {
border: 1px solid black;
height: 160px;
width: 160px;
font-size: 92.5px;
}
#bottomLeft {
border: 1px solid black;
height: 160px;
width: 160px;
font-size: 92.5px;
}
#bottomMid {
border: 1px solid black;
height: 160px;
width: 160px;
font-size: 92.5px;
}
#bottomRight {
border: 1px solid black;
height: 160px;
width: 160px;
font-size: 92.5px;
}
#buttonX {
margin-bottom: 20px;
box-shadow: 0px 0px 1px 1px black;
border-radius: 2px;
outline: none;
background-color: #ccc;
}
#buttonR {
margin-bottom: 20px;
box-shadow: 0px 0px 1px 1px black;
border-radius: 2px;
outline: none;
background-color: #ccc;
}
#buttonO {
margin-bottom: 20px;
box-shadow: 0px 0px 1px 1px black;
border-radius: 2px;
outline: none;
background-color: #ccc;
}
#button1 {
margin-bottom: 20px;
box-shadow: 0px 0px 1px 1px black;
border-radius: 2px;
outline: none;
background-color: #ccc;
}
#letterChoice {
margin-left: 33.5px;
}
#choices {
margin-left: 175px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" />
<div class="container text-center" id="board">
<h1 class="title">Tic Tac Toe</h1>
<div class="row" id="choices">
<input type="button" value="New Game" id="button1" />
<div id="letterChoice"><input type="button" value="X" id="buttonX" /> or <input type="button" value="O" id="buttonO" /></div>
</div>
<div><input type="button" value="Reset" id="buttonR" /></div>
<div id="test">Test it</div>
<div class="row" id="topRow">
<div id="topLeft">
</div>
<div id="topCenter">
</div>
<div id="topRight">
</div>
</div>
<div class="row" id="middleRow">
<div id="middleLeft">
</div>
<div id="middleMid">
</div>
<div id="middleRight">
</div>
</div>
<div class="row" id="bottomRow">
<div id="bottomLeft">
</div>
<div id="bottomMid">
</div>
<div id="bottomRight">
</div>
</div>
</div>

Your condition is setting the text and evaluating the result instead of checking if it equals an empty string. You're looking for:
if($("#bottomLeft").text() == '' && counter == 3)
What's happening with your existing code is it sets the text to an empty string and then evaluates the result, which is a jQuery object that will always evaluate to true.

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>

how to styling initial place of rubaxa sortable element

I create sortable element using rubaxa's sortable library. I want to custom the style of element's initial place before it completely moved, like this sortable
where it background is azure with dashed border.
HTML
<ul id="sortableContent">
<li class="input-group fileItem">
<div class="input-group">
<input class="form-control inputItem" name="page_content[]" type="text"><span class="rm-content input-group-addon"><i class="fa fa-times"></i></span><span class="mv-content input-group-addon"><i class="fa fa-arrows"></i></span>
</div>
</li>
<li class="input-group fileItem">
<div class="input-group">
<input class="form-control inputItem" name="page_content[]" type="text"><span class="rm-content input-group-addon"><i class="fa fa-times"></i></span><span class="mv-content input-group-addon"><i class="fa fa-arrows"></i></span>
</div>
</li>
</ul>
CSS
.input-group .form-control {
position: relative;
z-index: 2;
float: left;
width: 100%;
margin-bottom: 0;
}
.input-group .form-control:not(:first-child):not(:last-child),
#sortableContent .input-group-addon:not(:first-child):not(:last-child) {
border-radius: 0;
}
.input-group .form-control:first-child,
.input-group-addon:first-child {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
#sortableContent .input-group-addon {
width: 1%;
}
#sortableContent .input-group-addon {
padding: 5px 7px;
font-size: 12px;
line-height: 1;
text-align: center;
background-color: #fff;
border-top: 1px solid #ddd;
border-bottom: 1px solid #ddd;
border-right: 1px solid #ddd;
border-left: none;
}
#sortableContent li, #sortableContent div, #sortableContent input {
width: 100%;
}
#sortableContent { margin-bottom: 15px; padding-left: 0;}
#sortableContent li.fileItem { list-style: none; margin: 5px 0; }
#sortableContent li:last-child, #sortableContent li.fileItem .input-group { margin-bottom: 0; }
#sortableContent li.fileItem .rm-content { border-left-style: none; cursor: pointer; color: red; }
#sortableContent li.fileItem .rm-content:hover { background: #ccc; }
#sortableContent li.fileItem .mv-content { z-index: 1000; cursor: move; cursor: -webkit-grabbing; }
Here the jsfiddle.

What you're looking for is the ghostClass option:
var sortable = new Sortable(el, {
...
ghostClass = 'my-custom-class',
...
})
Just make 'my-custom-class' have the css you want (and name) and that's what it will look like mid drag.