Can't click on other tabs in html tabcontent

Can't click on other tabs in html tabcontent - javascript

Whenever I am on my new profile tab I can't click on my other tabs to go to them. I've included my code below. I can go from my Dashboard tab to New Profile tab fine but not the other way around. I can also go from New Task to New Profile just fine the only exception is when I go out from New Profile to another tab.
document.getElementById("defaultOpen").click();
function openCity(evt, cityName) {
// Declare all variables
var i, tabcontent, tablinks;
// Get all elements with class="tabcontent" and hide them
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
// Get all elements with class="tablinks" and remove the class "active"
tablinks = document.getElementsByClassName("tablinks");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" active", "");
}
// Show the current tab, and add an "active" class to the button that opened the tab
document.getElementById(cityName).style.display = "block";
evt.currentTarget.className += " active";
console.log("hello");
}
label {
display: inline-block;
width: 140px;
text-align: right;
}
input {
width: 140px
}
select {
width: 140px;
}
/* Split the screen in half */
.split {
height: 100%;
width: 50%;
position: fixed;
z-index: 1;
top: 0;
overflow-x: hidden;
padding-top: 20px;
}
/* If you want the content centered horizontally and vertically */
.centered {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
}
/* Control the left side */
.left {
left: 0;
/*background-color: #111; */
}
/* Control the right side */
.right {
right: 0;
/*background-color: red; */
}
/* Style the tab */
.tab {
overflow: hidden;
border: 1px solid #ccc;
background-color: #f1f1f1;
position: relative;
clear: both;
}
/* Style the buttons that are used to open the tab content */
.tab button {
background-color: inherit;
float: left;
border: none;
outline: none;
cursor: pointer;
padding: 14px 16px;
transition: 0.3s;
}
/* Change background color of buttons on hover */
.tab button:hover {
background-color: #ddd;
}
/* Create an active/current tablink class */
.tab button.active {
background-color: #ccc;
}
/* Style the tab content */
.tabcontent {
display: none;
padding: 1280px 720px;
border: 1px solid #ccc;
border-top: none;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
</head>
<body>
<!-- For the tab headers-->
<div class="tab">
<button class="tablinks" onclick="openCity(event, 'ProfileTab')">New Profile</button>
<button class="tablinks" onclick="openCity(event, 'TaskTab')" id="defaultOpen">New Task</button>
<button class="tablinks" onclick="openCity(event, 'DashboardTab')">Dashboard</button>
</div>
<div id="ProfileTab" class="tabcontent">
<!-- Shipping and billing details will be on left half of screen. -->
<div class="split left">
<!-- Shipping Details -->
<h1>Shipping Details</h1>
<div class="block">
<label for="firstNameTextFieldShip">First Name:</label>
<input type="text" id="firstNameTextFieldShip" name="firstNameShip">
<label for="lastNameTextFieldShip">Last Name:</label>
<input type="text" id="lastNameTextFieldShip" name="lastNameShip">
</div>
<br>
<div class="block">
<label for="Address1TextFieldShip">Address:</label>
<input type="text" id="Address1TextFieldShip" name="add1txtfieldShip">
<label for="Address2TextField">Address 2:</label>
<input type="text" id="Address2TextFieldShip" name="add2txtfieldShip">
</div>
<br>
<div class="block">
<label for="ZipTextFieldShip">Zip Code:</label>
<input type="text" id="ZipTextFieldShip" name="ziptxtfieldShip">
<label for="CityTextFieldShip">City:</label>
<input type="text" id="CityTextFieldShip" name="citytxtfieldShip">
</div>
<br>
<div class="block">
<label for="CountriesSelectShip">Country:</label>
<select id="CountriesSelectShip">
<option value="USA">USA</option>
</select>
<label for="StateTextFieldShip">State:</label>
<input type="text" id="StateTextFieldShip" name="statetxtfieldShip">
</div>
<!-- Billing Details-->
<h1>Billing Details</h1>
<div class="block">
<label for="firstNameTextFieldBilling">First Name:</label>
<input type="text" id="firstNameTextFieldBilling" name="firstNameBilling">
<label for="lastNameTextFieldBilling">Last Name:</label>
<input type="text" id="lastNameTextFieldBilling" name="lastNameBilling">
</div>
<br>
<div class="block">
<label for="Address1TextFieldBilling">Address:</label>
<input type="text" id="Address1TextFieldBilling" name="add1txtfieldBilling">
<label for="Address2TextFieldBilling">Address 2:</label>
<input type="text" id="Address2TextFieldBilling" name="add2txtfieldBilling">
</div>
<br>
<div class="block">
<label for="ZipTextFieldBilling">Zip Code:</label>
<input type="text" id="ZipTextFieldBilling" name="ziptxtfieldBilling">
<label for="CityTextFieldBilling">City:</label>
<input type="text" id="CityTextFieldBilling" name="citytxtfieldBilling">
</div>
<br>
<div class="block">
<label for="CountriesSelectBilling">Country:</label>
<select id="CountriesSelectBilling">
<option value="USA">USA</option>
</select>
<label for="StateTextFieldBilling">State:</label>
<input type="text" id="StateTextFieldBilling" name="statetxtfieldBilling">
</div>
</div>
<div class="split right">
<h1>Payment Information</h1>
<div class="block">
<label for="ProfileNameTextField">Profile Name:</label>
<input type="text" id="ProfileNameTextField" name="profileNameTextField">
</div>
<br>
<div class="block">
<label for="EmailTextField">Email:</label>
<input type="text" id="EmailTextField" name="emailTextField">
</div>
<br>
<div class="block">
<label for="PhoneNumTextField">Phone Number:</label>
<input type="text" id="PhoneNumTextField" name="PhoneNumTextField">
</div>
<br>
<div class="block">
<label for="NameOnCardTextField">Name On Card:</label>
<input type="text" id="NameOnCardTextField" name="NameOnCardTextField">
</div>
<br>
<div class="block">
<label for="NumOnCardTextField">Number On Card:</label>
<input type="text" id="NumOnCardTextField" name="NumOnCardTextField">
</div>
<br>
<div class="block">
<label for="ExpirationTextField">Expiration Date:</label>
<input type="text" id="ExpirationTextField" name="ExpirationTextField">
</div>
<br>
<div class="block">
<label for="CVVTextField">CVV:</label>
<input type="text" id="CVVTextField" name="CVVTextField">
</div>
<br>
</div>
</div>
<!-- Tasks tab -->
<div id="TaskTab" class="tabcontent">
<h1>hi</h1>
</div>
<!-- Dashboard tab -->
<div id="DashboardTab" class="tabcontent">
</div>
</body>
</html>
Can't click on dashboard or New Task tab after being on New Profile tab

Your Tabs are working as expected. Your container "div id="ProfileTab" class="tabcontent" style="display: block;" is sitting over top of the tabs making it so you can't click them. You just need to fix the positioning of that container so it is not blocking the tabs

Quick answer: remove the padding on .tabcontent and remove the position on .split. Then add float: left; to .split.
The overall issue is the content of the tabcontent was out of document flow causing it to overlap the tabs in the DOM. So, even though it looked like you were clicking the tab, you were actually clicking the tabcontent
The float is a quick fix for displaying things side by side and not really "wrong". The preference now days is to use flexbox. I would recommend looking it up. Here is a guide and a fun game:
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
https://flexboxfroggy.com/

Related

Can I use if and else to change the content of a div, being the function triggered by a button?

I am trying to use if and else to change the content of a div in my Wordpress site. What I want is:
I have a set of 8 buttons and want each of them to place a specific data (shortcode) in a div in my page. So,lets say, when the user clicks button 1, he sees data 1 in a content area of my site, and when he clicks button 2, data 1 disappears and data 2 is shown.
As I am very new to Java and PHP, I am not sure the best approach to solve my problem. I have tried using JQuery with hide and show, but I figured it would be hell to update the data later on. Then I thought about using If/Else or Variables. As I am very noob in both solutions, I am trying the If/Else solution first as it's concept sounds easier.
I have tried the code below, but it is not working. The data in the div is not changing and I just can't figure out why.
/* Style */
#content {
width: 100%;
padding: 50px 0;
text-align: center;
background-color: lightblue;
margin-top: 20px;
}
#btn-a {
background-color:blue;
color:yellow;
}
#btn-b {
background-color:red;
color:yellow;
}
/* HTML */
<button id="btn-a" onclick="myFunction()">Button A</button>
<button id="btn-b" onclick="myFunction()">Button B</button>
<div id="content"></div>
/* Script */
function myFunction() {
if(document.getElementById('btn-a').clicked == true {
document.getElementById("content").innerHTML = "Yay A! [shortcode-A]";}
else-if(document.getElementById('btn-b').clicked == true {
document.getElementById("content").innerHTML = "Yay B! [shortcode-B]";}
}
As I've said, I am very new to coding. So I appreciate any help in my code or suggestion about a new approach I should try.
Pardon my French and Thx.

Thank you, prettyinpink. Following your suggestions and some W3Schools examples I've got a new code that works better towards what I need. But I am still having a problem.
When I click on the third group of buttons (Product Validity), they show the content as they are supposed to, but the buttons also disappear right away. I would like they to stay visible until a new button is pressed.
How do I make it happen?
To perform the problem, please click on the following buttons: Product 2 > Type 1 > 12 Months.
// Make first group of buttons show/hide content about product plus second group of buttons
function openTab(evt, openTab, subTab) {
var i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
tablinks = document.getElementsByClassName("tablinks");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace("active", "");
}
if(subTab) {
var parent = evt.currentTarget.closest('.tabcontent');
parent.style.display = "block";
parent.className += " active";
}
document.getElementById(openTab).style.display = "block";
evt.currentTarget.className += " active";
}
// Make third group of buttons show only when second group is clicked
const btns = document.querySelectorAll('input');
const innerContent = document.querySelectorAll('.expdate');
btns.forEach(btn=>{
btn.addEventListener('click', ()=>{
innerContent.forEach(content=>content.style.display = 'none');
document.querySelector('.expdate[data-content='+btn.dataset.btn+']').style.display = "block";
});
});
// Get the element with id="" and click on it to go as default open
document.getElementById("ecpf").click();
/* Style tab */
.tab {
overflow: hidden;
border: none;
background-color: #ffff;
}
/* Style tab content */
.tabcontent {
display: none;
padding: 6px 12px;
border: none;
}
.tabcontent img{
padding: 5px;
margin: 5px 10px 5px 5px;
width: 250px;
float: left;
}
/* Tab fadding effect */
.tabcontent {
animation: fadeEffect 1s; /* Fading effect takes 1 second */
}
/* Go from zero to full opacity */
#keyframes fadeEffect {
from {opacity: 0;}
to {opacity: 1;}
}
/* Style columns inside tabcontent */
.column {
float: left;
}
.left {
width: 68%;
}
.right {
width: 22%;
}
/* Style price box */
.pricebox {
display: block;
width: 250px;
margin-left: auto;
margin-right: auto;
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.02), 0 8px 8px 0 rgba(0, 0, 0, 0.08);
text-align: center;
}
.pricebox img{
display: block;
width: 65%;
padding: 0px 20px 0px 20px;
margin: 20px;
}
/* Style a button */
a.button {
background-color: #43689B;
width:60%;
text-align: center;
float: center;
display: inline-block;
cursor: pointer;
padding: 8px 0 8px 0;
margin: 3px 3px 20px 3px;
border-radius: 4px;
transition: 0.3s;
font-size: 14px;
color: #ffff;
}
a.button:hover {
background-color: #22386F;
}
/*Style radio buttons */
input[type=radio] {
display: none;
}
input[type=radio] + label {
background-color: #43689B;
width:24%;
text-align: center;
float: left;
cursor: pointer;
padding: 8px 0 8px 0;
margin: 3px 3px 3px;
border-radius: 4px;
transition: 0.3s;
font-size: 14px;
color: #ffff;
}
input[type=radio] + label:hover {
background-color: #22386F;
}
input[type=radio]:checked + label {
background-color: #3A7CD7;
}
<!-- Start Products -->
<div class="tab">
<input type="radio" class="btn-check tablinks" name="produtos" id="ecnpj" autocomplete="off" onclick="openTab(event, 'ecnpjcontent')">
<label class="btn btn-secondary" for="ecnpj">Product1</label>
<input type="radio" class="btn-check tablinks" name="produtos" id="ecpf" autocomplete="off" checked onclick="openTab(event, 'ecpfcontent')">
<label class="btn btn-secondary" for="ecpf">Product2</label>
<input type="radio" class="btn-check tablinks" name="produtos" id="enfe" autocomplete="off" onclick="openTab(event, 'enfecontent')">
<label class="btn btn-secondary" for="enfe">Product3</label>
</div>
<!-- Start Product Content -->
<div id="ecpfcontent" class="tabcontent">
<div class="row">
<img src="http://localhost:10005/wp-content/uploads/2023/02/product.png">
<h3>Product Name2</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.</p>
<div class="column left">
<!-- Start Product Type 1 -->
<h3>Choose Product Type</h3>
<div class="tab">
<input type="radio" class="btn-check" data-btn="expdateecpfa1arq12m" name="tipos" id="a1arquivo" autocomplete="off" checked onclick="openTab(event, 'priceecpfa1arq12m', true)">
<label class="btn btn-secondary" for="a1arquivo">Type1</label>
<input type="radio" class="btn-check" data-btn="expdateecpfa3sm12m" name="tipos" id="a3semmidia" autocomplete="off" onclick="openTab(event, 'expdateecnpjasm12m', true)">
<label class="btn btn-secondary" for="a3semmidia">Type2</label>
<input type="radio" class="btn-check" name="tipos" id="a3cartao" autocomplete="off" onclick="openTab(event, 'type3', true)">
<label class="btn btn-secondary" for="a3cartao">Type3</label>
</div>
<!-- Start Validity Product 2 Type 1 -->
<div class="tab expdate" data-content="expdateecpfa1arq12m">
<hr style="width:75%; text-align:center; margin-top:20px; margin-bottom:20px;">
<h3>Choose Product Validity</h3>
<input type="radio" class="btn-check" name="validade" id="12meses" autocomplete="off" checked onclick="openTab(event, 'priceecpfa1arq12m', true)">
<label class="btn btn-secondary" for="12meses">12 Months</label>
<input type="radio" class="btn-check" name="validade" id="24meses" autocomplete="off" onclick="openTab(event, 'doel12', true)">
<label class="btn btn-secondary" for="24meses">24 Months</label>
</div>
<!-- Start Validity Product 2 Type 2 -->
<div class="tab expdate" data-content="expdateecpfa3sm12m">
<hr style="width:75%; text-align:center; margin-top:20px; margin-bottom:20px;">
<h3>Choose Product Validity</h3>
<input type="radio" class="btn-check" name="validade" id="12meses" autocomplete="off" checked onclick="openTab(event, 'priceecpfa1arq12m', true)">
<label class="btn btn-secondary" for="12meses">12 Months</label>
<input type="radio" class="btn-check" name="validade" id="18meses" autocomplete="off" onclick="openTab(event, 'doel12', true)">
<label class="btn btn-secondary" for="24meses">18 Months</label>
<input type="radio" class="btn-check" name="validade" id="24meses" autocomplete="off" onclick="openTab(event, 'doel12', true)">
<label class="btn btn-secondary" for="24meses">24 Months</label>
</div>
</div>
<!-- Start Price Box -->
<!-- Price Product2-type1-validity1 -->
<div class="column right pricebox">
<div id="priceecpfa1arq12m" class="tabcontent">
<img src="http://localhost:10005/wp-content/uploads/2023/02/ecpf-pagina-de-produto.png">
<p>Product Name 1 | Product Type 1 | 12 Meses</p>
<hr style="width:60%; text-align:center; margin-top:15px; margin-bottom:15px;">
<h4><s>$ 229,00</s></h4>
<h1>$ 160,30</h1>
BUY NOW
</div>
</div>
<!-- Price Product2-type1-validity3 -->
<div class="column right pricebox">
<div id="doel12" class="tabcontent">
<img src="http://localhost:10005/wp-content/uploads/2023/02/ecpf-pagina-de-produto.png">
<p>Product Name 1 | Product Type 1 | 24 Meses</p>
<hr style="width:60%; text-align:center; margin-top:15px; margin-bottom:15px;">
<h4><s>$ 155,00</s></h4>
<h1>$ 108,00</h1>
BUY NOW
</div>
</div>
<!-- Price Product2-type2-validity1 -->
<div class="column right pricebox">
<div id="priceecpfaa3sm12m" class="tabcontent">
<img src="http://localhost:10005/wp-content/uploads/2023/02/ecpf-pagina-de-produto.png">
<p>Product Name 1 | Product Type 2 | 12 Meses</p>
<hr style="width:60%; text-align:center; margin-top:15px; margin-bottom:15px;">
<h4><s>$ 229,00</s></h4>
<h1>$ 160,30</h1>
BUY NOW
</div>
</div>
<!-- Price Product2-type1-validity2 -->
<div class="column right pricebox">
<div id="doel12" class="tabcontent">
<img src="http://localhost:10005/wp-content/uploads/2023/02/ecpf-pagina-de-produto.png">
<p>Product Name | Product Type | 24 Meses</p>
<hr style="width:60%; text-align:center; margin-top:15px; margin-bottom:15px;">
<h4><s>$ 155,00</s></h4>
<h1>$ 108,00</h1>
BUY NOW
</div>
</div>
</div>
</div>
<!-- Start Product Type 1 -->
<div id="ecnpjcontent" class="tabcontent">
<p> Replica </p>
</div>

Submit button to trigger thank you page

My actual test website
1.) Click on the hero head image on the top
2.) The dark gray box of the form slides in
3.) Do not fill in the form
4.) Click once on the submit button
5.) Then click on the hero head again
6.) The blue box of the Thank you page slides in
This shouldnt happen this way.
Before adding the PHP functionality of the form, I want to test the onClick submit button (not the hero head) to slide in the blue box Thank you page when form is filled in.
jQuery - I set two classes one for the hero head to slide in the form and one for the Thank you page.
JSFIDDLE does not actually show the blue box instead it goes to 404 error page
<script>
$(".openNav").click(function() {
$('.box').show();
$('.box').toggleClass("slideUp");
});
$(".openNav2").click(function() {
$('.box2').show();
$('.box2').toggleClass("slideUp");
});
</script>
HTML -
<div class="box2 slideUp" style="display: none;">
<div class="info">
<div class="frm-details">
<div class="frm-name">THANK YOU!</div>
<div class="frm-header">I will get back to you ASAP!</div>
</div>
</div>
</div>
**<!-- DARK GRAY BOX SLIDES IN -->**
<div class="box slideUp" style="display: none;">
<div class="info">
<div class="frm-details">
<div class="frm-name">FILL OUT THE FORM</div>
<div class="form-box">
<form>
<div class="frm-group">
<input type="text" required>
<span class="frm-highlight"></span>
<span class="frm-bar"></span>
<label>Full Name</label>
</div>
<div class="frm-group">
<input type="text" required>
<span class="frm-highlight"></span>
<span class="frm-bar"></span>
<label>Email</label>
</div>
<div class="frm-group">
<input type="text" required>
<span class="frm-highlight"></span>
<span class="frm-bar"></span>
<label>Text Number</label>
</div>
<div class="frm-group">
<input type="text" required>
<span class="frm-highlight"></span>
<span class="frm-bar"></span>
<label>Company Name</label>
</div>
<div class="frm-group">
<textarea type="text" rows="6" required></textarea>
<span class="frm-highlight"></span>
<span class="frm-bar"></span>
<label>Message</label>
</div>
<div class="" id=""><button class="btn-submit" class="openNav2">SEND</button> **<-- CLICK TO SLIDE THE THANK YOU BLUE BOX**
</div>
</form>
</div>
</div>
</div>
</div>
**<!-- HERO HEAD TO CLICK -->**
<div class="img-circle"><img src="imgs/img-christian.png"></div>
CSS -
/* GRAY FORM BOX */
.box {
position: fixed;
width: 288px;
height: 100vh;
background-color: #0b151b;
z-index: 0;
overflow: hidden;
transition: all 0.2s ease-in-out;
top: 170px;
text-align: center;
margin: 0 auto;
right: 0;
left: 0;
box-sizing: border-box;
}
.box.slideUp {
height: 0;
}
/* BLUE THANK YOU BOX */
.box2 {
position: fixed;
width: 288px;
height: 100vh;
background-color: #0084ff;
z-index: 0;
overflow: hidden;
transition: all 0.2s ease-in-out;
top: 170px;
text-align: center;
margin: 0 auto;
right: 0;
left: 0;
box-sizing: border-box;
}
.box2.slideUp {
height: 0;
}

When Select Option is selected and submitted, it shows all option in hidden all the hidden text area text

I'm encountering two problems,
I have made a request form for my clients but when I submit the form and I get the email(testing the form) I see all the hidden text area text in the HTML email. For example, if I select the GM option from the select and submit it, in the email I will see the GM option plus the AGM option.
When I select and submit another category request from the form, I will get the hidden textarea text option in email too
Is there a fix for these two problems in encountering?
Here are the two codes from my send_mail.php
$usersGMGroup = nl2br($_POST["acc_GMGroup"]);
$usersAGMGroup = nl2br($_POST["acc_AGMGroup"]);
Im using nl2br for making the codes in hidden textarea go in the next line.
$(function() {
$("#groups").change(function() {
//GM Group
{
if ($(this).val() == "GM") {
$("#groups_GM").show();
$("#acc_GMGroup").show();
} else {
$("#groups_GM").hide();
$("#acc_GMGroup").hide();
}
}
//AGM Group
{
if ($(this).val() == "AGM") {
$("#groups_AGM").show();
$("#acc_AGMGroup").show();
} else {
$("#groups_AGM").hide();
$("#acc_AGMGroup").hide();
}
}
});
});
$('#groups').trigger('change');
html,
body {
min-height: 100%;
}
body,
div,
form,
input,
label {
padding: 0;
margin: 0;
outline: none;
font-family: Roboto, Arial, sans-serif;
font-size: 15px;
color: #666;
line-height: 19px;
}
legend {
color: #fff;
background-color: #095484;
padding: 3px 5px;
font-size: 20px;
}
h1 {
position: absolute;
margin: 0;
font-size: 36px;
color: #fff;
z-index: 2;
}
.testbox {
display: flex;
justify-content: center;
align-items: center;
height: inherit;
padding: 20px;
}
form {
width: 75%;
padding: 20px;
border-radius: 8px;
background: #fff;
box-shadow: 0 0 50px 0 #095484;
}
.banner {
position: relative;
height: 300px;
background-image: url("/New_Website/Walgreens Logo's/Walgreens New Logo/banner.png");
background-size: cover;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
}
.banner::after {
content: "";
background-color: rgba(0, 0, 0, 0.6);
width: 100%;
height: 100%;
}
input {
margin-bottom: 10px;
border: 1px solid #ccc;
border-radius: 3px;
font-size: 17px;
font-weight: bold;
}
input {
width: calc(100% - 10px);
padding: 5px;
}
select {
width: 100%;
padding: 3px 0;
background: transparent;
font-size: 17px;
font-weight: bold;
}
.hiddenField {
display: none;
}
table.tb {
border-collapse: collapse;
width: 650px;
}
.tb th,
.tb td {
padding: 6px;
border: solid 1px #262626;
}
.tb th,
.tb td {
color: #262626;
}
.tb th {
background-color: lightblue;
}
textarea {
white-space: pre;
text-align: left;
width: 650px;
}
span {
text-decoration: underline;
}
div.a {
text-indent: 50px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-6">
<label for="userReqEmp">Requestor Name</label>
<input type="text" class="form-control w-100" id="userReqEmp" name="userReqEmp" placeholder="Type Here...">
</div>
<div class="col-6">
<label for="userNameEmp">Full Name</label>
<input type="text" class="form-control w-100" id="userNameEmp" name="userNameEmp" placeholder="Type Here...">
</div>
<div class="col-6">
<label for="userComEmp">Comments (Optional)</label>
<textarea type="text" class="form-control w-100" id="userComEmp" name="userComEmp" rows="7" placeholder="Type Here..."></textarea>
</div>
<div class="col-6">
<div class="row">
<label class="col-12" for="userEIDEmp">Employee ID</label>
</div>
<div class="row">
<div class="col-12">
<input type="text" class="form-control w-100" id="userEIDEmp" name="userEIDEmp" placeholder="Type Here...">
</div>
</div>
<div class="row">
<label class="col-12" for="userOIDEmp">One ID</label>
</div>
<div class="row">
<div class="col-12">
<input type="text" class="form-control w-100" id="userOIDEmp" name="userOIDEmp" placeholder="Type Here...">
</div>
</div>
<div class="row">
<label class="col-12" for="userDateEmp">Start Date</label>
</div>
<div class="row">
<div class="col-12">
<input type="date" class="form-control w-100" id="userDateEmp" name="userDateEmp" placeholder="Type Here...">
</div>
</div>
</div>
<div class="col-6">
<!-- style="visibility:hidden;" -->
<!-- acc means account -->
<!-- GM Group -->
<textarea style="visibility:hidden;" class="textarea" id="acc_GMGroup" name="acc_GMGroup" rows="2">
<u>Domain Group Access</u>
AP
FunctionManagers
Managers
<u>Distribution List</u>
Woodland Mgmt
WoodlandDCManager
InboundManagers
<u>Additional Access</u>
DCNet
AS400 (JOB-CAT-01)
VPN Non-Standard
</textarea>
</div>
<div class="col-6">
<!-- style="visibility:hidden;" -->
<!-- acc means account -->
<!-- AGM Group -->
<textarea style="visibility:hidden;" class="textarea" id="acc_AGMGroup" name="acc_AGMGroup" rows="2">
<u>Domain Group Access</u>
AP
FunctionManagers
Managers
<u>Distribution List</u>
Woodland Mgmt
WoodlandDCManager
InboundManagers
<u>Additional Access</u>
DCNet
AS400 (JOB-CAT-01)
VPN Non-Standard
</textarea>
</div>
<!-- Main Selection -->
<div class="col-6">
<div class="row">
<label class="col-12">Select Department</label>
</div>
<div class="row">
<div class="col-12">
<select id="groups" name="groups" class="form-control w-100">
<option selected value="">Select an option</option>
<option value="GM">GM</option>
<option value="AGM">AGM</option>
<option value="AP">AP</option>
<option value="IO">IO</option>
</select>
</div>
</div>
<br>
<!-- GM -->
<div class="row">
<div class="col-12" id="groups_GM" name="groups_GM" style="display: none;">
<h2>DC GM Group</h2>
<table class="tb">
<tr>
<th>Domain Group Access</th>
<!-- Title -->
</tr>
<tr>
<td>AP<br>FunctionManagers<br>Managers</td>
<!-- Content -->
</tr>
<tr>
<th>Distribution List</th>
<!-- Title -->
</tr>
<tr>
<td>Woodland Mgmt<br>WoodlandDCManager<br>InboundManagers</td>
<!-- Content -->
</tr>
<tr>
<th>Additional Access</th>
<!-- Title -->
</tr>
<tr>
<td>DCNet<br>AS400 (JOB-CAT-01)<br>VPN Non-Standard</td>
<!-- Content -->
</tr>
</table>
</div>
</div>
<div class="row">
<div class="col-12" id="groups_AGM" name="groups_AGM" style="display: none;">
<h2>DC AGM Group</h2>
<table class="tb">
<tr>
<th>Domain Group Access</th>
<!-- Title -->
</tr>
<tr>
<td>AP<br>FunctionManagers<br>Managers</td>
<!-- Content -->
</tr>
<tr>
<th>Distribution List</th>
<!-- Title -->
</tr>
<tr>
<td>Woodland Mgmt<br>WoodlandDCManager<br>InboundManagers</td>
<!-- Content -->
</tr>
<tr>
<th>Additional Access</th>
<!-- Title -->
</tr>
<tr>
<td>DCNet<br>AS400 (JOB-CAT-01)<br>VPN Non-Standard</td>
<!-- Content -->
</tr>
</table>
</div>
</div>
</div>

This will show the selector value chosen on form submit which should be useful in filtering out anything you don't want to be displayed in the email.
HTML
<form method='post'>
<select name='selector' required>
<option value=''>Select from the list...</option>
<option value='01'>First Value</option>
<option value='02'>Second Value</option>
<option value='03'>Third Value</option>
</select>
<button name='submit'>SUBMIT</button>
</form>
PHP
if (isset($_POST['submit'])) {
$selector_data = "";
$selector = $_POST['selector']; // Unprotected just to serve as working example
if ($selector == "01") {
$selector_data = " selector_data for first option chosen";
}
if ($selector == "02") {
$selector_data = " selector_data for second option chosen";
}
if ($selector == "03") {
$selector_data = " selector_data for third option chosen";
}
echo $selector.$selector_data;
}

Anomalous padding/margin during slideToggle() jquery

Does slideToggle() change padding or margins during the transition and than bringing them back to normality? Bacause i'm trying to toggle two forms, one for login and one for registration for a static html page, but during the transition something like a top margin is created between my forms and other stuff (A text to be precise) and than everything is resized back to how it is supposed to be.
First screen is with static page and no transition, the latter during the transition: https://imgur.com/a/R5pppq5
Here the code, I'm programming on Atom with live server plugin:
// Example starter JavaScript for disabling form submissions if there are invalid fields
var index_toggle = new Boolean(true);
$(document).ready(function() {
$("#toggle_home").click(function() {
$("#login").slideToggle("slow");
$("#register").slideToggle("slow");
$("#toggle_home_txt").fadeOut(function() {
if (index_toggle) {
$(this).html("↧ LOGIN").fadeIn();
} else {
$(this).html("↥ REGISTER").fadeIn();
}
index_toggle = !index_toggle;
});
});
});
#register {
display: none;
}
body.index {
display: -ms-flexbox;
display: flex;
-ms-flex-align: center;
align-items: center;
padding-top: 80px;
padding-bottom: 40px;
background-color: white;
color: #6c757d;
}
div.index {
padding-top: 40px;
padding-bottom: 0px;
border-radius: 3%;
width: 500px;
}
button {
border-radius: 20%;
padding-bottom: 10%;
padding-top: 0;
background-color: #e9ecef;
border-color: #6c757d;
border-style: solid;
color: #6c757d;
transition: 0.3s ease;
}
button:focus {
outline: none;
}
#send_butt {
width: 40px;
height: 40px;
}
button:hover {
background-color: #6c757d;
color: white;
}
button.toggle_home {
top: 0px;
padding-bottom: 2%;
transform: translate(0, -100%);
}
img.index {
width: 100px;
height: 100px;
border-radius: 50%;
position: absolute;
left: 50%;
transform: translate(-50%, -100%);
background-color: #e9ecef;
border-color: white;
border-style: solid;
}
.form-signin {
width: 450px;
padding: 15px;
margin: auto;
}
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body class="text-center index">
<div class="jumbotron index form-signin">
<img src="images/user_index.png" class="index" />
<p id="index_text" class="my-3">Please fill this form to create an account.</p>
<form id="login" novalidate>
<hr>
<div class="form-row">
<!-- Username input -->
<div class="col-md-12 mb-3">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text"> ›</span>
</div>
<input type="text" class="form-control" id="LoginUsername" placeholder="Username" required>
</div>
</div>
</div>
<!-- Password input -->
<div class="form-row">
<input type="password" class="col-md-6 mb-3 form-control" id="LoginPassword" placeholder="Password" required>
<div class="text-right col-md-6 mb-3 form-check">
<input class="form-check-input" type="checkbox" id="LoginRemember">
<label class="form-check-label" for="LoginRemember">Remember me?</label>
</div>
</div>
</form>
<div id="div_toggle">
<hr>
<div class="toggle_home" style="float:left;">
<button id="toggle_home" class="toggle_home">
<div id="toggle_home_txt">
↥ REGISTER
</div>
</button>
</div>
</div>
<form id="register" class="form-signin mt-5" novalidate>
<div class="form-row">
<div class="col mb-3">
<input type="text" class="form-control" id="RegName" placeholder="First name" required>
</div>
<div class="col-md-6 mb-3">
<input type="text" class="form-control" id="RegSurname" placeholder="Surname" required>
</div>
</div>
<div class="form-row">
<div class="col-md-12 mb-3">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text"> ›</span>
</div>
<input type="text" class="form-control" id="RegUsername" placeholder="Username" required>
</div>
</div>
</div>
<div class="form-row">
<div class="col-md-6 mb-3">
<input type="password" class="form-control" id="RegPassword" placeholder="Password" required>
</div>
<div class="col-md-6 mb-3">
<input type="password" class="form-control" id="RegConfirmPassword" placeholder="Confirm Password" required>
</div>
</div>
<hr/>
</form>
<div style="float:right;">
<button id="send_butt" class="mb-2">›</button>
</div>
</div>
</body>

For anyone looking for another solution to this issue, you can use a pseudo element with a fixed height in place of margins to stop the collapsing margins effect, e.g:
.hidden-element:before {
display: block;
width: 100%;
height: 24px; /* the top margin height you want */
content: '';
}
You can also use an :after for the bottom margin.

I believe the changing gap is a result of margin collapse.
Parent and first/last child
If there is no border, padding, inline part, block formatting context created, or clearance to separate the margin-top of a block from the margin-top of its first child block ... then those margins collapse. The collapsed margin ends up outside the parent.
On page load, margins are collapsed between p.index_text and the <hr> inside form#login. When jQuery starts slideDown(), it adds overflow:hidden to the sliding element #form#login. This creates "clearance" between the <p> and the <hr> and the margin stops collapsing. Visually, the gap increases between the two elements.
There are various methods to prevent margin collapse. I chose padding since the other form already has some:
#login {
padding:15px;
}
Working example:
// Example starter JavaScript for disabling form submissions if there are invalid fields
var index_toggle = new Boolean(true);
$(document).ready(function() {
$("#toggle_home").click(function() {
$("#login").slideToggle("slow");
$("#register").slideToggle("slow");
$("#toggle_home_txt").fadeOut(function() {
if (index_toggle) {
$(this).html("↧ LOGIN").fadeIn();
} else {
$(this).html("↥ REGISTER").fadeIn();
}
index_toggle = !index_toggle;
});
});
});
#register {
display: none;
}
body.index {
display: -ms-flexbox;
display: flex;
-ms-flex-align: center;
align-items: center;
padding-top: 80px;
padding-bottom: 40px;
background-color: white;
color: #6c757d;
}
div.index {
padding-top: 40px;
padding-bottom: 0px;
border-radius: 3%;
width: 500px;
}
button {
border-radius: 20%;
background-color: #e9ecef;
border-color: #6c757d;
border-style: solid;
color: #6c757d;
transition: 0.3s ease;
}
button:focus {
outline: none;
}
#send_butt {
width: 40px;
height: 40px;
}
button:hover {
background-color: #6c757d;
color: white;
}
img.index {
width: 100px;
height: 100px;
border-radius: 50%;
position: absolute;
left: 50%;
transform: translate(-50%, -100%);
background-color: #e9ecef;
border-color: white;
border-style: solid;
}
.form-signin {
width: 450px;
padding: 15px;
margin: auto;
}
#login {
padding:15px;
}
hr,
#register {
margin: 0 !important;
}
#div_toggle {
display: flex;
align-items: center;
}
#div_toggle:after {
content: "";
flex: 1 0 auto;
border-top: 1px solid #CCC;
}
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body class="text-center index">
<div class="jumbotron index form-signin">
<img src="images/user_index.png" class="index" />
<p id="index_text" class="my-3">Please fill this form to create an account.</p>
<form id="login" novalidate>
<hr>
<div class="form-row">
<!-- Username input -->
<div class="col-md-12 mb-3">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text"> ›</span>
</div>
<input type="text" class="form-control" id="LoginUsername" placeholder="Username" required>
</div>
</div>
</div>
<!-- Password input -->
<div class="form-row">
<input type="password" class="col-md-6 mb-3 form-control" id="LoginPassword" placeholder="Password" required>
<div class="text-right col-md-6 mb-3 form-check">
<input class="form-check-input" type="checkbox" id="LoginRemember">
<label class="form-check-label" for="LoginRemember">Remember me?</label>
</div>
</div>
</form>
<div id="div_toggle">
<button id="toggle_home" class="toggle_home">
<div id="toggle_home_txt">
↥ REGISTER
</div>
</button>
</div>
<form id="register" class="form-signin mt-5" novalidate>
<div class="form-row">
<div class="col mb-3">
<input type="text" class="form-control" id="RegName" placeholder="First name" required>
</div>
<div class="col-md-6 mb-3">
<input type="text" class="form-control" id="RegSurname" placeholder="Surname" required>
</div>
</div>
<div class="form-row">
<div class="col-md-12 mb-3">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text"> ›</span>
</div>
<input type="text" class="form-control" id="RegUsername" placeholder="Username" required>
</div>
</div>
</div>
<div class="form-row">
<div class="col-md-6 mb-3">
<input type="password" class="form-control" id="RegPassword" placeholder="Password" required>
</div>
<div class="col-md-6 mb-3">
<input type="password" class="form-control" id="RegConfirmPassword" placeholder="Confirm Password" required>
</div>
</div>
<hr/>
</form>
<div style="float:right;">
<button id="send_butt" class="mb-2">›</button>
</div>
</div>
</body>
The animations also seem to jump and the end, but that may be a separate issue.
Edit
Further jumping seems to have been caused by margin on the second form, so I removed it. The translated button seemed to cause problems, too, so I rebuilt it. Code above was edited accordingly.

Script for toggling accordion tabs with a button click

I reused some of the code from a site and made a shopping cart accordion module. I have the whole code as a pen on codepen.
Here is the link for the pen: http://codepen.io/applecool/pen/YXaJLa
<div class="summary">
<button class="expand btn btn-lg">Collapse All for Summary</button>
</div>
HTML for button above : I added a button at the bottom called as "Collapse All for Summary". The purpose of this button: When a user clicks on the button, it should open all the accordion tabs and when clicked on it again, should close the accordion tabs. [i.e., a typical toggle functionality].
I wrote a small javascript function to make the accordion tabs toggle but it is very buggy. It does the job perfectly but the problem is, once I click on the button, the general click on the tab doesn't work. i.e., when you open up the codepen and click on the accordion tab, it smoothly opens up and closes. But after adding the toggle button functionality, you fire up the page, click on the "Collapse All for Summary" button, the accordion tabs work fine. Now, when you try to click on any of the closed or opened accordion tabs, the tab neither opens nor closes. I think the problem is definitely with the changing of classes which I am doing in the javascript with the CSS.
Script:
$('.expand').click(function(){
if($('.accordionItem.is-collapsed').css('max-height')== '0px'){
$('.accordionItem.is-collapsed').css({
'max-height': '900px'
});
}else if($('.accordionItem.is-collapsed').css('max-height')== '900px'){
$('.accordionItem.is-collapsed').css({
'max-height': '0px'
});
}
});
CSS specific to the above script and the button div:
.accordionItem.is-collapsed{
max-height: 0px;
}
Any help on this would be hugely appreciated. If there is any work around, I can gladly follow that too. Please let me know what idiotic mistake I am doing here. :)
Thank you.
Cheers,
.SH

I edited your code a bit to include the expand/collapse all functionality. I think it's sloppy and you should clean it up before implementing, but it gets the job done.
The additions utilize arrays to loop over either one item or all items based on whether you click an individual item or the expand/collapse all button. The good thing about this is that it's the same as the original code, but can handle toggling the classes on multiple items.
I put some comments in the JavaScript that explains more.
//uses classList, setAttribute, and querySelectorAll
//if you want this to work in IE8/9 youll need to polyfill these
(function() {
var d = document,
accordionToggles = d.querySelectorAll('.js-accordionTrigger'),
setAria,
setAccordionAria,
switchAccordion,
touchSupported = ('ontouchstart' in window),
pointerSupported = ('pointerdown' in window);
skipClickDelay = function(e) {
e.preventDefault();
e.target.click();
}
setAriaAttr = function(el, ariaType, newProperty) {
el.setAttribute(ariaType, newProperty);
};
setAccordionAria = function(el1, el2, expanded) {
switch (expanded) {
case "true":
setAriaAttr(el1, 'aria-expanded', 'true');
setAriaAttr(el2, 'aria-hidden', 'false');
break;
case "false":
setAriaAttr(el1, 'aria-expanded', 'false');
setAriaAttr(el2, 'aria-hidden', 'true');
break;
default:
break;
}
};
//function
switchAccordion = function(e) {
e.preventDefault();
var questions = [],
answers = [];
//if expand-all button is clicked, then push all questions and answers into respective arrays
if($(e.target).hasClass('expand')) {
$('.accordion-title').each( function(index) {
questions.push(this);
answers.push(this.parentNode.nextElementSibling);
});
}
//else if an individual item is clicked, then push its question and answer into respective arrays
else {
questions.push(e.target);
answers.push(e.target.parentNode.nextElementSibling);
}
//original code wrapped in "for" loop to handle single item or all items
for (var i = 0, len = questions.length; i < len; i++) {
var thisQuestion = questions[i];
var thisAnswer = answers[i];
if (thisAnswer.classList.contains('is-collapsed')) {
setAccordionAria(thisQuestion, thisAnswer, 'true');
} else {
setAccordionAria(thisQuestion, thisAnswer, 'false');
}
thisQuestion.classList.toggle('is-collapsed');
thisQuestion.classList.toggle('is-expanded');
thisAnswer.classList.toggle('is-collapsed');
thisAnswer.classList.toggle('is-expanded');
thisAnswer.classList.toggle('animateIn');
}
};
for (var i = 0, len = accordionToggles.length; i < len; i++) {
if (touchSupported) {
accordionToggles[i].addEventListener('touchstart', skipClickDelay, false);
}
if (pointerSupported) {
accordionToggles[i].addEventListener('pointerdown', skipClickDelay, false);
}
accordionToggles[i].addEventListener('click', switchAccordion, false);
}
//add listener for the expand-all button
$('.expand').on('click', switchAccordion);
})();
#import url(http://fonts.googleapis.com/css?family=Libre+Baskerville);
* {
box-sizing: border-box;
border-radius: 5px;
}
body {
font-family: 'Libre Baskerville';
}
.heading-primary {
font-size: 2em;
padding: 2em;
text-align: center;
}
.accordion dl,
.accordion-list {
border: 1px solid #ddd;
}
.accordion dl:after,
.accordion-list:after {
content: "";
display: block;
height: 1em;
width: 100%;
background-color: #099DF6;
}
.accordion dd,
.accordion__panel {
background-color: #eee;
font-size: 1em;
line-height: 1.5em;
}
.accordion p {
padding: 1em 2em 1em 2em;
}
.accordion {
position: relative;
background-color: #eee;
}
.container {
max-width: 960px;
margin: 0 auto;
padding: 2em 0 2em 0;
}
.accordionTitle,
.accordion__Heading {
background-color: #099DF6;
/*text-align: center; */
text-indent: 3px;
font-weight: 700;
padding: 2em;
display: block;
text-decoration: none;
color: #fff;
-webkit-transition: background-color 0.5s ease-in-out;
transition: background-color 0.5s ease-in-out;
border-bottom: 1px solid #30bb64;
}
.accordionTitle:before,
.accordion__Heading:before {
content: "+";
font-size: 1.5em;
line-height: 0.9em;
float: left;
-webkit-transition: -webkit-transform 0.3s ease-in-out;
transition: transform 0.3s ease-in-out;
}
.accordionTitle:hover,
.accordion__Heading:hover {
background-color: #38CC70;
}
.accordionTitleActive,
.accordionTitle.is-expanded {
background-color: #38CC70;
}
.accordionTitleActive:before,
.accordionTitle.is-expanded:before {
-webkit-transform: rotate(-225deg);
-ms-transform: rotate(-225deg);
transform: rotate(-225deg);
}
.accordionItem {
height: auto;
overflow: auto;
max-height: 900px;
-webkit-transition: max-height 1s;
transition: max-height 1s;
}
#media screen and (min-width: 48em) {
.accordionItem {
max-height: 900px;
-webkit-transition: max-height 0.5s;
transition: max-height 0.5s;
}
}
.accordionItem.is-collapsed {
max-height: 0;
}
.no-js .accordionItem.is-collapsed {
max-height: 900px;
}
.animateIn {
-webkit-animation: accordionIn 0.65s normal ease-in-out both 1;
animation: accordionIn 0.65s normal ease-in-out both 1;
}
.animateOut {
-webkit-animation: accordionOut 0.75s alternate ease-in-out both 1;
animation: accordionOut 0.75s alternate ease-in-out both 1;
}
#-webkit-keyframes accordionIn {
0% {
opacity: 0;
-webkit-transform: scale(0.9) rotateX(-60deg);
transform: scale(0.9) rotateX(-60deg);
-webkit-transform-origin: 50% 0;
transform-origin: 50% 0;
}
100% {
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1);
}
}
#keyframes accordionIn {
0% {
opacity: 0;
-webkit-transform: scale(0.9) rotateX(-60deg);
transform: scale(0.9) rotateX(-60deg);
-webkit-transform-origin: 50% 0;
transform-origin: 50% 0;
}
100% {
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1);
}
}
#-webkit-keyframes accordionOut {
0% {
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1);
}
100% {
opacity: 0;
-webkit-transform: scale(0.9) rotateX(-60deg);
transform: scale(0.9) rotateX(-60deg);
}
}
#keyframes accordionOut {
0% {
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1);
}
100% {
opacity: 0;
-webkit-transform: scale(0.9) rotateX(-60deg);
transform: scale(0.9) rotateX(-60deg);
}
}
/*label styles */
.label-style {
float: left;
margin-right: 15px;
padding-top: 5px;
padding-left: 100px;
}
/* form headings */
.headings {
text-align: center;
font-weight: bold;
}
/* button styles */
.button-container {
text-align: center;
margin-bottom: 5px;
}
/* position of the hint */
.hint {
display: inline-block;
position: relative;
margin-left: 0.5em;
margin-top: 0.3em;
}
/* background style for 'i' */
.hint-icon {
background: #099DF6;
border-radius: 10px;
cursor: pointer;
display: inline-block;
font-style: normal;
font-family: 'Libre Baskerville';
height: 20px;
line-height: 1.3em;
text-align: center;
width: 20px;
}
/* hint icon hover style */
.hint-icon:hover {
background: #1f8ac9;
}
/* Displays the hint. important! Do not remove. */
.hint:hover .hint-description,
.hint:focus .hint-description {
display: inline-block;
}
/* position of the hint */
.hint-description {
display: none;
background: #3b3b3b;
border: 1px solid #099DF6;
border-radius: 3px;
font-size: 0.8em;
color: #ffffff;
font-weight: bold;
/*padding: 1em; */
position: absolute;
left: 30px;
top: -15px;
width: 180px;
height: auto;
}
/* styling for the arrow */
.hint-description:before,
.hint-description:after {
content: "";
position: absolute;
left: -11px;
top: 15px;
border-style: solid;
border-width: 10px 10px 10px 0;
border-color: transparent #099DF6;
}
/* overlay styling */
.hint-description:after {
left: -10px;
border-right-color: #3b3b3b;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Used some part of the code from Chris Wright (http://codepen.io/chriswrightdesign/)'s Pen -->
<div class="container">
<h1 class="heading-primary">Accordion Checkout Form Version 0.1 </h1>
<div class="accordion">
<dl>
<!-- description list -->
<dt>
<!-- accordion tab 1 - Delivery and Pickup Options -->
Delivery and Pickup Options
</dt>
<dd class="accordion-content accordionItem is-collapsed" id="accordion1" aria-hidden="true">
<p>One can insert a div here and add the product image and the description of the product. Quantity, Cost.</p>
</dd>
<!--end accordion tab 1 -->
<dt>
<!-- accordion tab 2 - Shipping Info -->
Shipping Information
</dt>
<dd class="accordion-content accordionItem is-collapsed" id="accordion2" aria-hidden="true">
<div class="container-fluid" style="padding-top: 20px;">
<p class="headings">Shipping Address</p>
<form class="main-container">
<div class="row">
<div class="col-xs-4">
<label for="fullname" class="label-style">Full Name</label>
</div>
<div class="form-group col-lg-4">
<input type="text" id="fullname" class="form-control" placeholder="Enter your full name" required>
</div>
<div class="hint">
<i class="hint-icon">i</i>
<p class="hint-description">Enter your full name</p>
</div>
</div>
<div class="row">
<div class="col-xs-4">
<label for="companyname" class="label-style">Company Name</label>
</div>
<div class="form-group col-lg-4">
<input type="text" id="companyname" class="form-control" placeholder="Enter Company Name (optional)" required>
</div>
<div class="hint">
<i class="hint-icon">i</i>
<p class="hint-description">Enter your Company name</p>
</div>
</div>
<div class="row">
<div class="col-xs-4">
<label for="phonenumber" class="label-style">Phone Number</label>
</div>
<div class="form-group col-lg-4">
<input type="text" id="phonenumber" class="form-control" placeholder="Enter Phone Number" required>
</div>
<div class="hint">
<i class="hint-icon">i</i>
<p class="hint-description">In (555)5555-555 Format</p>
</div>
</div>
<div class="row">
<div class="col-xs-4">
<label for="address-line1" class="label-style">Address Line 1</label>
</div>
<div class="form-group col-lg-4">
<input type="text" id="address-line1" class="form-control" placeholder="Enter Address" required>
</div>
<div class="hint">
<i class="hint-icon">i</i>
<p class="hint-description">Address Line 1</p>
</div>
</div>
<div class="row">
<div class="col-xs-4">
<label for="address-line2" class="label-style">Line 2</label>
</div>
<div class="form-group col-lg-4">
<input type="text" id="address-line2" class="form-control" placeholder="Apt, Suite, Bldg (optional)" required>
</div>
<div class="hint">
<i class="hint-icon">i</i>
<p class="hint-description">Address Line 2</p>
</div>
</div>
<div class="row">
<div class="col-xs-4">
<label for="city" class="label-style">City</label>
</div>
<div class="form-group col-lg-4">
<input type="text" id="city" class="form-control" placeholder="Enter City" required>
</div>
<div class="hint">
<i class="hint-icon">i</i>
<p class="hint-description">Enter your City</p>
</div>
</div>
<div class="row">
<div class="col-xs-4">
<label for="state" class="label-style">State</label>
</div>
<div class="form-group col-lg-4">
<input type="text" id="state" class="form-control" placeholder="Enter State" required>
</div>
<div class="hint">
<i class="hint-icon">i</i>
<p class="hint-description">Ex: Indiana as IN</p>
</div>
</div>
<div class="row">
<div class="col-xs-4">
<label for="country" class="label-style">Country</label>
</div>
<div class="form-group col-lg-4">
<input type="text" id="country" class="form-control" placeholder="Enter Country" required>
</div>
<div class="hint">
<i class="hint-icon">i</i>
<p class="hint-description">Enter your country</p>
</div>
</div>
<div class="row">
<div class="col-xs-4">
<label for="zipcode" class="label-style">Zip Code</label>
</div>
<div class="form-group col-lg-4">
<input type="text" id="zipcode" class="form-control" placeholder="Enter Zip Code" required>
</div>
<div class="hint">
<i class="hint-icon">i</i>
<p class="hint-description">Enter ZipCode.</p>
</div>
</div>
<div class="button-container">
<button class="btn btn-success" type="submit">Submit</button>
<button class="btn btn-warning" type="reset">Reset</button>
</div>
</form>
</div>
</dd>
<!-- end accordion tab 2 -->
<dt>
<!-- accordion tab 3 - Payment Info -->
Payment Information
</dt>
<dd class="accordion-content accordionItem is-collapsed" id="accordion3" aria-hidden="true">
<div class="container-fluid" style="padding-top: 20px;">
<p class="headings">Billing Information</p>
<form class="main-container">
<div class="row">
<div class="col-xs-4">
<label for="fullname" class="label-style">Full Name</label>
</div>
<div class="form-group col-lg-4">
<input type="text" id="fullname" class="form-control" placeholder="Enter your full name" required>
</div>
<div class="hint">
<i class="hint-icon">i</i>
<p class="hint-description">Enter your full name</p>
</div>
</div>
<div class="row">
<div class="col-xs-4">
<label for="companyname" class="label-style">Company Name</label>
</div>
<div class="form-group col-lg-4">
<input type="text" id="companyname" class="form-control" placeholder="Enter Company Name (optional)" required>
</div>
<div class="hint">
<i class="hint-icon">i</i>
<p class="hint-description">Enter your Company name</p>
</div>
</div>
<div class="row">
<div class="col-xs-4">
<label for="phonenumber" class="label-style">Phone Number</label>
</div>
<div class="form-group col-lg-4">
<input type="text" id="phonenumber" class="form-control" placeholder="Enter Phone Number" required>
</div>
<div class="hint">
<i class="hint-icon">i</i>
<p class="hint-description">In (555)5555-555 Format</p>
</div>
</div>
<div class="row">
<div class="col-xs-4">
<label for="address-line1" class="label-style">Address Line 1</label>
</div>
<div class="form-group col-lg-4">
<input type="text" id="address-line1" class="form-control" placeholder="Enter Address" required>
</div>
<div class="hint">
<i class="hint-icon">i</i>
<p class="hint-description">Address Line 1</p>
</div>
</div>
<div class="row">
<div class="col-xs-4">
<label for="address-line2" class="label-style">Line 2</label>
</div>
<div class="form-group col-lg-4">
<input type="text" id="address-line2" class="form-control" placeholder="Apt, Suite, Bldg (optional)" required>
</div>
<div class="hint">
<i class="hint-icon">i</i>
<p class="hint-description">Address Line 2</p>
</div>
</div>
<div class="row">
<div class="col-xs-4">
<label for="city" class="label-style">City</label>
</div>
<div class="form-group col-lg-4">
<input type="text" id="city" class="form-control" placeholder="Enter City" required>
</div>
<div class="hint">
<i class="hint-icon">i</i>
<p class="hint-description">Enter your City</p>
</div>
</div>
<div class="row">
<div class="col-xs-4">
<label for="state" class="label-style">State</label>
</div>
<div class="form-group col-lg-4">
<input type="text" id="state" class="form-control" placeholder="Enter State" required>
</div>
<div class="hint">
<i class="hint-icon">i</i>
<p class="hint-description">Ex: Indiana as IN</p>
</div>
</div>
<div class="row">
<div class="col-xs-4">
<label for="country" class="label-style">Country</label>
</div>
<div class="form-group col-lg-4">
<input type="text" id="country" class="form-control" placeholder="Enter Country" required>
</div>
<div class="hint">
<i class="hint-icon">i</i>
<p class="hint-description">Enter your country</p>
</div>
</div>
<div class="row">
<div class="col-xs-4">
<label for="zipcode" class="label-style">Zip Code</label>
</div>
<div class="form-group col-lg-4">
<input type="text" id="address-line2" class="form-control" placeholder="Enter Zip Code" required>
</div>
<div class="hint">
<i class="hint-icon">i</i>
<p class="hint-description">Enter ZipCode.</p>
</div>
</div>
<div class="button-container">
<button class="btn btn-success" type="submit">Submit</button>
<button class="btn btn-warning" type="reset">Reset</button>
</div>
</form>
</div>
</dd>
<!-- end accordion tab 3 -->
</dl>
<!-- end description list -->
</div>
<!-- end accordion -->
</div>
<!-- end container -->
<div class="summary">
<button class="expand btn btn-lg">Expand/Collapse All for Summary</button>
</div>

You should change the elements css class using javascript (.toggleClass is my favorite way to do so), and put the relevant max-height value on your css like so:
** JS **
$('.expand').click(function(){
$('.accordionItem').toggleClass('is-collapsed');
});
** CSS **
.accordionItem {max-height: 900px;}
.accordionItem.is-collapsed {max-height: 0px;}

Develop Reference

JavaScript is the programming language of the Web.

Can't click on other tabs in html tabcontent - javascript

Your Tabs are working as expected. Your container "div id="ProfileTab" class="tabcontent" style="display: block;" is sitting over top of the tabs making it so you can't click them. You just need to fix the positioning of that container so it is not blocking the tabs

Related

Can I use if and else to change the content of a div, being the function triggered by a button?

Submit button to trigger thank you page

When Select Option is selected and submitted, it shows all option in hidden all the hidden text area text

Anomalous padding/margin during slideToggle() jquery

Script for toggling accordion tabs with a button click

Categories

Resources