Related
I’m trying to load a form modal using various buttons. I’ll be using my previous “Order Your Food” code as a simplified example and I’ve added the form and narrowed it down to just a first and last name fields and a simple mailto action for validation purposes. I've tried to simply this as much as possible so I apologize if there are any unneeded fragments of code that I may have missed and are not relevant.
If you click one of the button options, the form does load. If you fill in the two fields and hit submit, the form validates and prompts you to send an email to test#testingandrewsforms.com for the purpose of this demo so we’re not concerning ourselves with all of the post-submission client-to-server stuff.
What I’m trying to accomplish is the following:
User clicks Submit, form closes using the same CSS transition that was opened to begin with
-> Post submission form opens using the CSS transitions assigned to it
I’ve added “Show Form” and “Show Post” buttons so you can see how each modal is intended to operate independently. My theory is that there’s probably a way to use my closeBtn in javascript or JQuery to close the form on validated submission and then trigger opening the post-form modal. These windows are just being powered by href links that are assigned the form and post-form modal ids and the close button is simply removing those ids and just leaving the #. So far I’ve tried combinations of jquery click events and trigger events but neither seem to be doing anything.
I don’t think I can target the CSS attribute visibility which is used to hide the modals in jquery because they’re hidden by default and as far as I can tell from the browser inspector they’re not adding the attribute as an inline style so I don’t think I can remove it like that. I think that may be because I’m using the target selector to power the transition.
Any thoughts on how I might be able to accomplish this? I’m open to any methods, pure CSS, JS, Jquery, whatever works because so far nothing I’ve tried has worked for me. I've searched SO and there are several posts on trigger events but none seem to be related to doing so with modals linked via hrefs.
let foodHeaderText = document.getElementById('foodHeaderText');
const orderBtn = document.getElementsByClassName('orderBtn');
const closeBtn = document.getElementsByClassName('closeBtn');
for (let order = 0; order < orderBtn.length; order++) {
orderBtn[order].addEventListener('click', function(event) {
foodHeaderText.innerHTML = event.target.attributes["value"]["value"];
})
}
for (let close = 0; close < closeBtn.length; close++) {
closeBtn[close].addEventListener('click', function(event) {
foodHeaderText.innerHTML = "Food";
contactFormInput.reset();
})
}
//validate and display post modal
$(document).ready(function () {
$("#contactForm").submit(function (e) {
$("#closeFormButton").trigger("click");
$("#formPost").show();
});
});
*,
*::before,
*::after {
box-sizing: border-box !important;
}
html {
font-size: 100% !important;
}
.foodHeader {
display: block;
font-family: Univers, Helvetica Neue, Helvetica, Arial;
font-weight: 700;
text-align: center;
color: black;
font-size: 3rem;
margin: 0 auto;
}
.btnContainer {
display: flex;
flex-direction: row;
}
.orderBtn {
display: block;
font-family: Univers, Helvetica Neue, Helvetica, Arial;
font-weight: 700;
text-align: center;
color: white;
width: 200px;
height: 50px;
margin: 0 auto;
background-color: red;
font-size: 0.8rem;
padding: 10px 10px;
line-height: 2rem;
text-decoration: none !important;
outline: 1px solid black;
}
.closeBtnContainer {
display: block;
margin: 20px auto;
text-align: center;
}
.contactFormModal {
visibility: hidden;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
display: flex;
align-items: center;
justify-content: center;
z-index: 2;
height: auto;
width: auto;
margin: 0 auto;
overflow: visible;
transform: translateY(calc(-50% - 50%));
transition: all 0.6s ease-out;
}
.contactFormModal:target {
visibility: visible;
z-index: 2;
transform: translateY(calc(50% - 50%));
transition: transform 0.6s ease-out;
}
.formWrapper {
position: relative;
display: block;
background-color: #FAFAFA;
outline: 1px solid black;
margin: 0 auto;
max-width: 520px;
width: auto;
height: auto;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.6);
}
.closeBtn {
display: inline-block;
position: absolute;
right: 1rem;
top: 0.95rem;
width: auto;
height: auto;
user-select: none;
cursor: pointer;
margin: 0 auto;
}
.fa-window-close {
color: #646464;
transition: color 0.2s linear;
}
.fa-window-close:hover,
.fa-window-close:focus {
color: black;
transition: color 0.2s linear;
}
.orderFormHeader {
font-family: Univers, Helvetica Neue, Helvetica, Arial;
display: block;
font-weight: bold;
text-align: center;
color: black;
font-size: clamp(2.2em, 3vw, 2.2em);
margin: 0rem auto;
padding: 0.7rem 0rem 0rem 0rem;
line-height: 1.3em;
letter-spacing: -0.02em;
}
.orderFormLineBreaker {
margin: 0em auto 0.5em auto;
display: block;
border: none;
color: white;
height: 1px;
background: black;
background: -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 190, from(#000), to(#FAFAFA));
}
.orderFormContainer {
width: 520px;
height: auto;
display: block;
position: relative;
margin: 0 auto;
background-color: transparent;
}
.footerContainer {
display: flex;
flex-direction: row;
align-items: center;
margin: 0.5rem auto;
}
.submitBtnNoSelect {
user-select: none;
}
.submitBtn {
font-family: Univers, Helvetica Neue, Helvetica, Arial;
display: inline-block;
font-weight: 700;
width: 7rem;
height: auto;
color: white;
background-color: #CC1818;
padding: 0.2rem 0rem 0.1rem 0.5rem;
margin: 0rem 1rem 0rem auto;
text-align: left;
text-decoration: none;
font-size: 1.5em;
word-spacing: normal;
cursor: pointer;
border: 1px solid black;
transition: all 0.3s ease-in-out;
}
.contactFormContainer {
display: flex;
flex-direction: column;
flex-wrap: nowrap;
}
.orderPageRow {
display: flex;
flex-direction: row;
flex-wrap: wrap;
width: 100%;
margin: 0 auto;
padding: 0.5rem 1rem 0rem 1rem;
}
.orderPageRow:first-child {
padding-top: 1rem;
}
.orderPageColumn {
display: flex;
flex-direction: column;
flex-basis: 100%;
flex: 1;
margin: 0 auto;
text-align: left;
}
.contactFieldNames {
font-family: Univers, Helvetica Neue, Helvetica, Arial;
display: inline-block;
font-weight: 700;
color: #646464;
background-color: transparent;
padding: 0rem 0rem 0rem 0rem;
margin: 0rem auto;
text-align: left;
text-decoration: none;
font-size: 1rem;
word-spacing: normal;
}
.formInput {
height: 100%;
width: 246px;
padding: 10px;
font-family: Univers, Helvetica Neue, Helvetica, Arial;
font-weight: 700;
font-size: 1rem;
}
.requiredAsterisk {
font-family: Univers, Helvetica Neue, Helvetica, Arial;
display: inline-block;
font-weight: 700;
font-size: 1em;
}
.disclosureText {
font-family: Univers, Helvetica Neue, Helvetica, Arial;
display: inline-block;
font-weight: 400;
line-height: 1.2em;
font-size: 0.7em;
text-align: justify;
text-justify: inter-word;
color: #646464;
margin: 0rem 1rem 0.85rem 1rem;
}
.commentsInput {
display: block;
font-family: Univers, Helvetica Neue, Helvetica, Arial;
font-weight: 700;
background-color: white;
font-size: 1rem;
resize: vertical;
overflow: auto;
overflow-wrap: break-word;
min-height: 82px;
width: 246px;
line-height: 20px;
padding: 10px;
border: 1px solid #767676;
border-radius: 2px;
}
/* begin form post modal */
.formPostContainer {
width: 520px;
height: auto;
display: block;
position: relative;
margin: 0 auto;
background-color: transparent;
}
.formPostModal {
visibility: hidden;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
display: flex;
align-items: center;
justify-content: center;
z-index: 2;
height: auto;
width: auto;
margin: 0 auto;
overflow: visible;
transform: translateX(calc(-50% - 50%));
transition: all 0.6s ease-out;
}
.formPostModal:target {
visibility: visible;
z-index: 2;
transform: translateX(calc(50% - 50%));
transition: transform 0.6s ease-out;
}
.formPostWrapper {
position: relative;
display: block;
background-color: #FAFAFA;
outline: 1px solid black;
margin: 0 auto;
max-width: 520px;
width: auto;
height: auto;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.6);
}
.formPostConfirmationText {
position: relative;
display: block;
font-family: Oswald, Univers, Helvetica Neue, Helvetica, Arial;
font-weight: 700;
line-height: 1.2em;
font-size: 1.6em;
text-align: justify;
text-justify: inter-word;
color: #646464;
margin: 0rem 1rem;
}
.homeBtnNoSelect {
user-select: none;
}
.homeBtn {
font-family: Univers, Helvetica Neue, Helvetica, Arial;
display: inline-block;
font-weight: 700;
width: 35%;
height: auto;
color: white;
background-color: #CC1818;
padding: 0.2rem 0.5rem 0.1rem 0rem;
margin: 0.5rem auto 0rem auto;
text-align: center;
text-decoration: none;
font-size: 1.5em;
word-spacing: normal;
cursor: pointer;
border: 1px solid black;
transition: all 0.3s ease-in-out;
}
.formPostFooter {
display: flex;
flex-direction: column;
align-items: center;
margin: 0.5rem auto;
}
/* end form post modal */
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<meta name="viewport" content="width=device-width, initial-scale=1" charset="UTF-8">
<link rel=" stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" integrity="sha512-1ycn6IcaQQ40/MKBW2W4Rhis/DbILU74C1vSrLJxCq57o941Ym01SwNsOMqvEBFlcgUa6xLiPY/NS5R+E6ztJQ==" crossorigin="anonymous" referrerpolicy="no-referrer">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="foodHeader">Order Your Food</div>
<div class="btnContainer">
<a class="orderBtn" href="#contactForm" name="foodItem" value="Cheeseburger">Order Your Cheeseburger</a>
<a class="orderBtn" href="#contactForm" name="foodItem" value="Salad" style="background-color: green">Order Your Salad</a>
<a class="orderBtn" href="#contactForm" name="foodItem" value="Sub" style="background-color: blue">Order Your Sub</a>
</div>
<a class="testBtn" href="#contactForm">
Sign Up
</a>
<a class="formSubmitPostTest" href="#formPost">
Post Form
</a>
<!-- contact form -->
<div class="contactFormModal" id="contactForm">
<form class="formWrapper" action="mailto:test#testingandrewsforms.com" method="post" enctype="text/plain" id="contactFormInput">
<a class="closeBtn" id="closeFormButton" href="#"><i class="fa fa-window-close"></i></a>
<div class="orderFormHeader">Order Your <div id="foodHeaderText">Food</div>
</div>
<div class="orderFormLineBreaker"></div>
<div class="orderFormContainer">
<div class="contactFormContainer">
<div class="orderPageRow">
<div class="orderPageColumn">
<label>
<span class="contactFieldNames">
First Name
<div class="requiredAsterisk">*</div>
</span>
</label>
</div>
<div class="orderPageColumn">
<input id="firstName" type="text" maxlength="20" minlength="2" class="formInput" required>
</div>
</div>
<div class="orderPageRow">
<div class="orderPageColumn">
<label>
<span class="contactFieldNames">
Last Name
<div class="requiredAsterisk">*</div>
</span>
</label>
</div>
<div class="orderPageColumn">
<input id="lastName" type="text" maxlength="20" minlength="2" class="formInput" required>
</div>
</div>
</div>
<div class="footerContainer">
<div id="burtonLogoOrderForm"></div>
<button class="submitBtn submitBtnNoSelect" id="submitFormBtn" type="submit" name="submit">Submit
</button>
</div>
<p class="disclosureText">Bottom text
</p>
</div>
</form>
</div>
<div class="formPostModal" id="formPost">
<div class="formPostWrapper">
<a class="closeBtn" id="closeFormButton" href="#"><i class="fa fa-window-close"></i></a>
<div class="orderFormHeader">Thank You!</div>
<div class="orderFormLineBreaker"></div>
<div class="formPostContainer">
<p class="formPostConfirmationText">We've received your request and will be in
touch soon!
</p>
<div class="formPostFooter">
<div id="burtonLogoPostForm"></div>
<div class="homeBtn homeBtnNoSelect">
Return Home
</div>
</div>
</div>
</div>
</div>
</body>
The form validation doesn't seem to trigger in Chrome so here's a jsfiddle that seems to work fine in Firefox (security settings I'm guessing?) https://jsfiddle.net/astombaugh/kf2vgq0p/678/
Bonus crude illustration just in case my explanation isn't sufficient:
I managed to come up with a solution by using the onsubmit event in JS. Since my form's validation is powered by HTML5 I needed some way of performing both the actions I desired in my original post but do so on a valid form submission and not just by clicking the submit button.
So, I removed the :target: selectors from my CSS and changed the classes to contactFormModalVisible and formPostModalVisible, and used javascript's classList to add and remove those classes as needed. Then I built an onsubmit event that only fires on a valid form submission from the HTML structure. It seems to work but I'll have to check it once I've gotten to the part where I'm actually sending information. If there's anything about this answer that could be improved please feel free to share.
let foodHeaderText = document.getElementById('foodHeaderText');
let contactForm = document.getElementById('contactForm');
let postForm = document.getElementById('formPost')
const orderBtn = document.getElementsByClassName('orderBtn');
const closeBtn = document.getElementsByClassName('closeBtn');
const submitBtn = document.getElementsByClassName('submitBtn');
for (let order = 0; order < orderBtn.length; order++) {
orderBtn[order].addEventListener('click', function(event) {
foodHeaderText.innerHTML = event.target.attributes['value']['value'];
contactForm.classList.add('contactFormModalVisible');
})
}
for (let close = 0; close < closeBtn.length; close++) {
closeBtn[close].addEventListener('click', function(event) {
foodHeaderText.innerHTML = 'Food';
contactForm.classList.remove('contactFormModalVisible');
postForm.classList.remove('formPostModalVisible');
contactFormInput.reset();
})
}
for (let submit = 0; submit < submitBtn.length; submit++) {
submitBtn[submit].addEventListener('click', function(event) {
contactForm.onsubmit = (e) => {
contactForm.classList.remove('contactFormModalVisible');
postForm.classList.add('formPostModalVisible');
e.preventDefault();
}
})
}
*,
*::before,
*::after {
box-sizing: border-box !important;
}
html {
font-size: 100% !important;
}
.foodHeader {
display: block;
font-family: Univers, Helvetica Neue, Helvetica, Arial;
font-weight: 700;
text-align: center;
color: black;
font-size: 3rem;
margin: 0 auto;
}
.btnContainer {
display: flex;
flex-direction: row;
}
.orderBtn {
display: block;
font-family: Univers, Helvetica Neue, Helvetica, Arial;
font-weight: 700;
text-align: center;
color: white;
width: 200px;
height: 50px;
margin: 0 auto;
background-color: red;
font-size: 0.8rem;
padding: 10px 10px;
line-height: 2rem;
text-decoration: none !important;
outline: 1px solid black;
}
.closeBtnContainer {
display: block;
margin: 20px auto;
text-align: center;
}
.contactFormModal {
visibility: hidden;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
display: flex;
align-items: center;
justify-content: center;
z-index: 2;
height: auto;
width: auto;
margin: 0 auto;
overflow: visible;
transform: translateY(calc(-50% - 50%));
transition: all 0.6s ease-out;
}
.contactFormModalVisible {
visibility: visible;
z-index: 2;
transform: translateY(calc(50% - 50%));
transition: transform 0.6s ease-out;
}
.formWrapper {
position: relative;
display: block;
background-color: #FAFAFA;
outline: 1px solid black;
margin: 0 auto;
max-width: 520px;
width: auto;
height: auto;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.6);
}
.closeBtn {
display: inline-block;
position: absolute;
right: 1rem;
top: 0.95rem;
width: auto;
height: auto;
user-select: none;
cursor: pointer;
margin: 0 auto;
}
.fa-window-close {
color: #646464;
transition: color 0.2s linear;
}
.fa-window-close:hover,
.fa-window-close:focus {
color: black;
transition: color 0.2s linear;
}
.orderFormHeader {
font-family: Univers, Helvetica Neue, Helvetica, Arial;
display: block;
font-weight: bold;
text-align: center;
color: black;
font-size: clamp(2.2em, 3vw, 2.2em);
margin: 0rem auto;
padding: 0.7rem 0rem 0rem 0rem;
line-height: 1.3em;
letter-spacing: -0.02em;
}
.orderFormLineBreaker {
margin: 0em auto 0.5em auto;
display: block;
border: none;
color: white;
height: 1px;
background: black;
background: -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 190, from(#000), to(#FAFAFA));
}
.orderFormContainer {
width: 520px;
height: auto;
display: block;
position: relative;
margin: 0 auto;
background-color: transparent;
}
.footerContainer {
display: flex;
flex-direction: row;
align-items: center;
margin: 0.5rem auto;
}
.submitBtnNoSelect {
user-select: none;
}
.submitBtn {
font-family: Univers, Helvetica Neue, Helvetica, Arial;
display: inline-block;
font-weight: 700;
width: 7rem;
height: auto;
color: white;
background-color: #CC1818;
padding: 0.2rem 0rem 0.1rem 0.5rem;
margin: 0rem 1rem 0rem auto;
text-align: left;
text-decoration: none;
font-size: 1.5em;
word-spacing: normal;
cursor: pointer;
border: 1px solid black;
transition: all 0.3s ease-in-out;
}
.contactFormContainer {
display: flex;
flex-direction: column;
flex-wrap: nowrap;
}
.orderPageRow {
display: flex;
flex-direction: row;
flex-wrap: wrap;
width: 100%;
margin: 0 auto;
padding: 0.5rem 1rem 0rem 1rem;
}
.orderPageRow:first-child {
padding-top: 1rem;
}
.orderPageColumn {
display: flex;
flex-direction: column;
flex-basis: 100%;
flex: 1;
margin: 0 auto;
text-align: left;
}
.contactFieldNames {
font-family: Univers, Helvetica Neue, Helvetica, Arial;
display: inline-block;
font-weight: 700;
color: #646464;
background-color: transparent;
padding: 0rem 0rem 0rem 0rem;
margin: 0rem auto;
text-align: left;
text-decoration: none;
font-size: 1rem;
word-spacing: normal;
}
.formInput {
height: 100%;
width: 246px;
padding: 10px;
font-family: Univers, Helvetica Neue, Helvetica, Arial;
font-weight: 700;
font-size: 1rem;
}
.requiredAsterisk {
font-family: Univers, Helvetica Neue, Helvetica, Arial;
display: inline-block;
font-weight: 700;
font-size: 1em;
}
.disclosureText {
font-family: Univers, Helvetica Neue, Helvetica, Arial;
display: inline-block;
font-weight: 400;
line-height: 1.2em;
font-size: 0.7em;
text-align: justify;
text-justify: inter-word;
color: #646464;
margin: 0rem 1rem 0.85rem 1rem;
}
.commentsInput {
display: block;
font-family: Univers, Helvetica Neue, Helvetica, Arial;
font-weight: 700;
background-color: white;
font-size: 1rem;
resize: vertical;
overflow: auto;
overflow-wrap: break-word;
min-height: 82px;
width: 246px;
line-height: 20px;
padding: 10px;
border: 1px solid #767676;
border-radius: 2px;
}
/* begin form post modal */
.formPostContainer {
width: 520px;
height: auto;
display: block;
position: relative;
margin: 0 auto;
background-color: transparent;
}
.formPostModal {
visibility: hidden;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
display: flex;
align-items: center;
justify-content: center;
z-index: 2;
height: auto;
width: auto;
margin: 0 auto;
overflow: visible;
transform: translateX(calc(-50% - 50%));
transition: all 0.6s ease-out;
}
.formPostModalVisible {
visibility: visible;
z-index: 2;
transform: translateX(calc(50% - 50%));
transition: transform 0.6s ease-out;
}
.formPostWrapper {
position: relative;
display: block;
background-color: #FAFAFA;
outline: 1px solid black;
margin: 0 auto;
max-width: 520px;
width: auto;
height: auto;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.6);
}
.formPostConfirmationText {
position: relative;
display: block;
font-family: Oswald, Univers, Helvetica Neue, Helvetica, Arial;
font-weight: 700;
line-height: 1.2em;
font-size: 1.6em;
text-align: justify;
text-justify: inter-word;
color: #646464;
margin: 0rem 1rem;
}
.homeBtnNoSelect {
user-select: none;
}
.homeBtn {
font-family: Univers, Helvetica Neue, Helvetica, Arial;
display: inline-block;
font-weight: 700;
width: 35%;
height: auto;
color: white;
background-color: #CC1818;
padding: 0.2rem 0.5rem 0.1rem 0rem;
margin: 0.5rem auto 0rem auto;
text-align: center;
text-decoration: none;
font-size: 1.5em;
word-spacing: normal;
cursor: pointer;
border: 1px solid black;
transition: all 0.3s ease-in-out;
}
.formPostFooter {
display: flex;
flex-direction: column;
align-items: center;
margin: 0.5rem auto;
}
/* end form post modal */
<body>
<meta name="viewport" content="width=device-width, initial-scale=1" charset="UTF-8">
<link rel=" stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" integrity="sha512-1ycn6IcaQQ40/MKBW2W4Rhis/DbILU74C1vSrLJxCq57o941Ym01SwNsOMqvEBFlcgUa6xLiPY/NS5R+E6ztJQ==" crossorigin="anonymous" referrerpolicy="no-referrer">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="foodHeader">Order Your Food</div>
<div class="btnContainer">
<a class="orderBtn" href="#contactForm" name="foodItem" value="Cheeseburger">Order Your Cheeseburger</a>
<a class="orderBtn" href="#contactForm" name="foodItem" value="Salad" style="background-color: green">Order Your Salad</a>
<a class="orderBtn" href="#contactForm" name="foodItem" value="Sub" style="background-color: blue">Order Your Sub</a>
</div>
<a class="testBtn" href="#contactForm">
Sign Up
</a>
<a class="formSubmitPostTest" href="#formPost">
Post Form
</a>
<!-- contact form -->
<div class="contactFormModal" id="contactForm">
<form class="formWrapper" action="mailto:test#testingandrewsforms.com" method="post" enctype="text/plain" id="contactFormInput">
<a class="closeBtn" id="closeFormButton" href="#"><i class="fa fa-window-close"></i></a>
<div class="orderFormHeader">Order Your <div id="foodHeaderText">Food</div>
</div>
<div class="orderFormLineBreaker"></div>
<div class="orderFormContainer">
<div class="contactFormContainer">
<div class="orderPageRow">
<div class="orderPageColumn">
<label>
<span class="contactFieldNames">
First Name
<div class="requiredAsterisk">*</div>
</span>
</label>
</div>
<div class="orderPageColumn">
<input id="firstName" type="text" maxlength="20" minlength="2" class="formInput" required>
</div>
</div>
<div class="orderPageRow">
<div class="orderPageColumn">
<label>
<span class="contactFieldNames">
Last Name
<div class="requiredAsterisk">*</div>
</span>
</label>
</div>
<div class="orderPageColumn">
<input id="lastName" type="text" maxlength="20" minlength="2" class="formInput" required>
</div>
</div>
</div>
<div class="footerContainer">
<div id="burtonLogoOrderForm"></div>
<button class="submitBtn submitBtnNoSelect" id="submitFormBtn" type="submit" name="submit">Submit
</button>
</div>
<p class="disclosureText">Bottom text
</p>
</div>
</form>
</div>
<div class="formPostModal" id="formPost">
<div class="formPostWrapper">
<a class="closeBtn" id="closeFormButton" href="#"><i class="fa fa-window-close"></i></a>
<div class="orderFormHeader">Thank You!</div>
<div class="orderFormLineBreaker"></div>
<div class="formPostContainer">
<p class="formPostConfirmationText">We've received your request and will be in
touch soon!
</p>
<div class="formPostFooter">
<div class="homeBtn homeBtnNoSelect">
Return Home
</div>
</div>
</div>
</div>
</div>
</body>
I'm making some accordion FAQ questions. When I add padding around the answer portion, my accordion won't close all the way. When I remove the padding, the accordion works fine. The problem is that I want the padding.
As stated before, my accordion works perfectly fine when padding is removed. When the padding is added back, the collapsed answer still shows the first few lines of text in the answer.
(The accordion in question is the last entry on the page, headed with "0002.")
body {
font-family: 'work sans', Arial, sans-serif;
font-size: 14px;
color: #999;
margin: 0px;
padding: 0px;
background-color: #010101;
background: url(https://imgur.com/YRl8KNP.png) fixed center;
background-size: cover;
text-align: left;
}
::-webkit-scrollbar {
width: 3px;
height: 3px;
}
::-webkit-scrollbar-track {
background-color: #000;
}
::-webkit-scrollbar-thumb {
background-color: #010101;
}
a:link,
a:visited,
a:active {
text-decoration: none;
color: #999;
}
#header {
padding: 160px;
}
.h_title {
font: 150px 'work sans';
color: #fff;
margin-left: 45px;
text-transform: uppercase;
}
.h_menu {
border-top: 1px solid #999;
width: 1100px;
margin: 0 auto;
padding: 20px 0px;
margin-bottom: 175px;
}
.h_top {
text-align: right;
font: 12px 'work sans';
color: #fff;
text-transform: uppercase;
letter-spacing: 4px;
font-weight: 900;
}
.h_top::before {
content: '////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////';
font: 11px 'arial';
font-weight: 400;
display: block;
color: #ff00ff;
margin-bottom: 20px;
letter-spacing: 4px;
}
.h_tabs input {
display: none;
}
.h_tabs {
position: relative;
overflow: hidden;
height: 230px;
margin-top: 30px;
}
.h_tabs label {
position: absolute;
right: 0px;
top: 20px;
font: 9px 'work sans';
letter-spacing: 5px;
color: #fff;
cursor: crosshair;
}
.h_tabs label:nth-of-type(2) {
top: 90px;
}
.h_tabs label:nth-of-type(3) {
top: 160px;
}
.h_tabs label b {
color: #ff00ff;
font-weight: 700;
}
.h_tabs label span {
opacity: 0;
transition: 0.6s;
}
.h_tabs label:after {
content: '001';
display: inline-block;
overflow: hidden;
width: 40px;
text-align: right;
font-eight: 100;
color: #fff;
transition: 0.6s;
font-weight: bold;
}
.h_tabs label:nth-of-type(2):after {
content: '002';
}
.h_tabs label:nth-of-type(3):after {
content: '003';
}
.h_tabs input:checked+label span {
opacity: 1;
transition: 0.6s;
}
.h_tabs input:checked+label::after {
width: 0px;
transition: 0.6s;
}
.h_tab1,
.h_tab2 {
width: 700px;
position: absolute;
left: 50px;
top: 50px;
opacity: 0;
}
.h_blurb {
font: 14px 'work sans';
color: #ccc;
letter-spacing: 1px;
}
.h_cont {
background: #171717;
padding: 20px;
margin-top: 25px;
overflow: hidden;
display: inline-block;
}
.h_nav a {
display: inline-block;
position: relative;
width: 180px;
margin: 0px 35px 15px 0px;
border-bottom: 1px solid #333;
padding: 6px;
font: 12px 'share tech mono';
text-transform: uppercase;
letter-spacing: 1px;
color: #aaa;
}
.h_nav a::after {
content: '';
width: 15px;
height: 2px;
position: absolute;
left: 0;
bottom: -1px;
background: #ff00ff;
transition: 0.5s;
}
.h_nav a:nth-of-type(2n):after {
background: #ff00ff;
}
.h_nav a:nth-of-type(3n):after {
background: #ff00ff;
}
.h_nav a:hover:after {
width: 180px;
transition: 0.5s;
}
#htab1:checked~.h_tab1,
#htab2:checked~.h_tab2 {
opacity: 1;
z-index: 2;
}
#lean_overlay {
position: fixed;
z-index: 99;
top: 0px;
left: 0px;
height: 100%;
width: 100%;
background: url(https://i.imgur.com/zdXP0Uo.jpg) fixed center;
background-size: cover;
display: none;
}
#Pages #wrapper {
background: transparent;
}
#page_container {
width: 1100px;
overflow: hidden;
padding: 15px 0px;
margin: 15px 0px;
}
.page_menu {
font: 12px 'share tech mono';
width: 220px;
margin-right: 50px;
margin-left: 12px;
float: left;
}
.page_menu a:active {
color: #ff00ff;
}
.page_menu h1 {
font: 17px 'work sans';
font-weight: 700;
text-transform: lowercase;
color: #fff;
margin: 30px 0px 10px 0px;
}
.page_menu h1:before {
content: '/ ';
font-weight: 300;
margin-right: 5px;
color: #ccc;
}
.page_content {
background: #171717;
width: 705px;
float: left;
outline: 1px solid rgba(255, 255, 255, 0.2);
outline-offset: 10px;
padding: 50px;
text-align: justify;
line-height: 150%;
}
.page_content h1 {
font: 50px 'work sans';
text-transform: uppercase;
font-weight: 300;
color: #fff;
margin: 0px;
overflow: hidden;
text-align: left;
display: block;
letter-spacing: 1px;
}
.page_content h2 {
font: 15px 'share tech mono';
text-transform: lowercase;
letter-spacing: 1px;
margin: 10px 0px;
color: #ff00ff;
}
.page_text {
padding: 20px 50px;
}
.page_text u {
color: #fff;
text-transform: uppercase;
font-weight: 700;
letter-spacing: 1px;
text-decoration: none;
font-size: 12px;
}
.page_em {
margin: 30px;
font: 10px 'share tech mono';
line-height: 17px;
border: 1px solid #333;
padding: 30px;
}
.page_em u {
color: #ff00ff;
font-style: normal;
font-size: 10px;
letter-spacing: 0px;
line-height: 17px;
text-transform: uppercase;
text-decoration: none;
font-weight: 700;
}
.page_menu ol {
counter-reset: item;
margin: 0px;
padding-left: 10px;
}
.page_menu li ol {
padding-left: 15px;
}
.page_menu b {
color: #ff00ff;
font-weight: bold;
}
.page_menu ol li {
display: block;
}
.page_menu li:before {
content: counters(item, ".") ". ";
counter-increment: item;
font-size: 9px;
line-height: 25px;
color: #ff00ff;
}
.sub_canons li {
border-top: 1px solid #333;
border-bottom: 1px solid #333;
font: 7px 'work sans';
text-transform: uppercase;
letter-spacing: 1px;
padding: 20px 0px;
margin-bottom: 10px;
}
.sub_canons {
list-style-type: none;
margin: 30px 0px;
padding-left: 50px;
}
.sub_canons li b {
display: block;
font: 10px 'share tech mono';
}
.page_content h3 {
font: 14px 'share tech mono';
text-align: right;
text-transform: lowercase;
letter-spacing: 1px;
margin: 20px 0px;
color: #fff;
counter-increment: faqcounter;
}
.page_content h3::before {
content: '00' counter(faqcounter, decimal-leading-zero);
margin-right: 12px;
color: #ff00ff;
}
.page_content h4 {
font: 13px 'share tech mono';
text-transform: lowercase;
letter-spacing: 1px;
margin: 20px 0px;
color: #fff;
counter-increment: faqcounter;
}
.page_content h4::before {
content: '00' counter(faqcounter, decimal-leading-zero);
margin-right: 10px;
color: #ff1053;
}
.page_content h5 {
font: 13px 'share tech mono';
text-transform: lowercase;
letter-spacing: 1px;
margin: 20px 0px;
color: #fff;
counter-increment: faqcounter;
}
.page_content h5::before {
content: '00' counter(faqcounter, decimal-leading-zero);
margin-right: 10px;
color: #4592f7;
}
.page_content h6 {
font: 13px 'share tech mono';
text-transform: lowercase;
letter-spacing: 1px;
margin: 20px 0px;
color: #fff;
counter-increment: faqcounter;
}
.page_content h6::before {
content: '00' counter(faqcounter, decimal-leading-zero);
margin-right: 10px;
color: #ff5f32;
}
/* Tagging */
a.user-tagged.mgroup-4 {
color: #744dba;
}
a.user-tagged.mgroup-8 {
color: #ff1053;
}
a.user-tagged.mgroup-6 {
color: #4592f7;
}
a.user-tagged.mgroup-7 {
color: #ff5f32;
}
.iconpad {
padding: 10px;
border: 1px solid #222;
margin-right: 10px;
float: left;
margin-top: 5px;
}
.padex {
padding: 10px;
text-align: justify;
}
::-moz-selection {
color: #ff00ff;
}
::selection {
color: #ff00ff;
}
faqentry {
margin: 0px 20px 5px 20px;
display: block;
}
faqentry ol li {
margin: 10px 15px 10px 10px;
padding-left: 15px;
font-size: 9px;
color: #d8fe56;
}
div.toggle {
margin: 10px 30px 20px 30px;
padding: 40px;
line-height: 170%!important;
background: rgba(0, 0, 0, 0.3);
display: block;
}
<!DOCTYPE html>
<html>
<head>
<style>
.accordion {
font: 14px 'share tech mono';
text-align: right;
text-transform: lowercase;
letter-spacing: 1px;
margin: 20px 0px;
color: #fff;
background: none;
border: none;
transition: 0.4s;
}
div.panel {
margin: 10px 30px 20px 30px;
padding: 40px;
line-height: 170%;
background: rgba(0, 0, 0, 0.3);
display: block;
max-height: 0;
overflow: hidden;
transition: 0.2s ease-out;
}
</style>
<link rel="shortcut icon" href="HERE">
<link href="https://fonts.googleapis.com/css?family=Work+Sans:100,400,700,900|Share+Tech+Mono" rel="stylesheet">
<title>STICTION</title>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
<LINK REL=StyleSheet HREF="STICTION.css" TYPE="text/css">
</head>
<div id="header">
<div class="h_title">stiction</div>
<div class="h_menu">
<div class="h_top"></div>
<div class="h_tabs">
<input id="htab1" type="radio" name="htabs" checked>
<label for="htab1"><span>CANDY TEETH, NEON IDIOTS.</span> <b>/</b></label>
<input id="htab2" type="radio" name="htabs">
<label for="htab2"><span>OTHER LINKS</span> <b>/</b></label>
<div class="h_tab1">
<div class="h_blurb"><i>Welcome to the new world; myth meets the future. Where do you fit in?</i><br><br>
<span style="text-transform: uppercase; font-family: share tech mono; font-size: 11px;">literate supernatural and cyberpunk group roleplay set in City 0215 during the year 2447.</span>
</div>
</div>
<div class="h_tab2">
<div class="h_nav">
DISCORD
DIRECTORY
PLAYLIST
</div>
</div>
</div>
</div>
<div id="page_container">
<div class="page_menu">
<ol>
<li>INDEX</li>
</ol>
<h1>ESSENTIAL READS</h1>
<ol>
<li>QUICK-START GUIDE</li>
<span style="color: #ff00ff; font-weight: bold;">RULES</span>
<li>HISTORY</li>
<li>SETTING</li>
<li>SPECIES</li>
<ol>
<li>LIVING</li>
<li>DECEASED</li>
<li>PRUGATORIC</li>
</ol>
</ol>
<h1>IN-DEPTH CONTENT</h1>
<ol>
<li>FAQ</li>
<li>SUBPLOTS</li>
<ol>
<li>SUBPLOT 001</li>
<li>SUBPLOT 002</li>
<li>SUBPLOT 003</li>
</ol>
<li>OFFICIAL SERVER FACTIONS</li>
<li>MEMBER-CREATED FACTIONS</li>
</ol>
</div>
<div class="page_content">
<div class="page_text" id="top">
<h1>lore questions</h1>
<div class="page_em"><u>A NOTE</u> This world- the world of <u style="color: #4fecc8; text-transform: uppercase; font-weight: 700; letter-spacing: 1px; font-size: 7px; font-family: 'work sans', Arial, sans-serif;">STICTION</u>- isn't just the project and product of
the staff team. We want you to feel that you can contribute to this world! To that end, these are all questions that guests and members have asked in our Discord. Questions are either answered according to existing lore, or (in cases where the
staff team hasn't thought of a situation or scenario) are talked out with members to come to a satisfying answer. This page is updated regularly, so make sure you keep an eye on it!
<p>
It's probably easiest to explore this page using the <b>CRTL+F</b> function, especially if you have specific questions!</div>
<h2>quick links</h2>
<faqentry id="quick links">
<ol>
<li><u>world-building</u></li>
<li><u>subplots</u></li>
<ol>
<li><u>crossed wires subplot</u></li>
<li><u>live for the applause subplot</u></li>
<li><u>blood and chocolate subplot</u></li>
</ol>
<li><u>species-specific</u>
<ol>
<li><u>general abilities</u></li>
<li><u>witches</u></li>
<li><u>shifters</u></li>
<li><u>vampires</u></li>
<li><u>reapers</u></li>
<li><u>ghosts</u></li>
<li><u>phoenixes</u></li>
<li><u>familiars</u></li>
<li><u>androids</u></li>
</ol>
</ol>
</faqentry>
<a name="section"> </a>
<Br><br>
<h2>world-building</h2>
<h3>context clues</h3>
Before you get started exploring this new world, it’s helpful to keep in mind a few things for context! (It might even help you answer your own questions, who knows?) The first bit of info you’ll need is that electricity and all other forms of energy
are obsolete; instead, the world runs on magic energy. That leads into point two, which is that supernatural, magic creatures are no longer monsters under the bed, or creatures in the shadow; they live open, public lives.<br><br> Since
this is a cyberpunk site, it stands to reason that technology is wildly more advanced than what we have now. It’s no so advanced that interstellar travel exists, but it’s so much farther ahead that paper (and privacy, in a lot of ways) is a thing
of the past. Every person on the planet is in some way connected to the Global Communications Lattice (or GCL) for short, and everything on the planet runs through it. As far as specific pieces of technology go, that’s largely up to you, your
ideas, and genre standards.<br>
<Br> It never hurts to ask an admin or run an idea by us before executing an idea, though!
<button class="accordion"><h3>What's the primary language spoken in City 0023? What about the rest of the world?</h3></button>
<div class="panel">English has become the primary language of most of the world, but thanks to the ease of information access, every language (even dead languages) can be learned now! Linguistic diversity not only still exists in this world, but is flourishing;
most people can claim some form of bilingualism. English, French, and Chinese are the top three languages spoken in City 0023.</div>
<br>
<Br>
<u>Back to Top</u>
</div>
</div>
<script>
var acc = document.getElementsByClassName("accordion");
var i;
for (i = 0; i < acc.length; i++) {
acc[i].addEventListener("click", function() {
this.classList.toggle("active");
var panel = this.nextElementSibling;
if (panel.style.maxHeight) {
panel.style.maxHeight = null;
} else {
panel.style.maxHeight = panel.scrollHeight + "px";
}
});
}
</script>
To answer your original question, as you discovered, as long as that .panel div has top and bottom padding, it will have an intrinsic minimum height which is why it wasn't closing all the way.
The easiest way I can think of to achieve the desired result without changing too much of your existing code is to nest the text inside a div that is a child of .panel and move the padding property (and optionally the line-height property as well) to the nested element (which I called .panel__content -- you can call it whatever you want).
div.panel {
margin:10px 30px 20px 30px;
background:rgba(0,0,0,0.3);
display:block;
max-height: 0;
overflow: hidden;
transition: 0.2s ease-out;
}
.panel__content {
padding:40px;
line-height: 170%;
}
<div class="panel">
<div class="panel__content">English has become the primary language of most of the world, but thanks to the ease of information access, every language (even dead languages) can be learned now! Linguistic diversity not only still exists in this world, but is flourishing; most people can claim some form of bilingualism. English, French, and Chinese are the top three languages spoken in City 0023.</div>
</div>
Working JSFidddle example
Some side notes:
I would also highly recommend that you validate your HTML and CSS, as you have a number of validation errors currently. Best way to do that is to paste your code into W3C's online validators:
HTML Validator:
https://validator.w3.org/#validate_by_input
CSS Validator:
https://jigsaw.w3.org/css-validator/#validate_by_input
You might not need to add div to your .panel selector to achieve the same result. All things being equal, it's a best practice to have selectors be as short as possible.
You might not need to set .panel to display:block; as div's have this property value by default.
Try adding
box-sizing: border-box;
On your panel. This should make it so the padding is a part of height. You may have to adjust other values if that shifts things slightly.
Otherwise, you could set padding top and bottom to 0 when closed and transition those values as well, when collapsing.
max-height property overrides the height property but the padding top and bottom value will added to the height when css is getting compiled and value of height well be 80px
so set the padding to
div.panel { padding: 0 40px }
and change your script to
var acc = document.getElementsByClassName("accordion");
var i;
for (i = 0; i < acc.length; i++) {
acc[i].addEventListener("click", function() {
this.classList.toggle("active");
var panel = this.nextElementSibling;
if (panel.style.maxHeight){
panel.style.maxHeight = null;
panel.style.paddingTop = 0;
panel.style.paddingBottom = 0
} else {
panel.style.maxHeight = panel.scrollHeight + "px";
panel.style.paddingTop = null;
panel.style.paddingBottom = null
}
})
}
I need my div to shift to and fro when clicked, like only one div should show on load and the other should not be visible and when clicked should come into view and vice versa , any kind of transition, i dont wish to use slick carousel, don't know where i went wrong cant figure out why even the inline block doesn't work.
function step(n) {
if (n == 1) {
$(".agever").animate({
"left": "-300px"
}, "slow");
} else if (n == 2) {
$(".contever").animate({
"right": "300px"
}, "slow");
}
}
.light {
background: url(images/background.jpg) no-repeat;
background-size: 100%;
}
img#bg {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
#import url(http://fonts.googleapis.com/css?family=Raleway);
body {
margin: 0px;
}
.footer {
float: left;
background-color: #0f0f0e;
color: #fff;
text-align: center;
padding: 20px 0;
bottom: 0px;
top: 125px;
width: 100%;
position: relative;
opacity: .7;
bottom: 0;
}
.agever {
position: relative;
text-align: center;
background-color: rgba(252, 251, 227, 0.1);
width: 800px;
height: 325px;
border: 2px solid #ffffff;
margin-left: 100px;
margin-bottom: 250px;
top: 150px;
}
.agetitle {
color: #a88d2e;
color: rgb(168, 141, 46);
background-color: #000000;
background-color: rgba(0, 0, 0, 0);
font-family: Montserrat;
font-size: 18px;
line-height: 28.8px;
vertical-align: baseline;
letter-spacing: normal;
word-spacing: 0px;
font-weight: bolder;
font-style: normal;
font-variant: normal;
text-transform: none;
text-decoration: none;
text-align: center;
text-indent: 0px;
padding-top: 40px;
}
.policy,
.policy a {
text-decoration: none;
color: #9b9b9b;
color: rgb(155, 155, 155);
background-color: #000000;
background-color: rgba(0, 0, 0, 0);
font-family (stack): Montserrat;
font-size: 13px;
line-height: 28.8px;
vertical-align: baseline;
letter-spacing: normal;
word-spacing: 0px;
font-weight: bolder;
font-style: normal;
font-variant: normal;
text-transform: none;
text-decoration: none;
text-align: center;
text-indent: 0px;
}
.yes a {
text-decoration: none;
font-family: Roboto, sans-serif;
font-size: 14px;
line-height: 21px;
vertical-align: baseline;
letter-spacing: 0.28px;
word-spacing: 0px;
font-style: normal;
font-variant: normal;
text-transform: uppercase;
text-align: center;
text-indent: 0px;
}
.no a {
text-decoration: none;
font-family: Roboto, sans-serif;
font-size: 14px;
line-height: 21px;
vertical-align: baseline;
letter-spacing: 0.28px;
word-spacing: 0px;
font-style: normal;
font-variant: normal;
text-transform: uppercase;
text-align: center;
text-indent: 0px;
}
.button {
background-color: #4CAF50;
border: none;
color: white;
padding: 10px 30px;
text-align: center;
font-weight: bolder;
display: inline-block;
font-size: 16px;
-webkit-transition-duration: 0.4s;
transition-duration: 0.4s;
cursor: pointer;
}
.button1 {
background-color: #4CAF50;
border: none;
color: white;
padding: 10px 15px;
text-align: center;
font-weight: bolder;
display: inline-block;
font-size: 16px;
-webkit-transition-duration: 0.4s;
transition-duration: 0.4s;
cursor: pointer;
}
.button5 {
background-color: #2b2b2b;
color: #ffffff;
border: 2px solid #555555;
}
.button5:hover {
background-color: #555555;
color: white;
}
.contever {
position: relative;
background-color: rgba(252, 251, 227, 0.1);
width: 950px;
height: 625px;
border: 2px solid #ffffff;
margin-left: 25px;
margin-bottom: 250px;
top: 50px;
overflow-y: scroll;
}
::-webkit-scrollbar {
width: 18px;
}
::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(255, 255, 255, 0.3);
border-radius: 10px;
}
::-webkit-scrollbar-thumb {
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(255, 255, 255, 0.5);
}
.tandpcontent {
color: #f6f5d8;
font-family: Montserrat font-size: 16px text-align: left;
padding-left: 15px;
padding-right: 15px;
line-height: 19.8px
}
.tandptitle {
color: #a88d2e;
color: rgb(168, 141, 46);
background-color: #000000;
background-color: rgba(0, 0, 0, 0);
font-family: Montserrat;
font-size: 30px;
line-height: 28.8px;
vertical-align: baseline;
letter-spacing: normal;
font-weight: bolder;
text-decoration: none;
text-align: center;
text-indent: 0px;
padding-top: 40px;
text-align: center;
}
.close-icon {
position: relative;
top: 30px;
left: 955px;
display: block;
box-sizing: border-box;
width: 40px;
height: 40px;
border-width: 6px;
border-style: solid;
border-color: gray;
border-radius: 100%;
background: -webkit-linear-gradient(-45deg, transparent 0%, transparent 46%, white 46%, white 56%, transparent 56%, transparent 100%), -webkit-linear-gradient(45deg, transparent 0%, transparent 46%, white 46%, white 56%, transparent 56%, transparent 100%);
background-color: gray;
box-shadow: 0px 0px 5px 2px rgba(0, 0, 0, 0.5);
transition: all 0.3s ease;
}
#tandpchange {
cursor: pointer;
}
#containblockd {
display: inline-block;
overflow: hidden;
}
#tandpmaster {
display: hidden;
overflow: hidden;
float: left;
}
agemaster {
display: inline-block;
overflow: hidden;
float: left;
}
<div id="containblockd">
<div id="agemaster">
<div class="agever">
<p class="agetitle">
YOU MUST BE OF LEGAL DRINKING AGE IN THE COUNTRY IN WHICH YOU ARE ACCESSING THIS SITE
</p>
<p class="yes">
<a href="main.html">
<button class="button button5">YES I AM OF LEGAL DRINKING AGE</button>
</a>
</p>
<p class="no">
<a href="https://www.google.co.in/search?site=&source=hp&q=kingspirits.net&oq=kingspirits.net&gs_l=hp.3...518.518.0.1500.2.2.0.0.0.0.155.262.0j2.2.0....0...1c.1.64.hp..0.0.0.0.ZgyZZmdP464">
<button class="button1 button5">NO,I AM NOT OF LEGAL DRINKING AGE</button>
</a>
</p>
<p class="policy">
By entering this site you agree to our <a title="Law" onclick=" step(1)" id="tandpchange">Terms & Privacy Policy.</a>
</p>
</div>
</div>
<div id="tandpmaster">
<div class="contever">
<p class="tandptitle">
TERMS & PRIVACY POLICY
</p>
<p class="tandpcontent">
some content.....
</p>
</div>
</div>
Animate by itself doesn't show or hide elements.
So you should add the hiding and showing logic in the complete function, as follows, by example (or using animation parameters in show and hide)
function step(n) {
if (n == 1) {
$(".agever").animate({
"left": "-300px"
}, "slow", function(){
$(".agever").hide();
$(".contever").show();
});
} else if (n == 2) {
$(".contever").animate({
"right": "300px"
}, "slow",function(){
$(".agever").show();
$(".contever").hide();
});
}
}
Moreover you should also handle the positions of your DIVs after they have been shown, hidden and shown again as the DIVs will return in the position reached after each animation.
I have a menu that is set to hide/show divs in the main body of the page. It functions but I need to have preloaded content inside that main body div. I have it now so when you click the menu items it hides the initial content.
I need the home menu item set to show that main div again as well as hide whatever content is currently showing...
// JavaScript Document
$(document).ready(function () {
$('.menu').click(function () {
var $clicked = $(this)
$('.menu').each(function(){
var $menu = $(this);
if (!$menu.is($clicked))
{
$($menu.attr('data-item')).hide();
$('#homecontent').hide();
}
});
$($clicked.attr('data-item')).toggle();
});
$('#home-menu-item').click(function () {
$('homecontent').show();
});
window.onresize = function(){
var img = document.getElementById('fullsize');
img.style.width = "100%";
};
});
body {
background-color: #151515;
background: url('media/Shadexbackground_000000.png') no-repeat;
margin: 0;
padding: 0;
background-size: cover;
}footer {
height: 2vh;
text-align: center;
margin-left: 3vh;
margin-right: 3vh;
opacity: 0.5;
}
header {
height: 11vh;
text-align: center;
margin: 0;
padding-top: 10px;
padding-right: 0px;
padding-bottom: 2px;
}
#wrapper {
color: #FFFFFF;
height: 100vh;
width: 100vw;
}
#bodycontent {
opacity: .4;
height: 75vh;
text-align: center;
background-color: #2A2A2A;
margin-top: 2vh;
margin-bottom: 5vh;
margin-left: 3vh;
margin-right: 3vh;
overflow-y: auto;
}
.logoclass {
width: 100%;
height: 90%;
min-width: 0px;
}
#topmenu {
width: 100%;
height: 10%;
font-size: 2.5vmin;
text-align: center;
word-spacing: 10vw;
}
#logo img {
border-radius: 0;
max-width: 100%;
max-height: 100%;
height: auto;
width: auto;
}
#font-face {
font-family: lesterbold;
src: url(../fonts/lesterbold.woff);
font-size: medium;
}
#font-face {
font-family: vipna;
src: url(../fonts/vipnagorgialla.woff);
}
#topmenu a:link, a:visited {
color: #E7E7E7;
border-radius: 0;
font-family: lesterbold;
/* [disabled]font-size: 14pt; */
text-decoration: none;
font-style: normal;
font-variant: normal;
font-weight: lighter;
text-shadow: 1px 0px 1px rgba(255, 150, 150, 0.82), 0px 0px 1px rgba(150, 255, 150, 0.95), -1px 0px 1px rgba(150, 150, 255, 0.82), 0 0 10px #E7E7E7 , 0 0 15px #E7E7E7;
}
#topmenu a:hover, a:active {
color: #FFFFFF;
border-radius: 0;
font-family: lesterbold;
/* [disabled]font-size: 14pt; */
text-decoration: none;
font-style: normal;
font-variant: normal;
font-weight: lighter;
text-shadow: 0 0 10px #ffffff , 0 0 15px #ffffff , 0 0 20px #ffffff;
}#footerleft {
float: left;
width: 45vw;
text-align: left;
padding-left: 5vm;
}
#footerright {
float: right;
width: 45vw;
text-align: right;
vertical-align: middle;
margin-left: 5vw;
}
#videobox {
text-align: left;
color: #FFFFFF;
font-family: vipna;
font-style: normal;
font-variant: normal;
font-weight: lighter;
font-size: 2.5vmin;
width: 50vw;
max-width: 100%;
margin-left: 25vw;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!--Begin content -->
<div id="wrapper">
<header>
<div align="center" class="logoclass" id="logo"><img src="media/logo.png"/></div>
<div id="topmenu">
Home
Videos
Follow
Contact
</div>
</header>
<article>
<div id="bodycontent">
<!--Contact -->
<div id="menu-contact" style="display: none">Contact</div>
<!--Follow -->
<div id="menu-follow" style="display: none">Follow</div>
<!--Videos -->
<div id="menu-videos" style="display: none"><br />
<div id="videos" style="z-index:1" onClick="document.getElementById('sitemusic').pause();"><br />
<div align="center" id="videobox">Splash
<video style="z-index:-1;" width="400" controls>
<source src="media/videos/splash.mp4" type="video/mp4">
<source src="media/videos/splash.ogg" type="video/ogg">
Your browser does not support HTML5 video.
</video>
</div>
</div>
</div>
<!--Home -->
<div id="homecontent">.dfsg5r4y5g4b</div>
</div>
</article>
I am trying to created three overlap divs that have their z-Index changed dynamically with Javascript. I have the divs coming to the top of the stack when selected, but I can't click the other divs below the top div. Can someone help me out? Below is the Javascript I am using:
<script>
$(document).ready(function() {
$("div#box").click(function() {
$(this).css({'z-index' : '9999'});
} , function() {
$(this).css({'z-index' : '1'});
});
});
</script>
CSS:
#container{
display: block;
position:relative;
margin: 0px;
padding: 0px;
width: 465px;
height: 350px;
}
.redBox {
display: block;
margin: 0px;
padding: 0px;
width: 450px;
border: 1px solid #ED1F24;
z-index: 100;
position: absolute;
top: 120px;
right:0px;
background-color: #FFF;
cursor:pointer;
}
.redBox h1 {
font-family: Arial, Helvetica, sans-serif;
font-size: 18px;
font-weight: bold;
color: #FFF;
background-color: #ED1F24;
display: block;
height: 10px;
margin: 0px;
text-align: left;
padding: 10px 10px 10px 20px;
line-height: 10px;
}
.redBox h2 {
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: normal;
color: #FFF;
background-color: #ED1F24;
display: block;
height:10px;
margin: 0px;
text-align: left;
padding: 10px 10px 10px 20px;
line-height: 10px;
}
.redBox ul {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: normal;
color: #000;
margin: 0px;
height: 150px;
padding: 10px 10px 0px 20px;
}
.redBox p{
margin:0px;
padding:0px;
}
.redBox .boxFooter {
font-family: Arial, Helvetica, sans-serif;
font-size: 9px;
line-height: 1.1em;
color: #000;
padding-top: 10px;
padding-right: 20px;
padding-bottom: 10px;
padding-left: 0px;
margin-top: 0px;
list-style-type: none;
margin-left: 5px;
}
.blueBox .footer {
font-family: Arial, Helvetica, sans-serif;
font-size: 9px;
line-height: 1.1em;
color: #000;
padding-top: 10px;
padding-right: 20px;
padding-bottom: 10px;
padding-left: 0px;
margin-top: 0px;
list-style-type: none;
margin-left: 20px;
}
.blueBox {
display: block;
margin: 0px;
padding: 0px;
width: 430px;
border: 1px solid #2B3087;
z-index: 50;
position: absolute;
top: 90px;
right:0px;
background-color: #FFF;
cursor:pointer;
}
.blueBox h1 {
font-family: Arial, Helvetica, sans-serif;
font-size: 18px;
font-weight: bold;
color: #FFF;
background-color: #2B3087;
display: block;
height: 10px;
margin: 0px;
text-align: left;
padding: 10px 10px 10px 20px;
line-height: 10px;
}
.blueBox h2 {
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: normal;
color: #FFF;
background-color: #2B3087;
display: block;
height:10px;
margin: 0px;
text-align: left;
padding: 10px 10px 10px 20px;
line-height: 10px;
}
.blueBox p {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
line-height: 1.1em;
color: #000;
padding: 0px 0px 0px 20px;
margin: 5px 0px;
}
.blueBox p strong {
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
font-weight:bold;
line-height: 1.1em;
color: #000;
}
.greenBox {
display: block;
margin: 0px;
padding: 0px;
width: 410px;
border: 1px solid #99CA3C;
z-index: 2;
position: absolute;
top: 60px;
right:0px;
background-color: #FFF;
cursor:pointer;
}
.greenBox h1 {
font-family: Arial, Helvetica, sans-serif;
font-size: 20px;
font-weight: bold;
color: #FFF;
background-color: #99CA3C;
display: block;
height: 10px;
margin: 0px;
text-align: left;
padding: 10px 10px 10px 20px;
line-height: 10px;
}
.greenBox h2 {
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: normal;
color: #FFF;
background-color: #99CA3C;
display: block;
height:10px;
margin: 0px;
text-align: left;
padding: 10px 10px 10px 20px;
line-height: 10px;
}
#hero {
display: block;
margin: 0px;
padding: 0px;
height: 315px;
width: 465px;
text-align: center;
}
HTML:
<td width="50%" rowspan="2" valign="top" style="position:relative;">
<div id="hero"><img src="images/image.jpg" alt="" width="300" height="315" border="0" />
</div>
<div id="container">
<div class="redBox" id="box">
<h1>Rewards</h1>
<ul>
<li>Text</li>
<li>Text</li>
<li>Text</li>>
<li>Text</li>
</ul>
<h2>Rewards</h2>
</div>
<div class="blueBox" id="box">
<h1>Service and Security</h1>
<p>text</p>
<p>text</p>
<p>text</p>
<<p>text</p>
<p class="footer">Text</p>
<h2>Service and Security</h2>
</div>
<div class="greenBox" id="box">
<h1>Redeem Rewards</h1>
<ul>
<li>text Here</li>
<li>text Here</li>
<li>text Here</li>
</ul>
<h2>Rewards</h2>
</div>
</div>
</td>
There are several problems with your code. First of all you're targeting an id, which should be unique and not used to identify multiple elements. Your code will only target the first instance of that id. Instead use a class name to target the different divs. Second, click takes either one argument, an event handler, or two, where the first one is event data, and the second the handler. So, your code only executes the second function in there, and only for the first div.
Try this instead:
$(document).ready(function() {
var zIndex = 9999;
$(".box").click(function() {
$(this).css({'z-index': zIndex++ });
});
});
HTML.
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
I created a fiddle with a working solution. If you need to change an element's z-index, you must set it's position attribute to anything other than 'static'. Static is the default, so you can change it to 'absolute' or 'relative'. The browser ignores z-index if you don't do this. Also, when you're trying to change CSS properties via javascript, you can't use 'z-index', javascript uses camelcase for the names.
Here's the link to the fiddle:
http://jsfiddle.net/vKeqD/
And here's the code for posterity:
$(document).ready(function() {
var zIndex = 9999;
$(".box").on('click', function() {
$(this).css({'zIndex' : zIndex++ , 'position': 'absolute'});
});
});
You'll see as well that I changed the event listener to use 'on' instead of 'click'. This is simply because you only add one event listener this way instead of attaching a different listener to every target element. In your case, you only have three targets. But, if you had say 100, you only attach one event listener instead of 100. Hope this helps.