How to remove either bullets / numbers from survey form

How to remove either bullets / numbers from survey form - javascript

I have developed a quiz form wherein form before question both bullets and numbers are coming. I want to remove one of this (either bullets or number).
Please see this image
* { margin:0; padding:0; }
.floatleft {float:left !important;}
.floatright {float:right !important;}
.floatnone {float:none !important;}
.alignleft {text-align:left !important;}
.alignright {text-align:right !important;}
.aligncenter {text-align:center !important;}
.no-display { display:none; }
.no-margin { margin:0 !important; }
.no-padding { padding:0 !important; }
a:focus, button:focus {outline:0px solid}
img {
max-width:100%;
height:auto;
border:0;
vertical-align:top;
}
.fix {overflow:hidden}
h1, h2, h3, h4, h5, h6 {
margin: 0 0 10px;
color:#000;
}
a {transition: all 0.3s ease 0s;text-decoration:none;}
a:hover {
color: #fff;
text-decoration: none;
}
a:active, a:hover, a:focus {
outline: 0 none;
text-decoration: none
}
.clear{clear:both}
#wrapper
{
height:100%;
width:100%;
}
body {
color: #000;
height:100%;
width:100%;
font-size: 16px;
line-height: 20px;
text-align: left;
overflow-x:hidden;
}
#header {
width:100%;
height:100px;
}
#logo{
clear:both;
margin:20px;
}
#logo a {
display: block;
margin-left: -18px;
position: relative;
}
#quiz input {
vertical-align: middle;
}
#quiz ol {
margin: 0 0 10px 20px;
}
#quiz ol li {
margin: 0 0 20px 0;
}
#quiz ol li div {
padding: 4px 0;
}
#quiz h3 {
font-size: 17px; margin: 0 0 1px 0; color: #000;
font-family: 'Roboto', sans-serif;
font-weight:600;
}
#quiz label
{
font-family: 'Roboto', sans-serif;
font-weight:normal;
}
#results {
font: 44px Georgia, Serif;
}
center
{
font-size:xx-large;
padding:20px 0 50px 0;
font-family: 'Roboto', sans-serif;
}
.form-footer .button {
margin-right: 10px;
margin-bottom: 5px;
color: #fff;
text-shadow: 0 1px rgba(0, 0, 0, 0.08);
background-color: #ecae3d;
border: 0;
height: 42px;
line-height: 1;
font-size: 15px;
cursor: pointer;
padding: 0 35px;
text-align: center;
vertical-align: top;
display: inline-block;
-webkit-user-drag: none;
font-family: "Roboto", Arial, Helvetica, sans-serif;
font-weight: 400;
}
.form-footer .button:hover{
background-color:#DBDBDB;
color:#000;
}
#quiz {
left: 50%;
margin-left: 25%;
}
#footer{
width:100%;
height:80px;
background-color:#2D2D2D;
color:#9C9C9C;
position:absolute;
clear:both;
margin-top:2%;
}
#footer #footer-center
{
font-size:18px;
margin:auto;
font-family: "Roboto", Arial, Helvetica, sans-serif;
clear:both;
padding:20px 0 0 0 ;
}
.survey-form
{
width:100%;
min-height:500px
}
li{
padding-bottom:20px;
margin-left:0px;
padding-left:0px;
}
ul
{
padding:0px;
margin:0px;
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<link rel="stylesheet" type="text/css" href="CSS/bootstrap.css"/>
<link rel="stylesheet" type="text/css" href="CSS/style.css"/>
<link rel="stylesheet" type="text/css" href="CSS/responsive.css"/>
</head>
<body class="no-transition stretched">
<div id="wrapper" class="clearfix">
<header id="header" class="full-header">
<!-- Logo-->
<div id="logo">
<img src="images/sequreone-logo.png" alt="Secqureone Logo">
</div>
<!-- #logo end -->
</header>
<center></center>
<div class="survey-form" id="form">
<form action="contact.php" method="post" id="quiz">
<ul>
<li>
<h3>2+2=0?</h3>
<div>
<input type="radio" name="question-1-answers" id="question-1-answers-A" value="A. Yes" required/>
<label for="question-1-answers-A">A) Yes </label>
</div>
<div>
<input type="radio" name="question-1-answers" id="question-1-answers-B" value="B. No" required/>
<label for="question-1-answers-B">B) No</label>
</div>
</li>
<li>
<h3>2+9</h3>
<div>
<input type="radio" name="question-2-answers" id="question-2-answers-A" value="A. PCI" required/>
<label for="question-2-answers-A">A) 11</label>
</div>
<div>
<input type="radio" name="question-2-answers" id="question-2-answers-B" value="B. HIPAA" required/>
<label for="question-2-answers-B">B) 12</label>
</div>
<div>
<input type="radio" name="question-2-answers" id="question-2-answers-C" value="C. FISMA" required/>
<label for="question-2-answers-C">C) 10</label>
</div>
<div>
<input type="radio" name="question-2-answers" id="question-2-answers-D" value="D. GLBA" required/>
<label for="question-2-answers-D">D) 9</label>
</div>
<div>
<input type="radio" name="question-2-answers" id="question-2-answers-E" value="E. SOX" required />
<label for="question-2-answers-E">E) 99</label>
</div>
<div>
<input type="radio" name="question-2-answers" id="question-2-answers-F" value="F. ISO27001" required/>
<label for="question-2-answers-F">F) 27001</label>
</div>
<div>
<input type="radio" name="question-2-answers" id="question-2-answers-G" value="G. others" required/>
<label for="question-2-answers-G">G) Others</label>
<input type="text" />
</div>
</li>
<li>
<h3>8*5=40?</h3>
<div>
<input type="radio" name="question-3-answers" id="question-3-answers-A" value="A. Yes" required/>
<label for="question-3-answers-A">A) Yes </label>
</div>
<div>
<input type="radio" name="question-3-answers" id="question-3-answers-B" value="B. No" required/>
<label for="question-3-answers-B">B) No </label>
</div>
</li>
<li>
<h3>7/8=1?</h3>
<div>
<input type="radio" name="question-4-answers" id="question-4-answers-A" value="A. Yes" required/>
<label for="question-4-answers-A">A) Yes</label>
</div>
<div>
<input type="radio" name="question-4-answers" id="question-4-answers-B" value="B. No" required/>
<label for="question-4-answers-B">B) No</label>
</div>
</li>
<li>
<h3>14-2=12</h3>
<div>
<input type="radio" name="question-5-answers" id="question-5-answers-A" value="A. Yes" required/>
<label for="question-5-answers-A">A) Yes </label>
</div>
<div>
<input type="radio" name="question-5-answers" id="question-5-answers-B" value="B. No" required/>
<label for="question-5-answers-B">B) No </label>
</div>
</li>
<li>
</ul>
<div class="form-footer text-left">
<button type="submit" id="submit" class="button btn-primary">Submit</button>
</div>
</form>
<div class="form-footer text-left">
<button id="next" data-btntext-sending="Next" class="NextButton">Next</button>
</div>
</div>
<div id="footer">
<center id="footer-center"> Copyright © 2016 Secqureone,Inc. All rights reserved </center>
</div>
</div>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script>
var currentPage = 0;
var pages = 5;
var itemsPerPage = 3;
$("li h3").each(function(i, e){
$(e).text((i + 1) + ") " + $(e).text());
});
$("#next").click(function() {
$("li")
//.css("background", "#FFF")
.hide();
for(i = 1; i <= itemsPerPage; i++) {
$("li:nth-child(" + ((currentPage * itemsPerPage) + i) + ")")
//.css("background" , "red")
.show();
$("#submit").hide();
}
if(currentPage < pages - 1) {
currentPage += 1;
} else {
currentPage = 0;
$("#next").hide();
$("#submit").show();
}
});
$("#next").click();
</script>
</body>
</html>
please help how to solve this.

You add list-style: none; to your ul tag
* { margin:0; padding:0; }
.floatleft {float:left !important;}
.floatright {float:right !important;}
.floatnone {float:none !important;}
.alignleft {text-align:left !important;}
.alignright {text-align:right !important;}
.aligncenter {text-align:center !important;}
.no-display { display:none; }
.no-margin { margin:0 !important; }
.no-padding { padding:0 !important; }
a:focus, button:focus {outline:0px solid}
img {
max-width:100%;
height:auto;
border:0;
vertical-align:top;
}
.fix {overflow:hidden}
h1, h2, h3, h4, h5, h6 {
margin: 0 0 10px;
color:#000;
}
a {transition: all 0.3s ease 0s;text-decoration:none;}
a:hover {
color: #fff;
text-decoration: none;
}
a:active, a:hover, a:focus {
outline: 0 none;
text-decoration: none
}
.clear{clear:both}
#wrapper
{
height:100%;
width:100%;
}
body {
color: #000;
height:100%;
width:100%;
font-size: 16px;
line-height: 20px;
text-align: left;
overflow-x:hidden;
}
#header {
width:100%;
height:100px;
}
#logo{
clear:both;
margin:20px;
}
#logo a {
display: block;
margin-left: -18px;
position: relative;
}
#quiz input {
vertical-align: middle;
}
#quiz ol {
margin: 0 0 10px 20px;
}
#quiz ul {
list-style: none;
}
#quiz ol li {
margin: 0 0 20px 0;
}
#quiz ol li div {
padding: 4px 0;
}
#quiz h3 {
font-size: 17px; margin: 0 0 1px 0; color: #000;
font-family: 'Roboto', sans-serif;
font-weight:600;
}
#quiz label
{
font-family: 'Roboto', sans-serif;
font-weight:normal;
}
#results {
font: 44px Georgia, Serif;
}
center
{
font-size:xx-large;
padding:20px 0 50px 0;
font-family: 'Roboto', sans-serif;
}
.form-footer .button {
margin-right: 10px;
margin-bottom: 5px;
color: #fff;
text-shadow: 0 1px rgba(0, 0, 0, 0.08);
background-color: #ecae3d;
border: 0;
height: 42px;
line-height: 1;
font-size: 15px;
cursor: pointer;
padding: 0 35px;
text-align: center;
vertical-align: top;
display: inline-block;
-webkit-user-drag: none;
font-family: "Roboto", Arial, Helvetica, sans-serif;
font-weight: 400;
}
.form-footer .button:hover{
background-color:#DBDBDB;
color:#000;
}
#quiz {
left: 50%;
margin-left: 25%;
}
#footer{
width:100%;
height:80px;
background-color:#2D2D2D;
color:#9C9C9C;
position:absolute;
clear:both;
margin-top:2%;
}
#footer #footer-center
{
font-size:18px;
margin:auto;
font-family: "Roboto", Arial, Helvetica, sans-serif;
clear:both;
padding:20px 0 0 0 ;
}
.survey-form
{
width:100%;
min-height:500px
}
li{
padding-bottom:20px;
margin-left:0px;
padding-left:0px;
}
ul
{
padding:0px;
margin:0px;
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<link rel="stylesheet" type="text/css" href="CSS/bootstrap.css"/>
<link rel="stylesheet" type="text/css" href="CSS/style.css"/>
<link rel="stylesheet" type="text/css" href="CSS/responsive.css"/>
</head>
<body class="no-transition stretched">
<div id="wrapper" class="clearfix">
<header id="header" class="full-header">
<!-- Logo-->
<div id="logo">
<img src="images/sequreone-logo.png" alt="Secqureone Logo">
</div>
<!-- #logo end -->
</header>
<center></center>
<div class="survey-form" id="form">
<form action="contact.php" method="post" id="quiz">
<ul>
<li>
<h3>2+2=0?</h3>
<div>
<input type="radio" name="question-1-answers" id="question-1-answers-A" value="A. Yes" required/>
<label for="question-1-answers-A">A) Yes </label>
</div>
<div>
<input type="radio" name="question-1-answers" id="question-1-answers-B" value="B. No" required/>
<label for="question-1-answers-B">B) No</label>
</div>
</li>
<li>
<h3>2+9</h3>
<div>
<input type="radio" name="question-2-answers" id="question-2-answers-A" value="A. PCI" required/>
<label for="question-2-answers-A">A) 11</label>
</div>
<div>
<input type="radio" name="question-2-answers" id="question-2-answers-B" value="B. HIPAA" required/>
<label for="question-2-answers-B">B) 12</label>
</div>
<div>
<input type="radio" name="question-2-answers" id="question-2-answers-C" value="C. FISMA" required/>
<label for="question-2-answers-C">C) 10</label>
</div>
<div>
<input type="radio" name="question-2-answers" id="question-2-answers-D" value="D. GLBA" required/>
<label for="question-2-answers-D">D) 9</label>
</div>
<div>
<input type="radio" name="question-2-answers" id="question-2-answers-E" value="E. SOX" required />
<label for="question-2-answers-E">E) 99</label>
</div>
<div>
<input type="radio" name="question-2-answers" id="question-2-answers-F" value="F. ISO27001" required/>
<label for="question-2-answers-F">F) 27001</label>
</div>
<div>
<input type="radio" name="question-2-answers" id="question-2-answers-G" value="G. others" required/>
<label for="question-2-answers-G">G) Others</label>
<input type="text" />
</div>
</li>
<li>
<h3>8*5=40?</h3>
<div>
<input type="radio" name="question-3-answers" id="question-3-answers-A" value="A. Yes" required/>
<label for="question-3-answers-A">A) Yes </label>
</div>
<div>
<input type="radio" name="question-3-answers" id="question-3-answers-B" value="B. No" required/>
<label for="question-3-answers-B">B) No </label>
</div>
</li>
<li>
<h3>7/8=1?</h3>
<div>
<input type="radio" name="question-4-answers" id="question-4-answers-A" value="A. Yes" required/>
<label for="question-4-answers-A">A) Yes</label>
</div>
<div>
<input type="radio" name="question-4-answers" id="question-4-answers-B" value="B. No" required/>
<label for="question-4-answers-B">B) No</label>
</div>
</li>
<li>
<h3>14-2=12</h3>
<div>
<input type="radio" name="question-5-answers" id="question-5-answers-A" value="A. Yes" required/>
<label for="question-5-answers-A">A) Yes </label>
</div>
<div>
<input type="radio" name="question-5-answers" id="question-5-answers-B" value="B. No" required/>
<label for="question-5-answers-B">B) No </label>
</div>
</li>
<li>
</ul>
<div class="form-footer text-left">
<button type="submit" id="submit" class="button btn-primary">Submit</button>
</div>
</form>
<div class="form-footer text-left">
<button id="next" data-btntext-sending="Next" class="NextButton">Next</button>
</div>
</div>
<div id="footer">
<center id="footer-center"> Copyright © 2016 Secqureone,Inc. All rights reserved </center>
</div>
</div>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script>
var currentPage = 0;
var pages = 5;
var itemsPerPage = 3;
$("li h3").each(function(i, e){
$(e).text((i + 1) + ") " + $(e).text());
});
$("#next").click(function() {
$("li")
//.css("background", "#FFF")
.hide();
for(i = 1; i <= itemsPerPage; i++) {
$("li:nth-child(" + ((currentPage * itemsPerPage) + i) + ")")
//.css("background" , "red")
.show();
$("#submit").hide();
}
if(currentPage < pages - 1) {
currentPage += 1;
} else {
currentPage = 0;
$("#next").hide();
$("#submit").show();
}
});
$("#next").click();
</script>
</body>
</html>

Either remove jQuery code
$("li h3").each(function(i, e){
$(e).text((i + 1) + ") " + $(e).text());
});
OR add style
#quiz ul li{
list-style:none;
}
Here is the updated code:
* {
margin: 0;
padding: 0;
}
#quiz ul li {
list-style: none;
}
.floatleft {
float: left !important;
}
.floatright {
float: right !important;
}
.floatnone {
float: none !important;
}
.alignleft {
text-align: left !important;
}
.alignright {
text-align: right !important;
}
.aligncenter {
text-align: center !important;
}
.no-display {
display: none;
}
.no-margin {
margin: 0 !important;
}
.no-padding {
padding: 0 !important;
}
a:focus,
button:focus {
outline: 0px solid
}
img {
max-width: 100%;
height: auto;
border: 0;
vertical-align: top;
}
.fix {
overflow: hidden
}
h1,
h2,
h3,
h4,
h5,
h6 {
margin: 0 0 10px;
color: #000;
}
a {
transition: all 0.3s ease 0s;
text-decoration: none;
}
a:hover {
color: #fff;
text-decoration: none;
}
a:active,
a:hover,
a:focus {
outline: 0 none;
text-decoration: none
}
.clear {
clear: both
}
#wrapper {
height: 100%;
width: 100%;
}
body {
color: #000;
height: 100%;
width: 100%;
font-size: 16px;
line-height: 20px;
text-align: left;
overflow-x: hidden;
}
#header {
width: 100%;
height: 100px;
}
#logo {
clear: both;
margin: 20px;
}
#logo a {
display: block;
margin-left: -18px;
position: relative;
}
#quiz input {
vertical-align: middle;
}
#quiz ol {
margin: 0 0 10px 20px;
}
#quiz ol li {
margin: 0 0 20px 0;
}
#quiz ol li div {
padding: 4px 0;
}
#quiz h3 {
font-size: 17px;
margin: 0 0 1px 0;
color: #000;
font-family: 'Roboto', sans-serif;
font-weight: 600;
}
#quiz label {
font-family: 'Roboto', sans-serif;
font-weight: normal;
}
#results {
font: 44px Georgia, Serif;
}
center {
font-size: xx-large;
padding: 20px 0 50px 0;
font-family: 'Roboto', sans-serif;
}
.form-footer .button {
margin-right: 10px;
margin-bottom: 5px;
color: #fff;
text-shadow: 0 1px rgba(0, 0, 0, 0.08);
background-color: #ecae3d;
border: 0;
height: 42px;
line-height: 1;
font-size: 15px;
cursor: pointer;
padding: 0 35px;
text-align: center;
vertical-align: top;
display: inline-block;
-webkit-user-drag: none;
font-family: "Roboto", Arial, Helvetica, sans-serif;
font-weight: 400;
}
.form-footer .button:hover {
background-color: #DBDBDB;
color: #000;
}
#quiz {
left: 50%;
margin-left: 25%;
}
#footer {
width: 100%;
height: 80px;
background-color: #2D2D2D;
color: #9C9C9C;
position: absolute;
clear: both;
margin-top: 2%;
}
#footer #footer-center {
font-size: 18px;
margin: auto;
font-family: "Roboto", Arial, Helvetica, sans-serif;
clear: both;
padding: 20px 0 0 0;
}
.survey-form {
width: 100%;
min-height: 500px
}
li {
padding-bottom: 20px;
margin-left: 0px;
padding-left: 0px;
}
ul {
padding: 0px;
margin: 0px;
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" type="text/css" href="CSS/bootstrap.css" />
<link rel="stylesheet" type="text/css" href="CSS/style.css" />
<link rel="stylesheet" type="text/css" href="CSS/responsive.css" />
</head>
<body class="no-transition stretched">
<div id="wrapper" class="clearfix">
<header id="header" class="full-header">
<!-- Logo-->
<div id="logo">
<a href="index.html" class="standard-logo">
<img src="images/sequreone-logo.png" alt="Secqureone Logo">
</a>
</div>
<!-- #logo end -->
</header>
<center></center>
<div class="survey-form" id="form">
<form action="contact.php" method="post" id="quiz">
<ul>
<li>
<h3>2+2=0?</h3>
<div>
<input type="radio" name="question-1-answers" id="question-1-answers-A" value="A. Yes" required/>
<label for="question-1-answers-A">A) Yes</label>
</div>
<div>
<input type="radio" name="question-1-answers" id="question-1-answers-B" value="B. No" required/>
<label for="question-1-answers-B">B) No</label>
</div>
</li>
<li>
<h3>2+9</h3>
<div>
<input type="radio" name="question-2-answers" id="question-2-answers-A" value="A. PCI" required/>
<label for="question-2-answers-A">A) 11</label>
</div>
<div>
<input type="radio" name="question-2-answers" id="question-2-answers-B" value="B. HIPAA" required/>
<label for="question-2-answers-B">B) 12</label>
</div>
<div>
<input type="radio" name="question-2-answers" id="question-2-answers-C" value="C. FISMA" required/>
<label for="question-2-answers-C">C) 10</label>
</div>
<div>
<input type="radio" name="question-2-answers" id="question-2-answers-D" value="D. GLBA" required/>
<label for="question-2-answers-D">D) 9</label>
</div>
<div>
<input type="radio" name="question-2-answers" id="question-2-answers-E" value="E. SOX" required />
<label for="question-2-answers-E">E) 99</label>
</div>
<div>
<input type="radio" name="question-2-answers" id="question-2-answers-F" value="F. ISO27001" required/>
<label for="question-2-answers-F">F) 27001</label>
</div>
<div>
<input type="radio" name="question-2-answers" id="question-2-answers-G" value="G. others" required/>
<label for="question-2-answers-G">G) Others</label>
<input type="text" />
</div>
</li>
<li>
<h3>8*5=40?</h3>
<div>
<input type="radio" name="question-3-answers" id="question-3-answers-A" value="A. Yes" required/>
<label for="question-3-answers-A">A) Yes</label>
</div>
<div>
<input type="radio" name="question-3-answers" id="question-3-answers-B" value="B. No" required/>
<label for="question-3-answers-B">B) No</label>
</div>
</li>
<li>
<h3>7/8=1?</h3>
<div>
<input type="radio" name="question-4-answers" id="question-4-answers-A" value="A. Yes" required/>
<label for="question-4-answers-A">A) Yes</label>
</div>
<div>
<input type="radio" name="question-4-answers" id="question-4-answers-B" value="B. No" required/>
<label for="question-4-answers-B">B) No</label>
</div>
</li>
<li>
<h3>14-2=12</h3>
<div>
<input type="radio" name="question-5-answers" id="question-5-answers-A" value="A. Yes" required/>
<label for="question-5-answers-A">A) Yes</label>
</div>
<div>
<input type="radio" name="question-5-answers" id="question-5-answers-B" value="B. No" required/>
<label for="question-5-answers-B">B) No</label>
</div>
</li>
<li>
</ul>
<div class="form-footer text-left">
<button type="submit" id="submit" class="button btn-primary">Submit</button>
</div>
</form>
<div class="form-footer text-left">
<button id="next" data-btntext-sending="Next" class="NextButton">Next</button>
</div>
</div>
<div id="footer">
<center id="footer-center">Copyright © 2016 Secqureone,Inc. All rights reserved</center>
</div>
</div>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script>
var currentPage = 0;
var pages = 5;
var itemsPerPage = 3;
$("#next").click(function() {
$("li")
//.css("background", "#FFF")
.hide();
for (i = 1; i <= itemsPerPage; i++) {
$("li:nth-child(" + ((currentPage * itemsPerPage) + i) + ")")
//.css("background" , "red")
.show();
$("#submit").hide();
}
if (currentPage < pages - 1) {
currentPage += 1;
} else {
currentPage = 0;
$("#next").hide();
$("#submit").show();
}
});
$("#next").click();
</script>
</body>
</html>

Related

Issue while displaying div contents that changes on navbar selection

By referring to Navbar that changes div contents all in one page I was trying to make user information page (with the help of xampp, mysql, html & php) using the following code:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js"></script>
<style>
.header {
width:100%;
height:auto;
padding-bottom: 0px;
background-color: #ADD8E6;
overflow: hidden;
/*overflow: scroll;*/
text-overflow: ellipsis;;
}
#img1
{
float:left;
padding-left: 10px;
padding-top: 5px;
padding-bottom: 3px;
width:auto;
height:100px;
}
#img2
{
float:left;
padding-left: 5px;
padding-top: 5px;
padding-bottom: 3px;
width:auto;
height:100px;
margin-left:5px;
}
#img3
{
position: absolute;
top: 6px;
right: 16px;
width:180px;
height:90px;
}
#header_text_1 {
padding-top: 10px;
padding-right: 200px;
text-align: center;
font-size:20px;
font-weight: bolder;
}
#header_text_2 {
padding-top: 2px;
padding-right: 200px;
font-size:20px;
text-align: center;
font-weight: bolder;
}
#header_text_3 {
padding-top: 2px;
padding-right: 200px;
font-size:20px;
text-align: center;
font-weight: bolder;
}
.header p { margin:0;
}
#media screen and (max-width: 750px) {
#img1 #img2 {
float: none;
display: block;
}
#img3 {
float: none;
}
#header_text_1 {
margin-top: 105px;
font-size: 2.8vw;
text-align: left;
margin-left: auto;
margin-right: auto;
}
#header_text_2 {
font-size: 2.8vw;
text-align: left;
}
#header_text_3 {
font-size: 2.8vw;
text-align: left;
}
}
.topnav {
overflow: hidden;
background-color: #ADD8E6;
padding-top: 5px;
}
.topnav a {
float: left;
display: block;
color: #000000;
font-weight: bolder;
text-align: center;
padding: 5px 16px;
text-decoration: none;
font-size: 17px;
}
/*.active {
background-color: #04AA6D;
color: white;
}*/
.topnav .icon {
display: none;
}
.dropdown {
float: left;
overflow: hidden;
}
.dropdown .dropbtn {
font-size: 18px;
font-weight: bolder;
border: none;
outline: none;
color: black;
padding: 5px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
float: none;
color: black;
padding: 10px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.topnav a:hover, .dropdown:hover .dropbtn {
background-color: yellow;
color: black;
}
.dropdown-content a:hover {
background-color: #90EE90;
color: black;
}
.dropdown:hover .dropdown-content {
display: block;
}
#media screen and (max-width: 600px) {
.topnav a:not(:first-child), .dropdown .dropbtn {
display: none;
}
.topnav a.icon {
float: right;
display: block;
}
}
#media screen and (max-width: 600px) {
.topnav.responsive {position: relative;}
.topnav.responsive .icon {
position: absolute;
right: 0;
top: 0;
}
.topnav.responsive a {
float: none;
display: block;
text-align: left;
}
.topnav.responsive .dropdown {float: none;}
.topnav.responsive .dropdown-content {position: relative;}
.topnav.responsive .dropdown .dropbtn {
display: block;
width: 100%;
text-align: left;
}
}
#userid:hover {
background-color: none;
}
main div {
display: none;
padding: 20px;
}
.active {
display: block;
}
table {
border-collapse: collapse;
width: 100%;
}
th, td {
text-align: center;
padding: 8px;
width: 100px;
}
tr:nth-child(even) {background-color: #f2f2f2;}
table, th, td {
border: 1px solid #000 !important;
}
/* Firefox */
input[type=number] {
-moz-appearance: textfield;
}
/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
input[type=text], select, input[type=number], input[type=email] {
width: 100%;
padding: 12px;
border: 1px solid #ccc;
border-radius: 4px;
resize: vertical;
}
label {
padding: 12px 12px 12px 0;
display: inline-block;
font-size: larger;
}
input[type=submit] {
background-color: #04AA6D;
color: white;
padding: 12px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
float: right;
font-size: large;
}
input[type=submit]:hover {
background-color: #45a049;
}
.container {
border-radius: 5px;
background-color: #f2f2f2;
padding: 20px;
}
.col-25 {
float: left;
width: 25%;
margin-top: 6px;
}
.col-75 {
float: left;
width: 75%;
margin-top: 6px;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
/* Responsive layout - when the screen is less than 600px wide, make the two columns stack on top of each other instead of next to each other */
#media screen and (max-width: 600px) {
.col-25, .col-75, input[type=submit] {
width: 100%;
margin-top: 0;
}
}
</style>
</head>
<body style="margin: 0; font-family: Arial, Helvetica, sans-serif;">
<div class="header">
<img id="img1" src="images/img1.png" />
<img id="img2" src="images/img2.png" />
<div>
<p id="header_text_1">AAAAAAAAAAA</p>
<p id="header_text_2">BBBBBBBBBBB</p>
<p id="header_text_3">CCCCCCCCCCC</p>
</div>
<img id="img3" src="images/img3.png" />
</div>
<div class="topnav" id="myTopnav">
<a id="home" data-id="1" style="font-size: 18px; color: black;" href="#">Home</a>
<div class="dropdown">
<button class="dropbtn">Information1<i class="fa fa-caret-down" style="padding-left: 5px;"></i></button>
<div class="dropdown-content" id="myDropdown">
Content 2
Content 3
Content 4
</div>
</div>
<div class="dropdown">
<button class="dropbtn">Information2<i class="fa fa-caret-down" style="padding-left: 5px;"></i></button>
<div class="dropdown-content" id="myDropdown">
Content 5
Content 6
Content 7
</div>
</div>
<div class="dropdown">
<button class="dropbtn">Information3<i class="fa fa-caret-down" style="padding-left: 5px;"></i></button>
<div class="dropdown-content" id="myDropdown">
Content 8
Content 9
Content 10
</div>
</div>
<div class="dropdown">
<button class="dropbtn">Information4<i class="fa fa-caret-down" style="padding-left: 5px;"></i></button>
<div class="dropdown-content" id="myDropdown">
Content 11
Content 12
</div>
</div>
<a id="logout" style="font-size: 18px; color: red;" href="test.html">LOGOUT</a>
<a href="javascript:void(0);" class="icon" onclick="resp_navbar()">
☰
</a>
</div>
<main>
<div class='active' style="padding-left: 20px; padding-right: 20px;">
<p style="font-size: 20px; font-weight: bolder">Welcome <a id="userid" style="font-weight: bolder; font-size: 20px; color: blue;"></a></p>
</div>
<div id="viewprof" style="overflow-x: auto; padding-left: 50px; padding-right: 50px; padding-top: 50px;">
<table id="tblProducts" border="1px" style="width:100%; line-height:20px;">
<tbody id="myTable">
</tbody>
</table>
</div>
<div id="updtprof">
<h2 style="padding-left: 20px; color: green; padding-bottom: 15px; text-align: center"><u>Update Profile</u></h2>
<div class="container">
<form id="formdata" action="signup_submit.php" method="post" onsubmit="return checkall();">
<div class="row">
<div class="col-25">
<label for="compname"><b>Company Name *</b></label>
</div>
<div class="col-75">
<input type="text" oninput="this.value = this.value.replace(/[^A-Za-z, ]/, '')" id="compname" name="compname" placeholder="Your Company Name.." required>
</div>
</div>
<div class="row">
<div class="col-25">
<label for="compprof"><b>Company Profile *</b></label>
</div>
<div class="col-75">
<input type="text" oninput="this.value = this.value.replace(/[^A-Za-z, ]/, '')" id="compprof" name="compprof" placeholder="Your Company Profile.." required>
</div>
</div>
<div class="row">
<div class="col-25">
<label for="cpname"><b>Contact Person Name *</b></label>
</div>
<div class="col-75">
<input type="text" oninput="this.value = this.value.replace(/[^A-Za-z, ]/, '')" id="cpname" name="cpname" placeholder="Contact Person Name.." required>
</div>
</div>
<div class="row">
<div class="col-25">
<label for="cpdesig"><b>Contact Person Designation *</b></label>
</div>
<div class="col-75">
<input type="text" oninput="this.value = this.value.replace(/[^A-Za-z, ]/, '')" id="cpdesig" name="cpdesig" placeholder="Contact Person Designation.." required>
</div>
</div>
<div class="row">
<div class="col-25">
<label for="addl1"><b>Address Line 1 *</b></label>
</div>
<div class="col-75">
<input type="text" id="addl1" name="addl1" placeholder="Enter Address.." required>
</div>
</div>
<div class="row">
<div class="col-25">
<label for="addl2"><b>Address Line 2</b></label>
</div>
<div class="col-75">
<input type="text" id="addl2" name="addl2" placeholder="Enter Address....">
</div>
</div>
<div class="row">
<div class="col-25">
<label for="addl3"><b>Address Line 3</b></label>
</div>
<div class="col-75">
<input type="text" id="addl3" name="addl3" placeholder="Enter Address..">
</div>
</div>
<div class="row">
<div class="col-25">
<label for="addl4"><b>Address Line 4</b></label>
</div>
<div class="col-75">
<input type="text" id="addl4" name="addl4" placeholder="Enter Address..">
</div>
</div>
<div class="row">
<div class="col-25">
<label for="country"><b>Country *</b></label>
</div>
<div class="col-75">
<select id="country" name="country">
<option value="India">India</option>
</select>
</div>
</div>
<div class="row">
<div class="col-25">
<label for="state"><b>State *</b></label>
</div>
<div class="col-75">
<select id="state" name="state">
<option value="">Select State</option>
</select>
</div>
</div>
<div class="row">
<div class="col-25">
<label for="city"><b>City *</b></label>
</div>
<div class="col-75">
<select id="city" name="city">
<option value="">Select City</option>
</select>
</div>
</div>
<div class="row">
<div class="col-25">
<label for="pincode"><b>Pincode *</b></label>
</div>
<div class="col-75">
<input type="number" placeholder="Enter Pincode" name="pincode" id="pincode" onKeyPress="if(this.value.length==6) return false;" required>
</div>
</div>
<div class="row">
<div class="col-25">
<label for="phone"><b>Phone No. (With STD Code) *</b></label>
</div>
<div class="col-75">
<input type="number" placeholder="Enter Phone Number" name="phone" id="phone" onKeyPress="if(this.value.length==15) return false;" required>
</div>
</div>
<div class="row">
<div class="col-25">
<label for="mobile"><b>Mobile No. *</b></label>
</div>
<div class="col-75">
<input type="number" placeholder="Enter Mobile Number" name="mobile" id="mobile" onKeyPress="if(this.value.length==10) return false;" required>
</div>
</div>
<div class="row">
<div class="col-25">
<label for="fax"><b>Fax No. *</b></label>
</div>
<div class="col-75">
<input type="number" placeholder="Enter Fax Number" name="fax" id="fax" onKeyPress="if(this.value.length==15) return false;" required>
</div>
</div>
<div class="row">
<div class="col-25">
<label for="email"><b>Email *</b></label>
</div>
<div class="col-75">
<input type="email" placeholder="Enter Email" name="email" id="email" onkeyup="checkemail();" required>
<span id="email_status" style="color: red; font-weight: bolder"></span>
</div>
</div>
<div class="row" style="padding-top: 10px">
<input type="submit" name="submit" value="Submit">
</div>
</form>
</div>
</div>
<div>Item 4 Content</div>
<div>Item 5 Content</div>
<div>Item 6 Content</div>
<div>Item 7 Content</div>
<div>Item 8 Content</div>
<div>Item 9 Content</div>
<div>Item 10 Content</div>
<div>Item 11 Content</div>
<div>Item 12 Content</div>
</main>
<script>
function showpwd() {
var x = document.getElementById("psw");
if (x.type === "password") {
x.type = "text";
} else {
x.type = "password";
}
}
$(document).ready(function(){
load_json_data('state');
function load_json_data(id, parent_id)
{
var html_code = '';
$.getJSON('state_city.json', function(data){
html_code += '<option value="">Select '+id+'</option>';
$.each(data, function(key, value){
if(id == 'state')
{
if(value.parent_id == '0')
{
html_code += '<option value="'+value.id+'">'+value.name+'</option>';
}
}
else
{
if(value.parent_id == parent_id)
{
html_code += '<option value="'+value.id+'">'+value.name+'</option>';
}
}
});
$('#'+id).html(html_code);
});
}
$(document).on('change', '#state', function(){
var state_id = $(this).val();
if(state_id != '')
{
load_json_data('city', state_id);
}
else
{
$('#city').html('<option value="">Select city</option>');
}
});
});
///////////////////////////////////////////////////////
document.querySelectorAll('.topnav a')
.forEach(e => e.addEventListener('click', _ => change(e.dataset.id)))
function change(n) {
if(n == 2){
$('#tblProducts tbody').empty();
var username = document.getElementById("userid").innerHTML;
$.ajax({
type: 'post',
url: 'viewprof.php',
dataType: "json",
data: {
user_name:username,
},
cache:false,
success:function(data){
buildTable(data);
},
});
}
if(n == 3){
document.getElementById("formdata").reset();
var username = document.getElementById("userid").innerHTML;
$.ajax({
type: 'post',
url: 'viewprof.php',
dataType: "json",
data: {
user_name:username,
},
cache:false,
success:function(data){
formfill(data);
},
});
}
let panels = document.querySelectorAll('main div');
panels.forEach(p => p.classList.remove('active'));
panels[n - 1].classList.add('active');
}
function formfill(data){
for (var i = 0; i < data.length; i++){
document.getElementById('compname').value = data[i].CompName;
document.getElementById('compprof').value = data[i].CompProf;
document.getElementById('cpname').value = data[i].ContPerName;
document.getElementById('cpdesig').value = data[i].ContPersDesig;
document.getElementById('addl1').value = data[i].Address;
document.getElementById('addl2').value = data[i].Address;
document.getElementById('addl3').value = data[i].Address;
document.getElementById('addl4').value = data[i].Address;
document.getElementById('country').value = data[i].Country;
document.getElementById('state').value = data[i].State;
document.getElementById('city').value = data[i].City;
document.getElementById('pincode').value = data[i].Pincode;
document.getElementById('phone').value = data[i].PhoneNum;
document.getElementById('mobile').value = data[i].MobileNum;
document.getElementById('fax').value = data[i].FaxNum;
document.getElementById('email').value = data[i].Email;
}
}
function buildTable(data){
var table = document.getElementById('myTable')
for (var i = 0; i < data.length; i++){
var row = `<tr>
<td colspan="2"><h2 style="color: green; text-align: center"><u>Personal Information</u></h2></td>
</tr>
<tr>
<td style="font-weight: bolder; font-size: 18px">Company Name</td>
<td>${data[i].CompName}</td>
</tr>
<tr>
<td style="font-weight: bolder; font-size: 18px">Company Profile</td>
<td>${data[i].CompProf}</td>
</tr>
<tr>
<td style="font-weight: bolder; font-size: 18px">Contact Person Name</td>
<td>${data[i].ContPerName}</td>
</tr>
<tr>
<td style="font-weight: bolder; font-size: 18px">Contact Person Designation</td>
<td>${data[i].ContPersDesig}</td>
</tr>
<tr>
<td style="font-weight: bolder; font-size: 18px">Address</td>
<td>${data[i].Address}</td>
</tr>
<tr>
<td style="font-weight: bolder; font-size: 18px">Country</td>
<td>${data[i].Country}</td>
</tr>
<tr>
<td style="font-weight: bolder; font-size: 18px">State</td>
<td>${data[i].State}</td>
</tr>
<tr>
<td style="font-weight: bolder; font-size: 18px">City</td>
<td>${data[i].City}</td>
</tr>
<tr>
<td style="font-weight: bolder; font-size: 18px">Pincode</td>
<td>${data[i].Pincode}</td>
</tr>
<tr>
<td style="font-weight: bolder; font-size: 18px">Phone Number</td>
<td>${data[i].PhoneNum}</td>
</tr>
<tr>
<td style="font-weight: bolder; font-size: 18px">Mobile Number</td>
<td>${data[i].MobileNum}</td>
</tr>
<tr>
<td style="font-weight: bolder; font-size: 18px">Fax Number</td>
<td>${data[i].FaxNum}</td>
</tr>
<tr>
<td style="font-weight: bolder; font-size: 18px">Email ID</td>
<td>${data[i].Email}</td>
</tr>
<tr>
<td style="font-weight: bolder; font-size: 18px">Date Modified</td>
<td>${data[i].ModifiedDate}</td>
</tr>`
table.innerHTML += row
}
}
$(document).ready(function() {
var url = window.location.href;
var id = url.slice(url.indexOf('=') + 1, url.lastIndexOf('#'),);
document.getElementById("userid").innerHTML = id;
function disableBack() { window.history.forward() }
window.onload = disableBack();
window.onpageshow = function(evt) { if (evt.persisted) disableBack() }
});
function resp_navbar() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
</script>
</body>
</html>
The above code was working fine till the time I have not inserted the 'container' having 'form' inside the div having "id='updtprof'". Post insertion of this container inside the div (bearing "id='updtprof'"), when I am clicking on 'Home', 'Content2' & 'LOGOUT' the code is working fine and displaying the correct corresponding divs. But when I am clicking on other content's (i.e. content 4 to 12) of the navbar, the above code doesn't throw any error and is also not displaying the respective divs. Also when I am clicking on Content3 of navbar only header is being displayed but not the form.
Can someone tell me how to resolve this issue.

How to make accordion doesn't work and tell me Cannot read property 'classList' of undefined if element existed?

This is what I have at the moment. This code doesn't work as it should.
I need to make that - if I press for header element section must disappear, when I press again it must appear. I don't understand why it tells me that element undefined if it existed in HTML.... Can anyone help me with this problem please?
var filterTrigger = document.querySelectorAll('.catalog__filter-form h3');
var filterSection = document.querySelectorAll('.catalog__filter-section');
var filterInputs = document.querySelectorAll('.catalog__filter-inputs');
for (var j = 0; j < filterTrigger.length; j++) {
filterInputs[j].classList.add('filter-hidden');
filterTrigger[j].addEventListener('click', function(evt) {
evt.preventDefault();
filterSection[j].classList.toggle('catalog__filter-section--opened');
filterInputs[j].classList.toggle('filter-visible');
});
}
.catalog__container {
max-width: 1366px;
margin: 0 auto;
}
.catalog__content-container {
margin-left: 7.2%;
margin-right: 7.2%;
margin-top: 91px;
}
.catalog__filter-form {
border: 1px solid brown;
width: 248px;
}
.catalog__filter-form h3 {
font-family: arial;
font-size: 16px;
font-weight: 500;
line-height: 21px;
color: black;
margin: 0;
padding-top: 22px;
padding-bottom: 23px;
padding-left: 24px;
}
.catalog__filter-section {
padding-left: 24px;
border-bottom: 1px solid brown;
position: relative;
}
.catalog__filter-section::after {
content: "";
position: absolute;
right: 22px;
top: -38px;
background-image: url("../img/arrow-down-icon.svg");
background-repeat: no-repeat;
width: 18px;
height: 12px;
}
.catalog__filter-section--opened::after {
background-image: url("../img/arrow-up-icon.svg")
}
.catalog__filter-section:last-child {
border: none;
}
.catalog__filter-inputs {
display: flex;
flex-direction: column;
display: flex;
padding-bottom: 13px;
}
.catalog__filter-section label {
font-family: arial;
font-size: 14px;
font-weight: 500;
line-height: 18px;
color: black;
padding-left: 25px;
position: relative;
margin-bottom: 13px;
}
.catalog__filter-section input {
appearance: none;
}
.catalog__filter-section input:checked+span {
background-color: brown;
}
.catalog__filter-section span {
position: absolute;
width: 15px;
height: 15px;
left: 10px;
top: 2px;
border: 1px solid brown;
background-color: white;
}
.filter-hidden {
display: none;
}
.filter-visible {
display: flex;
}
<form class="catalog__filter-form">
<h3>Product</h3>
<div class="catalog__filter-section catalog__filter-section--opened" tabindex="0">
<div class="catalog__filter-inputs filter-visible">
<label>
<input type="checkbox" name="products" value="Necklaces" checked>
<span></span>
Necklaces
</label>
<label>
<input type="checkbox" name="products" value="Chokers" checked>
<span></span>
Chokers
</label>
<label>
<input type="checkbox" name="products" value="Rings">
<span></span>
Rings
</label>
<label>
<input type="checkbox" name="products" value="Earrings" checked>
<span></span>
Earrings
</label>
</div>
</div>
<h3>Material</h3>
<div class="catalog__filter-section" tabindex="0">
<div class="catalog__filter-inputs">
<label>
<input type="checkbox" name="material" value="Gold">
<span></span>
Gold
</label>
<label>
<input type="checkbox" name="material" value="Silver">
<span></span>
Silver
</label>
</div>
</div>
<h3>Collection</h3>
<div class="catalog__filter-section" tabindex="0">
<div class="catalog__filter-inputs">
<label>
<input type="checkbox" name="collection" value="Pink flamingo">
<span></span>
Pink flamingo
</label>
<label>
<input type="checkbox" name="collection" value="Dreams">
<span></span>
Dreams
</label>
</div>
</div>
<h3>Price</h3>
<div class="catalog__filter-section" tabindex="0">
<div class="catalog__filter-inputs">
<label>
<input type="checkbox" name="products" value="Necklaces">
Necklaces
</label>
</div>
</div>
</form>
</div>

because function run when you click on h3 to hide child and at that time j will be 4.
you most create a const variable and store element in it.
var filterTrigger = document.querySelectorAll('.catalog__filter-form h3');
var filterSection = document.querySelectorAll('.catalog__filter-section');
var filterInputs = document.querySelectorAll('.catalog__filter-inputs');
function onClick(event, secEl, inpEl){
event.preventDefault();
secEl.classList.toggle('catalog__filter-section--opened');
inpEl.classList.toggle('filter-visible');
}
for (var j = 0; j < filterTrigger.length; j++) {
const secEl = filterSection[j]
const inpEl = filterInputs[j]
filterInputs[j].classList.add('filter-hidden');
filterTrigger[j].addEventListener('click', function(e){ onClick(e, secEl, inpEl) });
}
.catalog__container {
max-width: 1366px;
margin: 0 auto;
}
.catalog__content-container {
margin-left: 7.2%;
margin-right: 7.2%;
margin-top: 91px;
}
.catalog__filter-form {
border: 1px solid brown;
width: 248px;
}
.catalog__filter-form h3 {
font-family: arial;
font-size: 16px;
font-weight: 500;
line-height: 21px;
color: black;
margin: 0;
padding-top: 22px;
padding-bottom: 23px;
padding-left: 24px;
}
.catalog__filter-section {
padding-left: 24px;
border-bottom: 1px solid brown;
position: relative;
}
.catalog__filter-section::after {
content: "";
position: absolute;
right: 22px;
top: -38px;
background-image: url("../img/arrow-down-icon.svg");
background-repeat: no-repeat;
width: 18px;
height: 12px;
}
.catalog__filter-section--opened::after {
background-image: url("../img/arrow-up-icon.svg")
}
.catalog__filter-section:last-child {
border: none;
}
.catalog__filter-inputs {
display: flex;
flex-direction: column;
display: flex;
padding-bottom: 13px;
}
.catalog__filter-section label {
font-family: arial;
font-size: 14px;
font-weight: 500;
line-height: 18px;
color: black;
padding-left: 25px;
position: relative;
margin-bottom: 13px;
}
.catalog__filter-section input {
appearance: none;
}
.catalog__filter-section input:checked+span {
background-color: brown;
}
.catalog__filter-section span {
position: absolute;
width: 15px;
height: 15px;
left: 10px;
top: 2px;
border: 1px solid brown;
background-color: white;
}
.filter-hidden {
display: none;
}
.filter-visible {
display: flex;
}
<form class="catalog__filter-form">
<h3>Product</h3>
<div class="catalog__filter-section catalog__filter-section--opened" tabindex="0">
<div class="catalog__filter-inputs filter-visible">
<label>
<input type="checkbox" name="products" value="Necklaces" checked>
<span></span>
Necklaces
</label>
<label>
<input type="checkbox" name="products" value="Chokers" checked>
<span></span>
Chokers
</label>
<label>
<input type="checkbox" name="products" value="Rings">
<span></span>
Rings
</label>
<label>
<input type="checkbox" name="products" value="Earrings" checked>
<span></span>
Earrings
</label>
</div>
</div>
<h3>Material</h3>
<div class="catalog__filter-section" tabindex="0">
<div class="catalog__filter-inputs">
<label>
<input type="checkbox" name="material" value="Gold">
<span></span>
Gold
</label>
<label>
<input type="checkbox" name="material" value="Silver">
<span></span>
Silver
</label>
</div>
</div>
<h3>Collection</h3>
<div class="catalog__filter-section" tabindex="0">
<div class="catalog__filter-inputs">
<label>
<input type="checkbox" name="collection" value="Pink flamingo">
<span></span>
Pink flamingo
</label>
<label>
<input type="checkbox" name="collection" value="Dreams">
<span></span>
Dreams
</label>
</div>
</div>
<h3>Price</h3>
<div class="catalog__filter-section" tabindex="0">
<div class="catalog__filter-inputs">
<label>
<input type="checkbox" name="products" value="Necklaces">
Necklaces
</label>
</div>
</div>
</form>
</div>

It was not trivial, but here you are
Added trigger class to the trigger h3
Close all on load
Delegate from the container div
Add some missing html (spans to the last checkbox)
var filterSections = document.querySelectorAll('.catalog__filter-section');
var filterInputs = document.querySelectorAll('.catalog__filter-inputs');
const closeAll = () => {
filterInputs.forEach((inp, i) => inp.classList.add('filter-hidden'));
filterSections.forEach((section, i) => section.classList.remove('catalog__filter-section--opened'));
}
closeAll()
document.getElementById("container").addEventListener("click", function(e) {
const tgt = e.target;
if (!tgt.classList.contains("trigger")) return
const filterSection = tgt.nextElementSibling;
const filterInput = filterSection.querySelector(".catalog__filter-inputs");
closeAll();
filterSection.classList.toggle('catalog__filter-section--opened');
filterInput.classList.toggle('filter-visible');
});
.catalog__container {
max-width: 1366px;
margin: 0 auto;
}
.catalog__content-container {
margin-left: 7.2%;
margin-right: 7.2%;
margin-top: 91px;
}
.catalog__filter-form {
border: 1px solid brown;
width: 248px;
}
.catalog__filter-form h3 {
font-family: arial;
font-size: 16px;
font-weight: 500;
line-height: 21px;
color: black;
margin: 0;
padding-top: 22px;
padding-bottom: 23px;
padding-left: 24px;
}
.catalog__filter-section {
padding-left: 24px;
border-bottom: 1px solid brown;
position: relative;
}
.catalog__filter-section::after {
content: "";
position: absolute;
right: 22px;
top: -38px;
background-image: url("../img/arrow-down-icon.svg");
background-repeat: no-repeat;
width: 18px;
height: 12px;
}
.catalog__filter-section--opened::after {
background-image: url("../img/arrow-up-icon.svg")
}
.catalog__filter-section:last-child {
border: none;
}
.catalog__filter-inputs {
display: flex;
flex-direction: column;
display: flex;
padding-bottom: 13px;
}
.catalog__filter-section label {
font-family: arial;
font-size: 14px;
font-weight: 500;
line-height: 18px;
color: black;
padding-left: 25px;
position: relative;
margin-bottom: 13px;
}
.catalog__filter-section input {
appearance: none;
}
.catalog__filter-section input:checked+span {
background-color: brown;
}
.catalog__filter-section span {
position: absolute;
width: 15px;
height: 15px;
left: 10px;
top: 2px;
border: 1px solid brown;
background-color: white;
}
.filter-hidden {
display: none;
}
.filter-visible {
display: flex;
}
<div id="container">
<form class="catalog__filter-form">
<h3>Product</h3>
<div class="catalog__filter-section catalog__filter-section--opened" tabindex="0">
<div class="catalog__filter-inputs filter-visible">
<label>
<input type="checkbox" name="products" value="Necklaces" checked>
<span></span>
Necklaces
</label>
<label>
<input type="checkbox" name="products" value="Chokers" checked>
<span></span>
Chokers
</label>
<label>
<input type="checkbox" name="products" value="Rings">
<span></span>
Rings
</label>
<label>
<input type="checkbox" name="products" value="Earrings" checked>
<span></span>
Earrings
</label>
</div>
</div>
<h3 class="trigger">Material</h3>
<div class="catalog__filter-section" tabindex="0">
<div class="catalog__filter-inputs">
<label>
<input type="checkbox" name="material" value="Gold">
<span></span>
Gold
</label>
<label>
<input type="checkbox" name="material" value="Silver">
<span></span>
Silver
</label>
</div>
</div>
<h3 class="trigger">Collection</h3>
<div class="catalog__filter-section" tabindex="0">
<div class="catalog__filter-inputs">
<label>
<input type="checkbox" name="collection" value="Pink flamingo">
<span></span>
Pink flamingo
</label>
<label>
<input type="checkbox" name="collection" value="Dreams">
<span></span>
Dreams
</label>
</div>
</div>
<h3 class="trigger">Price</h3>
<div class="catalog__filter-section" tabindex="0">
<div class="catalog__filter-inputs">
<label>
<input type="checkbox" name="products" value="Necklaces">
<span></span>
Necklaces
</label>
</div>
</div>
</form>
</div>

HTML Form getting disappear when i am clicking on tab?

I am trying to create a container that contains two forms.I want to show only one form at a time. Each form can be accessed when clicking on their respective tab and hide the other form.
But when i tried doing this i ended up in a situation where when i am clicking on the other tab to access the 2nd form then both of my form disappeared and only tabs remains their on the screen.
The desired output will be i should be able to toggle between the form.
I Had tried to debug but didn't got where i am going wrong.
Here is my javascript, HTML and CSS code:
const tabs = document.querySelectorAll(".tab");
const forms = document.querySelectorAll(".form-div");
const removeActiveTab = () =>{
tabs.forEach(tab => tab.classList.remove("active"));
};
const removeActiveForm = () => {
forms.forEach(form => form.classList.remove("current"));
};
function setActiveForm(tab){
removeActiveForm();
forms.forEach(form => {
if (tab.classList.contains(form.dataset['form'])){
form.classList.add('current')
}
});
}
function setActiveTab(tab){
if(!tab.classList.contains("active")){
removeActiveTab();
tab.classList.add("active");
}
}
tabs.forEach(tab => {
tab.addEventListener("click", () =>{
setActiveTab(tab);
setActiveForm(tab);
});
});
*{
margin : 0;
padding: 0;
box-sizing: border-box;
}
html,
body{
font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Verdana, sans-serif;
display: flex;
height: 100vh;
justify-content: center;
align-items: center;
background-color: #e6eeff;
}
.main-div{
background-color:#1a2a4d;
padding: 3rem;
width: 700px;
}
.tabs{
display: flex;
}
.tab{
flex: 1;
text-align: center;
color: #fff;
cursor: pointer;
border: 2px solid #02a1fd;
transition: background 300ms;
}
.tab:hover{
background-color: #02a1fd;
}
.tab:nth-child(1){
border-radius: 25px 0 0 25px;
}
.tab:nth-child(2){
border-radius: 0 25px 25px 0;
}
.tab h2{
padding: .5rem 1rem;
}
.active{
background-color: #02a1fd;
}
.form-div{
display: none;
opacity: 0;
}
.current{
display: block;
animation: fadeIn 500ms ease-in forwards;
}
.form-div h1{
text-align: center;
color: #fff;
padding: 1rem 0;
}
.input{
padding: .5rem 1rem;
}
.input label{
padding: 0.3rem 0.6rem;
font-size: 1.3rem;
color: #fff;
}
.req{
color: #02a1fd;
}
.input input{
width: 100%;
padding: .3rem;
font-size: 1.3rem;
background-color: transparent;
color: #fff;
border: 1px solid #fff;
outline: 0;
}
.input input:focus{
border: 1px solid #02a1fd;
}
.form-submit{
padding: .5rem 1rem;
}
.form-submit input{
padding: 1rem;
width: 100%;
font-size: 1.5rem;
background-color: #02a1fd;
border: 0;
color: #fff;
}
.form-submit input:hover{
background-color: #02886d;
}
#keyframes fadeIn{
from{
opacity: 0;
}
to{
opacity: 1;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<body>
<div class="main-div">
<div class="tabs">
<div class="tab encryption active"><h2>Encryption</h2></div>
<div class="tab decryption"><h2>Decryption</h2></div>
</div>
<div class="form-div current" data-form="Encryption">
<h1>Encryption</h1>
<form action="#">
<div class="input">
<label for="plaintext">Enter Plain text </label>
<input type="text" id="plaintext">
</div>
<div class="input">
<label for="password">Enter password </label>
<input type="password" id="password">
</div>
<div class="form-submit">
<input type="submit" value="encryption">
</div>
</form>
</div>
<div class="form-div" data-form="Decryption">
<h1>Decryption</h1>
<form action="#">
<div class="input">
<label for="decryptiontext">Enter Encrypted text </label>
<input type="text" id="decryptiontext">
</div>
<div class="input">
<label for="password">Enter password </label>
<input type="password" id="password">
</div>
<div class="input">
<label for="key">Enter key </label>
<input type="number" id="key">
</div>
<div class="form-submit">
<input type="submit" value="decryption">
</div>
</form>
</div>
</div>
<script src="main.js"></script>
</body>
</html>
Thanks in advance

The problem is in the below line -
if (tab.classList.contains(form.dataset['form'])){
Here you are checking if class list in the tab has the data-form value.
But the classes are in lower case (decryption, encryption), but data-form value is in capitals (Decryption, Encryption). That's the reason the condition never matches and the current class is never added to form.
You can either change the case, so that it matches or convert case to lower while matching as below -
if (tab.classList.contains(form.dataset['form'].toLowerCase())) {
Final Code -
const tabs = document.querySelectorAll(".tab");
const forms = document.querySelectorAll(".form-div");
const removeActiveTab = () => {
tabs.forEach(tab => tab.classList.remove("active"));
};
const removeActiveForm = () => {
forms.forEach(form => form.classList.remove("current"));
};
function setActiveForm(tab) {
removeActiveForm();
forms.forEach(form => {
if (tab.classList.contains(form.dataset['form'].toLowerCase())) {
form.classList.add('current')
}
});
}
function setActiveTab(tab) {
if (!tab.classList.contains("active")) {
removeActiveTab();
tab.classList.add("active");
}
}
tabs.forEach(tab => {
tab.addEventListener("click", () => {
debugger;
setActiveTab(tab);
setActiveForm(tab);
});
});
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html,
body {
font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Verdana, sans-serif;
display: flex;
height: 100vh;
justify-content: center;
align-items: center;
background-color: #e6eeff;
}
.main-div {
background-color: #1a2a4d;
padding: 3rem;
width: 700px;
}
.tabs {
display: flex;
}
.tab {
flex: 1;
text-align: center;
color: #fff;
cursor: pointer;
border: 2px solid #02a1fd;
transition: background 300ms;
}
.tab:hover {
background-color: #02a1fd;
}
.tab:nth-child(1) {
border-radius: 25px 0 0 25px;
}
.tab:nth-child(2) {
border-radius: 0 25px 25px 0;
}
.tab h2 {
padding: .5rem 1rem;
}
.active {
background-color: #02a1fd;
}
.form-div {
display: none;
opacity: 0;
}
.current {
display: block;
animation: fadeIn 500ms ease-in forwards;
}
.form-div h1 {
text-align: center;
color: #fff;
padding: 1rem 0;
}
.input {
padding: .5rem 1rem;
}
.input label {
padding: 0.3rem 0.6rem;
font-size: 1.3rem;
color: #fff;
}
.req {
color: #02a1fd;
}
.input input {
width: 100%;
padding: .3rem;
font-size: 1.3rem;
background-color: transparent;
color: #fff;
border: 1px solid #fff;
outline: 0;
}
.input input:focus {
border: 1px solid #02a1fd;
}
.form-submit {
padding: .5rem 1rem;
}
.form-submit input {
padding: 1rem;
width: 100%;
font-size: 1.5rem;
background-color: #02a1fd;
border: 0;
color: #fff;
}
.form-submit input:hover {
background-color: #02886d;
}
#keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="main-div">
<div class="tabs">
<div class="tab encryption active">
<h2>Encryption</h2>
</div>
<div class="tab decryption">
<h2>Decryption</h2>
</div>
</div>
<div class="form-div current" data-form="Encryption">
<h1>Encryption</h1>
<form action="#">
<div class="input">
<label for="plaintext">Enter Plain text </label>
<input type="text" id="plaintext">
</div>
<div class="input">
<label for="password">Enter password </label>
<input type="password" id="password">
</div>
<div class="form-submit">
<input type="submit" value="encryption">
</div>
</form>
</div>
<div class="form-div" data-form="Decryption">
<h1>Decryption</h1>
<form action="#">
<div class="input">
<label for="decryptiontext">Enter Encrypted text </label>
<input type="text" id="decryptiontext">
</div>
<div class="input">
<label for="password">Enter password </label>
<input type="password" id="password">
</div>
<div class="input">
<label for="key">Enter key </label>
<input type="number" id="key">
</div>
<div class="form-submit">
<input type="submit" value="decryption">
</div>
</form>
</div>
</div>
</body>
</html>

An alternative way to do the job - just set the style display from block to none (and vice versa) :
$("#enx").click(function(){
document.getElementById("eny").style.display = "block";
document.getElementById("dey").style.display = "none";
});
$("#dex").click(function(){
document.getElementById("eny").style.display = "none";
document.getElementById("dey").style.display = "block";
});
*{
margin : 0;
padding: 0;
box-sizing: border-box;
}
html,
body{
font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Verdana, sans-serif;
display: flex;
height: 100vh;
justify-content: center;
align-items: center;
background-color: #e6eeff;
}
.main-div{
background-color:#1a2a4d;
padding: 3rem;
width: 700px;
}
.tabs{
display: flex;
}
.tab{
flex: 1;
text-align: center;
color: #fff;
cursor: pointer;
border: 2px solid #02a1fd;
transition: background 300ms;
}
.tab:hover{
background-color: #02a1fd;
}
.tab:nth-child(1){
border-radius: 25px 0 0 25px;
}
.tab:nth-child(2){
border-radius: 0 25px 25px 0;
}
.tab h2{
padding: .5rem 1rem;
}
.active{
background-color: #02a1fd;
}
.form-div{
display: none;
opacity: 0;
}
.current{
display: block;
animation: fadeIn 500ms ease-in forwards;
}
.form-div h1{
text-align: center;
color: #fff;
padding: 1rem 0;
}
.input{
padding: .5rem 1rem;
}
.input label{
padding: 0.3rem 0.6rem;
font-size: 1.3rem;
color: #fff;
}
.req{
color: #02a1fd;
}
.input input{
width: 100%;
padding: .3rem;
font-size: 1.3rem;
background-color: transparent;
color: #fff;
border: 1px solid #fff;
outline: 0;
}
.input input:focus{
border: 1px solid #02a1fd;
}
.form-submit{
padding: .5rem 1rem;
}
.form-submit input{
padding: 1rem;
width: 100%;
font-size: 1.5rem;
background-color: #02a1fd;
border: 0;
color: #fff;
}
.form-submit input:hover{
background-color: #02886d;
}
#keyframes fadeIn{
from{
opacity: 0;
}
to{
opacity: 1;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<body>
<div class="main-div">
<div class="tabs">
<div id=enx class="tab encryption active"><h2>Encryption</h2></div>
<div id=dex class="tab decryption"><h2>Decryption</h2></div>
</div>
<div id=eny class="form-div current" data-form="Encryption">
<h1>Encryption</h1>
<form action="#">
<div class="input">
<label for="plaintext">Enter Plain text </label>
<input type="text" id="plaintext">
</div>
<div class="input">
<label for="password">Enter password </label>
<input type="password" id="password">
</div>
<div class="form-submit">
<input type="submit" value="encryption">
</div>
</form>
</div>
<div id=dey class="form-div current" style="display:none;" data-form="Decryption">
<h1>Decryption</h1>
<form action="#">
<div class="input">
<label for="decryptiontext">Enter Encrypted text </label>
<input type="text" id="decryptiontext">
</div>
<div class="input">
<label for="password">Enter password </label>
<input type="password" id="password">
</div>
<div class="input">
<label for="key">Enter key </label>
<input type="number" id="key">
</div>
<div class="form-submit">
<input type="submit" value="decryption">
</div>
</form>
</div>
</div>
</body>
</html>

Hiding only one element inside div

I want to hide the form inside the filter section without hiding title.
I tried to add form tag:
$(this).parents('.filter-section form').toggle("slideUp");
But it's not working.
Here is a fiddle
$('.filter-section .filter-toggle').click(function() {
$(this).parents('.filter-section').toggle("slideUp");
});

You can do it by using $(this).next('form').toggle("slideUp"); :
The updated JSFIDDLE.
$('.filter-section .filter-toggle').click(function() {
$(this).next('form').toggle("slideUp");
});
/*filter*/
.filter {
border-radius: 5px;
border: solid 1px #008db0;
padding: 20px;
background: #fff;
}
.filter-section {
border-bottom: solid #000 1px;
padding: 10px 0 10px 0;
}
.filter-title {
font-size: 20px;
font-weight: 900;
}
.filter input[type=checkbox] {
margin-right: 8px;
}
.filter-section:last-child {
border-bottom: 0;
}
.filter-section:first-child {
padding: 0 0 10px 0;
margin-top: -10px;
}
.filter .rating span {
position: absolute;
top: 0px;
right: 70px;
}
.filter .rating span:before {
color: gold;
font-size: 23px;
}
.filter .badge {
background: #008db0;
padding: 2px 2px;
font-weight: normal;
font-size: 12px;
border: solid 2px #fff;
border-radius: 15px;
box-shadow: 2px 0px 1px rgba(0, 0, 0, 0.39);
margin: 0;
}
.filter-section form .badge {
background: #f87e47;
padding: 3px 1px;
margin-right: 6px;
}
.filter .more {
color: #000;
font-weight: normal;
font-size: 15px;
float: right;
margin: 12px 0 0;
}
#amount-min {
border: 0;
color: #f6931f;
font-weight: bold;
}
#amount-max {
border: 0;
color: #f6931f;
font-weight: bold;
text-align: right
}
.ranger input {
width: 78px;
}
.ranger {
display: flex;
}
.ui-slider-handle {
border-radius: 10px;
left: 60%;
}
.ui-slider-range {
background: #ff7400;
}
.filter-toggle {
cursor: pointer;
}
.filter-toggle:after {
float: right;
content: "\f107";
font-family: 'FontAwesome';
}
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css' />
<script src='https://use.fontawesome.com/0e9115ffee.js'></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js'></script>
<div class="row">
<div class="col-md-2 filter">
<div class="filter-section">
<p class="filter-title">Etoiles</p>
<p class="rating rating-5star"><span></span>
</p>
</div>
<div class="filter-section">
<p class="filter-title filter-toggle">Budget</p>
<form action="" class="form">
<p class="ranger">
<input type="text" id="amount-min" />
<input type="text" id="amount-max" />
</p>
<div id="slider-range"></div>
</form>
</div>
<div class="filter-section">
<p class="filter-title filter-toggle">Arrangement</p>
<form id="arrangementfilter" action="">
<input type="checkbox" name="arrangement" value="demi-pension" /><span class="badge">157</span>Logement Petit Dejeuner</br>
<input type="checkbox" name="arrangement" value="demi-pension" /><span class="badge">157</span>Demi Pension</br>
<input type="checkbox" name="arrangement" value="pension-complete" /><span class="badge">157</span>Pension Complete</br>
<input type="checkbox" name="arrangement" value="pension-complete" /><span class="badge">157</span>Al inclusive Soft</br>
<input type="checkbox" name="arrangement" value="pension-complete" /><span class="badge">157</span>Al inclusive</br>
</form>
</div>
<div class="filter-section">
<p class="filter-title filter-toggle">Ville</p>
<form id="cityfilter" action="">
<input type="checkbox" name="city" value="hammamet" /><span class="badge">157</span>Hammamet</br>
<input type="checkbox" name="city" value="sousse" /><span class="badge">157</span>Sousse</br>
<input type="checkbox" name="city" value="sousse" /><span class="badge">157</span>Monastir</br>
<input type="checkbox" name="city" value="sousse" /><span class="badge">157</span>Mahdia</br>
<input type="checkbox" name="city" value="sousse" /><span class="badge">157</span>Tabarka</br>
<input type="checkbox" name="city" value="sousse" /><span class="badge">157</span>Gammarth</br>
<input type="checkbox" name="city" value="sousse" /><span class="badge">157</span>Tunis</br>
<input type="checkbox" name="city" value="sousse" /><span class="badge">157</span>Djerba</br>
<input type="checkbox" name="city" value="sousse" /><span class="badge">157</span>Touzeur</br>
<input type="checkbox" name="city" value="sousse" /><span class="badge">157</span>Douz</br>
</form>
Plus des villes <span class="badge">13</span>
</div>
</div>

toggle conditional with jquery?

I created nested checkboxes with psuedo(:before) icon and my toggle is not work correctly
where is my fold ? if u check it out you gonna see it's not going to work as expected
my html structure which is below
<html lang="en">
<head>
<meta charset="UTF-8">
<title>No Title</title>
</head>
<body>
<div class="new-checkbox">
<ul>
<li >
<input type="checkbox" id="input1">
<label for="input1">kategori <strong>(1)</strong>
</label>
<ul>
<li>
<input type="checkbox" id="input11">
<label for="input11">kategori<strong>(11)</strong>
</label>
</li>
<li>
<input type="checkbox" id="input12">
<label for="input12">kategori <strong>(12)</strong>
</label>
</li>
<li>
<input type="checkbox" id="input13">
<label for="input13">kategori <strong>(13)</strong>
</label>
</li>
</ul>
</li>
<li>
<input type="checkbox" id="input2">
<label for="input2">kategori <strong>(2)</strong>
</label>
</li>
<li>
<input type="checkbox" id="input3">
<label for="input3">kategori <strong>(3)</strong>
</label>
<ul>
<li>
<input type="checkbox" id="input31">
<label for="input31">kategori <strong>(31)</strong>
</label>
</li>
<li>
<input type="checkbox" id="input32">
<label for="input32">kategori <strong>(32)</strong>
</label>
</li>
<li>
<input type="checkbox" id="input33">
<label for="input33">kategori <strong>(33)</strong>
</label>
<ul>
<li>
<input type="checkbox" id="input331">
<label for="input331">kategori <strong>(331)</strong>
</label>
</li>
<li>
<input type="checkbox" id="input332">
<label for="input332">kategori <strong>(332)</strong>
</label>
</li>
<li>
<input type="checkbox" id="input333">
<label for="input333">kategori <strong>(333)</strong>
</label>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div><!-- new checkbox-->
<script type="text/javascript" src="https://cdn.anitur.com.tr/js/jquery-1.8.2.min.js" ></script>
</body>
</html>
my css structure
.new-checkbox ul {
padding: 0;
margin: 0;
list-style: none;
margin-left: 30px;
font: normal 11px/16px"Segoe UI", Arial, Sans-serif;
}
.new-checkbox ul:first-child {
margin-left: 0;
}
.new-checkbox ul li {
margin: 3px 0;
}
.new-checkbox input[type="checkbox"] {
display: none;
}
.new-checkbox label {
cursor: pointer;
}
.new-checkbox input[type="checkbox"] + label:before {
border: 1px solid #ffffff;
content: "\00a0";
display: inline-block;
font: 16px/1em sans-serif;
height: 13px;
width: 13px;
margin: 2px .25em 0 0;
padding: 0;
vertical-align: top;
border: solid 1px #1375b3;
color: #1375b3;
opacity: .50;
}
.new-checkbox input[type="checkbox"]:checked + label:before {
background: #fff;
color: #1375b3;
content: "\2714";
text-align: center;
box-shadow: 0 0 2px rgba(0, 0, 0, .25) inset;
opacity: 1;
}
.new-checkbox input[type="checkbox"]:checked + label:after {
font-weight: bold;
}
/*
.new-checkbox ul li:before {
content: "\25b6";
display: inline-block;
margin: 2px 0 0;
width: 13px;
height: 13px;
vertical-align: top;
text-align: center;
color: #e74c3c;
font-size: 8px;
line-height: 13px;
cursor: pointer;
}
*/
.new-checkbox ul li:before {
content:"";
width:16px;
height:16px;
display:block;
float:left;
background:url("https://cdn3.iconfinder.com/data/icons/google-material-design-icons/48/ic_keyboard_arrow_right_48px-16.png") no-repeat left center;
margin-top: 2px;
}
li.downCheck:before{
content:"";
width:16px;
height:16px;
display:block;
float:left;
background:url("https://cdn3.iconfinder.com/data/icons/google-material-design-icons/48/ic_keyboard_arrow_down_48px-16.png") no-repeat left center !important;
margin-top: 2px;
}
.new-checkbox li {
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
.new-checkbox input[type="checkbox"][id]:checked ~ li::before {
content: "\25bc";
}
.new-checkbox li ul {
display: none;
}
.new-checkbox li.has-checked > ul {
display: block;
}
and my jquery
$(document).ready(function() {
$('.new-checkbox input[type=checkbox]').on("change", function() {
var checked = this.checked,
$li = $(this).parent();
$li.find('input[type=checkbox]').prop('checked', checked).parent().toggleClass('has-checked', checked);
$li.parentsUntil('.new-checkbox', 'li').each(function() {
var $checks = $(this).find('ul input[type=checkbox]');
$(this).children('input[type=checkbox]').prop('checked', !$checks.filter(':not(:checked)').length);
$(this).toggleClass('has-checked', $checks.is(':checked'));
});
});
/*
$('.new-checkbox li input[type="checkbox"]').on("click",function(e) {
$(this).parent("li").toggleClass("downCheck");
});
*/
if($('.new-checkbox li:has("> ul")')) {
$('.new-checkbox li input[type="checkbox"]').on("click",function(e) {
$(this).parent("li").toggleClass("downCheck");
});
}
});
and to see on codepen

We Keep Coding

JavaScript is the programming language of the Web.

How to remove either bullets / numbers from survey form - javascript

Related

Issue while displaying div contents that changes on navbar selection

How to make accordion doesn't work and tell me Cannot read property 'classList' of undefined if element existed?

HTML Form getting disappear when i am clicking on tab?

Hiding only one element inside div

toggle conditional with jquery?

Categories

Resources