Develop Reference

How to target and display error message with data-error in JavaScript

I'de like to validate a form with data propriety data-error and data-error-visible. I want to display the error message only with JS and don't use anymore HTML codes to do it.
The current code I use is below and I left only the first input :
/******
*
FORM VALIDATION
*
******/
// DOM
const formData = document.querySelectorAll(".formData");
const form = document.getElementById("form");
const firstName = document.getElementById("firstName");
const lastName = document.getElementById("lastName");
const email = document.getElementById("email");
const birthdate = document.getElementById("birthdate");
const quantity = document.getElementById("quantity");
const tournament = document.getElementsByName("location");
const checkbox = document.getElementsByName("checkbox");
// form preventDefault + checkInputs function
form.addEventListener('submit', e => {
e.preventDefault();
});
/***********
*
DATA-ATTRIBUTE
*
************/
// set error message to "true"
const displayErrorMsg = (element, message) => {
const formData = element
formData.setAttribute("data-error", message)
formData.setAttribute("data-error-visible", true)
}
// Function for remove one error msg
const removeErrorMsg = (element) => {
const formData = element
formData.removeAttribute('data-error')
formData.removeAttribute('data-error-visible')
}
/***********
*
* VALIDATION FUNCTION
*
************/
function validate(formData) {
let isFormValid = true;
// Regex
const nameRegex = /[a-zA-Z]+/i;
// First name
if (firstName.value.match(nameRegex) || firstName.value.length < 2) {
isFormValid = false;
displayErrorMsg(firstName);
} else {
removeErrorMsg(firstName);
}
}
:root {
--font-default: "DM Sans", Arial, Helvetica, sans-serif;
--font-slab: var(--font-default);
--modal-duration: 0.8s;
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
/* Landing Page */
body {
margin: 0;
display: flex;
flex-direction: column;
font-family: var(--font-default);
font-size: 18px;
max-width: 1300px;
margin: 0 auto;
}
p {
margin-bottom: 0;
padding: 0.5vw;
}
img {
padding-right: 1rem;
}
.topnav {
overflow: hidden;
margin: 3.5%;
}
.header-logo {
float: left;
}
.main-navbar {
float: right;
}
.topnav a {
float: left;
display: block;
color: #000000;
text-align: center;
padding: 12px 12px;
margin: 5px;
text-decoration: none;
font-size: 20px;
font-family: Roboto, sans-serif;
}
.topnav a:hover {
background-color: #ff0000;
color: #ffffff;
border-radius: 15px;
}
.topnav a.active {
background-color: #ff0000;
color: #ffffff;
border-radius: 15px;
}
.topnav .icon {
display: none;
}
#media screen and (max-width: 768px) {
.topnav a {display: none;}
.topnav a.icon {
float: right;
display: block;
}
}
#media screen and (max-width: 768px) {
.topnav.responsive {position: relative;}
.topnav.responsive .icon {
position: absolute;
right: 0;
top: 0;
}
.topnav.responsive a {
float: none;
display: block;
text-align: left;
}
}
#media screen and (max-width: 540px) {
.topnav a {display: none;}
.topnav a.icon {
float: right;
display: block;
margin-top: -15px;
}
}
main {
font-size: 130%;
font-weight: bolder;
color: black;
padding-top: 0.5vw;
padding-left: 2vw;
padding-right: 2vw;
margin: 1px 20px 15px;
border-radius: 2rem;
text-align: justify;
}
.modal-btn {
font-size: 145%;
background: #fe142f;
display: flex;
margin: auto;
padding: 2em;
color: #fff;
padding: 0.75rem 2.5rem;
border-radius: 1rem;
cursor: pointer;
}
.modal-btn:hover {
background: #3876ac;
}
.footer {
margin: 20px;
padding: 10px;
font-family: var(--font-slab);
}
/* Modal form */
.button {
background: #fe142f;
margin-top: 0.5em;
padding: 1em;
color: #fff;
border-radius: 15px;
cursor: pointer;
font-size: 16px;
}
.button:hover {
background: #3876ac;
}
.smFont {
font-size: 16px;
}
.bground {
display: none;
position: fixed;
z-index: 1;
left: 0;
top: 0;
height: 100%;
width: 100%;
overflow: auto;
background-color: rgba(26, 39, 156, 0.4);
}
.content {
margin: 5% auto;
width: 100%;
max-width: 500px;
animation-name: modalopen;
animation-duration: var(--modal-duration);
background: #232323;
border-radius: 10px;
overflow: hidden;
position: relative;
color: #fff;
padding-top: 10px;
}
.modal-body {
padding: 15px 8%;
margin: 15px auto;
}
label {
font-family: var(--font-default);
font-size: 17px;
font-weight: normal;
display: inline-block;
margin-bottom: 11px;
}
input {
padding: 8px;
border: 0.8px solid #ccc;
outline: none;
}
.text-control {
margin: 0;
padding: 8px;
width: 100%;
border-radius: 8px;
font-size: 20px;
height: 48px;
}
.formData[data-error]::after {
content: attr(data-error);
font-size: 0.4em;
color: #e54858;
display: block;
margin-top: 7px;
margin-bottom: 7px;
text-align: right;
line-height: 0.3;
opacity: 0;
transition: 0.3s;
}
.formData[data-error-visible="true"]::after {
opacity: 1;
}
.formData[data-error-visible="true"] .text-control {
border: 2px solid #e54858;
}
/*
input[data-error]::after {
content: attr(data-error);
font-size: 0.4em;
color: red;
} */
.checkbox-label,
.checkbox2-label {
position: relative;
margin-left: 36px;
font-size: 12px;
font-weight: normal;
}
.checkbox-label .checkbox-icon,
.checkbox2-label .checkbox-icon {
display: block;
width: 20px;
height: 20px;
border: 2px solid #279e7a;
border-radius: 50%;
text-indent: 29px;
white-space: nowrap;
position: absolute;
left: -30px;
top: -1px;
transition: 0.3s;
}
.checkbox-label .checkbox-icon::after,
.checkbox2-label .checkbox-icon::after {
content: "";
width: 13px;
height: 13px;
background-color: #279e7a;
border-radius: 50%;
text-indent: 29px;
white-space: nowrap;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
transition: 0.3s;
opacity: 0;
}
.checkbox-input {
display: none;
}
.checkbox-input:checked + .checkbox-label .checkbox-icon::after,
.checkbox-input:checked + .checkbox2-label .checkbox-icon::after {
opacity: 1;
}
.checkbox-input:checked + .checkbox2-label .checkbox-icon {
background: #279e7a;
}
.checkbox2-label .checkbox-icon {
border-radius: 4px;
border: 0;
background: #c4c4c4;
}
.checkbox2-label .checkbox-icon::after {
width: 7px;
height: 4px;
border-radius: 2px;
background: transparent;
border: 2px solid transparent;
border-bottom-color: #fff;
border-left-color: #fff;
transform: rotate(-55deg);
left: 21%;
top: 19%;
}
.close {
position: absolute;
right: 15px;
top: 15px;
width: 32px;
height: 32px;
opacity: 1;
cursor: pointer;
transform: scale(0.7);
}
.close:before,
.close:after {
position: absolute;
left: 15px;
content: " ";
height: 33px;
width: 3px;
background-color: #fff;
}
.close:before {
transform: rotate(45deg);
}
.close:after {
transform: rotate(-45deg);
}
.btn-submit,
.btn-signup {
background: #fe142f;
display: block;
margin: 0 auto;
border-radius: 7px;
font-size: 1rem;
padding: 12px 82px;
color: #fff;
cursor: pointer;
border: 0;
}
/* custom select styles */
.custom-select {
position: relative;
font-family: Arial;
font-size: 1.1rem;
font-weight: normal;
}
.custom-select select {
display: none;
}
.select-selected {
background-color: #fff;
}
/* Style the arrow inside the select element: */
.select-selected:after {
position: absolute;
content: "";
top: 10px;
right: 13px;
width: 11px;
height: 11px;
border: 3px solid transparent;
border-bottom-color: #f00;
border-left-color: #f00;
transform: rotate(-48deg);
border-radius: 5px 0 5px 0;
}
/* Point the arrow upwards when the select box is open (active): */
.select-selected.select-arrow-active:after {
transform: rotate(135deg);
top: 13px;
}
.select-items div,
.select-selected {
color: #000;
padding: 11px 16px;
border: 1px solid transparent;
border-color: transparent transparent rgba(0, 0, 0, 0.1) transparent;
cursor: pointer;
border-radius: 8px;
height: 48px;
}
/* Style items (options): */
.select-items {
position: absolute;
background-color: #fff;
top: 89%;
left: 0;
right: 0;
z-index: 99;
}
/* Hide the items when the select box is closed: */
.select-hide {
display: none;
}
.select-items div:hover,
.same-as-selected {
background-color: rgba(0, 0, 0, 0.1);
}
/* custom select end */
.text-label {
font-weight: normal;
font-size: 16px;
}
.hero-section {
min-height: 93vh;
border-radius: 10px;
display: grid;
grid-template-columns: repeat(12, 1fr);
overflow: hidden;
box-shadow: 0 2px 7px 2px rgba(0, 0, 0, 0.2);
margin-bottom: 10px;
}
.hero-content {
padding: 51px 67px;
grid-column: span 4;
background: #232323;
color: #fff;
position: relative;
text-align: left;
min-width: 424px;
}
.hero-content::after {
content: "";
width: 100%;
height: 100%;
background: #232323;
position: absolute;
right: -80px;
top: 0;
}
.hero-content > * {
position: relative;
z-index: 1;
}
.hero-headline {
font-size: 6rem;
font-weight: normal;
white-space: nowrap;
}
.hero-text {
width: 146%;
font-weight: normal;
margin-top: 57px;
padding: 0;
}
.btn-signup {
outline: none;
text-transform: capitalize;
font-size: 1.3rem;
padding: 15px 23px;
margin: 0;
margin-top: 59px;
}
.hero-img {
grid-column: span 8;
}
.hero-img img {
width: 100%;
height: 100%;
display: block;
padding: 0;
}
.copyrights {
color: #fe142f;
padding: 0;
font-size: 1rem;
margin: 60px 0 30px;
font-weight: bolder;
}
.hero-section > .btn-signup {
display: none;
}
footer {
padding-left: 2vw;
padding-right: 2vw;
margin: 0 20px;
}
#media screen and (max-width: 800px) {
.hero-section {
display: block;
box-shadow: unset;
}
.hero-content {
background: #fff;
color: #000;
padding: 20px;
}
.hero-content::after {
content: unset;
}
.hero-content .btn-signup {
display: none;
}
.hero-headline {
font-size: 4.5rem;
white-space: normal;
}
.hero-text {
width: unset;
font-size: 1.5rem;
}
.hero-img img {
border-radius: 10px;
margin-top: 40px;
}
.hero-section > .btn-signup {
display: block;
margin: 32px auto 10px;
padding: 12px 35px;
}
.copyrights {
margin-top: 50px;
text-align: center;
}
}
#keyframes modalopen {
from {
opacity: 0;
transform: translateY(-150px);
}
to {
opacity: 1;
}
}
<form
id="form"
name="reserve"
action="index.html"
method="get"
>
<div class="formData">
<label for="firstName">Prénom</label><br>
<input
class="text-control"
type="text"
id="firstName"
name="first"
minlength="2"
required
/><br>
</div>
<input
class="btn-submit"
type="submit"
class="button"
value="C'est parti"
/>
</form>

I need to make this button have delay when i click then to go others pages

when i add its not delay then removes it. and its delay, but what should i do to make this button have href to click and delay then joining other pages (i'm newbie)
conclude that I need when I click and reload 3 seconds to join other pages I do.
I tried many things but it didn't work. I'm very worried about my problem.
Thanks you all.
.button {
position: relative;
padding: 1px 20px;
background-color: #4bb34e;
border: none;
outline: none;
border-radius: 2px;
width: 100px;
cursor: pointer;
line-height: 1.33;
}
.button span {
cursor: pointer;
display: inline-block;
position: relative;
transition: 0.5s;
}
.button span:after {
content: '\00bb';
position: absolute;
opacity: 0;
top: 0;
right: -10px;
transition: 0.5s;
}
.button:hover span {
padding-right: 20px;
}
.button:hover span:after {
opacity: 1;
right: 0;
}
.button:active {
background: #4CAF50;
}
.button__text {
font: bold 16px "Quicksand", san-serif;
color: #ffffff;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
border: 4px solid transparent;
border-radius: 50%;
}
.button--loading .button__text {
visibility: hidden;
opacity: 0;
}
.button--loading::after {
content: "";
position: absolute;
width: 16px;
height: 16px;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
border: 4px solid transparent;
border-top-color: #ffffff;
border-radius: 50%;
animation: button-loading-spinner 1s ease infinite;
}
input,
p {
font: 17px Calibri;
padding: 3px 5px;
}
#keyframes button-loading-spinner {
from {
transform: rotate(0turn);
}
to {
transform: rotate(1turn);
}
}
<button type="button" class="button" onclick="setTimeout(() => this.classList.toggle('button--loading'), 1500)">
<span class="button__text">Submit</span></button>

I use jquery to fix this, try this method:
$('.button').click(function() {
$('.button').addClass("button--loading");
setTimeout(function() {
location.href = 'https://stackoverflow.com/'; // replace your URL
}, 3000);
});
.button {
position: relative;
padding: 1px 20px;
background-color: #4bb34e;
border: none;
outline: none;
border-radius: 2px;
width: 100px;
cursor: pointer;
line-height: 1.33;
}
.button span {
cursor: pointer;
display: inline-block;
position: relative;
transition: 0.5s;
}
.button span:after {
content: '\00bb';
position: absolute;
opacity: 0;
top: 0;
right: -10px;
transition: 0.5s;
}
.button:hover span {
padding-right: 20px;
}
.button:hover span:after {
opacity: 1;
right: 0;
}
.button:active {
background: #4CAF50;
}
.button__text {
font: bold 16px "Quicksand", san-serif;
color: #ffffff;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
border: 4px solid transparent;
border-radius: 50%;
}
.button--loading .button__text {
visibility: hidden;
opacity: 0;
}
.button--loading::after {
content: "";
position: absolute;
width: 16px;
height: 16px;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
border: 4px solid transparent;
border-top-color: #ffffff;
border-radius: 50%;
animation: button-loading-spinner 1s ease infinite;
}
input,
p {
font: 17px Calibri;
padding: 3px 5px;
}
#keyframes button-loading-spinner {
from {
transform: rotate(0turn);
}
to {
transform: rotate(1turn);
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button type="button" class="button">
<span class="button__text">Submit</span></button>

You can check this, which is similar to your question :
https://stackoverflow.com/a/69774273/17282751
Use the JavaScript [setTimeout][1] function to delay your redirect.
For example, if you have a link as below, call the function on link click:
Click Here
Create a JavaScript function and add the delay using the setTimeout function:
function onBtnClickHandle(){
setTimeout(function(){
window.location="https://www.google.com/"
}, 3000);
}
You can set the timeout value as per your animation timing.

maybe you are looking for this
<button type="button" class="button" onclick="waitAndRedirect(this, 'https\://google.com')">
<span class="button__text">Submit</span>
</button>
<script>
let id
function waitAndRedirect(elem, url) {
elem.classList.toggle('button--loading')
if (id) {
clearTimeout(id)
id = null
} else {
id = setTimeout(() => {
window.location.replace(url)
}, 3000)
}
}
</script>

How to make my pricing table appear when clicking a button?

I'm building a website and I want to make a fancy animation for my pricing tables where they appear when you click their name. You can see the website here.
I've already tried this code from W3 Schools on how to make an accordion and wrapping the "panel" class around my pricing table but it didn't worked out for me, do you have any suggestions ? Below is the code of my pricing table and it's styling. For your information on the wbesite all the pricing boxes uses the same code.
.first-titre-table {
color: black;
font-size: 40px;
font-family: 'Open Sans';
}
.titre-table {
margin-top: 50%;
color: black;
width: auto;
height: auto;
font-size: 40px;
font-family: 'Open Sans';
}
#import url(https://fonts.googleapis.com/css?family=Open+Sans:300,400,700);
.snip1404 {
font-family: 'Open Sans';
color: #ffffff;
text-align: left;
font-size: 16px;
max-width: 1000px;
left: 20%;
margin-right: auto;
width: 100%;
padding: 10px;
margin-top: 7%;
display: block;
flex-wrap: wrap;
align-content: center;
position: relative;
}
.snip1404 img {
position: absolute;
left: 0;
top: 0;
height: 100%;
z-index: -1;
}
.snip1404 .plan {
margin: 6px;
margin-top: 7px;
width: 25%;
position: relative;
float: left;
overflow: hidden;
border: 5px solid #730000;
box-shadow: 0px 0px 10px #000;
background-color: #b30000;
}
.snip1404 .plan:hover {
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
.snip1404 * {
-webkit-box-sizing: border-box;
box-sizing: border-box;
-webkit-transition: all 0.25s ease-out;
transition: all 0.25s ease-out;
}
.snip1404 header {
background-color: #b30000;
color: #ffffff;
}
.snip1404 .plan-title {
background-color: rgba(0, 0, 0, 0.5);
position: relative;
margin: 0;
padding: 20px 20px 0;
text-transform: uppercase;
letter-spacing: 4px;
}
.snip1404 .plan-title::after {
position: absolute;
content: '';
top: 100%;
left: 0;
width: 0;
height: 0;
border-style: solid;
border-width: 40px 300px 0 0;
border-color: rgba(0, 0, 0, 0.5) transparent transparent;
}
.snip1404 .plan-cost {
padding: 40px 20px 10px;
text-align: right;
}
.snip1404 .plan-price {
font-weight: 600;
font-size: 3em;
}
.snip1404 .plan-type {
opacity: 0.8;
font-size: 0.9em;
text-transform: uppercase;
}
.snip1404 .plan-features {
padding: 0 0 20px;
margin-left: 10px;
list-style: outside none none;
text-align: center;
}
.snip1404 .plan-features li {
padding: 8px 5%;
}
.snip1404 .plan-features i {
margin-right: 8px;
color: rgba(0, 0, 0, 0.5);
}
.snip1404 .plan-select {
border-top: 1px solid rgba(0, 0, 0, 0.2);
padding: 20px;
text-align: center;
}
.snip1404 .plan-select a {
background-color: #700000;
color: #ffffff;
text-decoration: none;
padding: 12px 20px;
font-size: 0.75em;
font-weight: 600;
border-radius: 20px;
text-transform: uppercase;
letter-spacing: 4px;
display: inline-block;
}
.snip1404 .plan-select a:hover {
background-color: #ff4d4d;
}
.text-garantie {
font-size: 17px;
display: inline;
color: #fff;
font-weight: bold;
text-shadow: 0px 0px 7px #ddd;
}
#media only screen and (max-width: 767px) {
.snip1404 .plan {
width: 50%;
}
.snip1404 .plan-title,
.snip1404 .plan-select a {
-webkit-transform: translateY(0);
transform: translateY(0);
}
.snip1404 .plan-select,
.snip1404 .plan-featured .plan-select {
padding: 20px;
}
.snip1404 .plan-featured {
margin-top: 0;
}
}
#media only screen and (max-width: 440px) {
.snip1404 .plan {
width: 100%;
}
.snip1404 .plan-non-featured {
width: 100%;
}
.snip1404 .plan-featured {
width: 100%;
}
}
<div class="snip1404">
<h2 class="first-titre-table">
Contrats Chaudière Gaz
</h2>
<div class="plan">
<header>
<h4 class="plan-title">
Contrat 1 an
</h4>
<div class="plan-cost">
<span class="plan-price">
188€
</span>
<span class="plan-type">
/an
</span>
</div>
</header>
<ul class="plan-features">
<li>
1 intervention/an
</li>
<li style="margin-bottom:63%;">
</li>
</ul>
<div class="plan-select">
<a href="">
Choisir
</a>
</div>
</div>
</div>
I would like to keep this site as framework free as possible because I don't know how it's gonna behave when I will try to host it on my company's servers so please consider this before answering, thanks !

$('.first-titre-table').click(function(){
$(this).next('.plan').slideToggle()
})
If I've understood you, this jQuery will do what you want.
Of course, you need to hide it first.
.plan{
display: none;
}

I tried this code from W3 Schools. Is this what you want?
Your website have js error and stop so other js can't execute. You need to fixed it by yourself.
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";
}
});
}
.first-titre-table {
color: black;
font-size: 40px;
font-family: 'Open Sans';
}
.titre-table {
margin-top: 50%;
color: black;
width: auto;
height: auto;
font-size: 40px;
font-family: 'Open Sans';
}
#import url(https://fonts.googleapis.com/css?family=Open+Sans:300,400,700);
.snip1404 {
font-family: 'Open Sans';
color: #ffffff;
text-align: left;
font-size: 16px;
max-width: 1000px;
left: 20%;
margin-right: auto;
width: 100%;
padding: 10px;
margin-top: 7%;
display: block;
flex-wrap: wrap;
align-content: center;
position: relative;
}
.snip1404 img {
position: absolute;
left: 0;
top: 0;
height: 100%;
z-index: -1;
}
.snip1404 .plan {
margin: 6px;
margin-top: 7px;
width: 25%;
position: relative;
float: left;
overflow: hidden;
border: 5px solid #730000;
box-shadow: 0px 0px 10px #000;
background-color: #b30000;
}
.snip1404 .plan:hover {
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
.snip1404 * {
-webkit-box-sizing: border-box;
box-sizing: border-box;
-webkit-transition: all 0.25s ease-out;
transition: all 0.25s ease-out;
}
.snip1404 header {
background-color: #b30000;
color: #ffffff;
}
.snip1404 .plan-title {
background-color: rgba(0, 0, 0, 0.5);
position: relative;
margin: 0;
padding: 20px 20px 0;
text-transform: uppercase;
letter-spacing: 4px;
}
.snip1404 .plan-title::after {
position: absolute;
content: '';
top: 100%;
left: 0;
width: 0;
height: 0;
border-style: solid;
border-width: 40px 300px 0 0;
border-color: rgba(0, 0, 0, 0.5) transparent transparent;
}
.snip1404 .plan-cost {
padding: 40px 20px 10px;
text-align: right;
}
.snip1404 .plan-price {
font-weight: 600;
font-size: 3em;
}
.snip1404 .plan-type {
opacity: 0.8;
font-size: 0.9em;
text-transform: uppercase;
}
.snip1404 .plan-features {
padding: 0 0 20px;
margin-left: 10px;
list-style: outside none none;
text-align: center;
}
.snip1404 .plan-features li {
padding: 8px 5%;
}
.snip1404 .plan-features i {
margin-right: 8px;
color: rgba(0, 0, 0, 0.5);
}
.snip1404 .plan-select {
border-top: 1px solid rgba(0, 0, 0, 0.2);
padding: 20px;
text-align: center;
}
.snip1404 .plan-select a {
background-color: #700000;
color: #ffffff;
text-decoration: none;
padding: 12px 20px;
font-size: 0.75em;
font-weight: 600;
border-radius: 20px;
text-transform: uppercase;
letter-spacing: 4px;
display: inline-block;
}
.snip1404 .plan-select a:hover {
background-color: #ff4d4d;
}
.text-garantie {
font-size: 17px;
display: inline;
color: #fff;
font-weight: bold;
text-shadow: 0px 0px 7px #ddd;
}
#media only screen and (max-width: 767px) {
.snip1404 .plan {
width: 50%;
}
.snip1404 .plan-title,
.snip1404 .plan-select a {
-webkit-transform: translateY(0);
transform: translateY(0);
}
.snip1404 .plan-select,
.snip1404 .plan-featured .plan-select {
padding: 20px;
}
.snip1404 .plan-featured {
margin-top: 0;
}
}
#media only screen and (max-width: 440px) {
.snip1404 .plan {
width: 100%;
}
.snip1404 .plan-non-featured {
width: 100%;
}
.snip1404 .plan-featured {
width: 100%;
}
}
/* Style the buttons that are used to open and close the accordion panel */
.accordion {
transition: 0.4s;
}
/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
.active, .accordion:hover {
background-color: #ccc;
}
/* Style the accordion panel. Note: hidden by default */
.panel {
max-height: 0;
overflow: hidden;
transition: max-height 0.2s ease-out;
}
<div class="snip1404">
<h2 class="first-titre-table accordion">
Contrats Chaudière Gaz
</h2>
<div class="plan panel">
<header>
<h4 class="plan-title">
Contrat 1 an
</h4>
<div class="plan-cost">
<span class="plan-price">
188€
</span>
<span class="plan-type">
/an
</span>
</div>
</header>
<ul class="plan-features">
<li>
1 intervention/an
</li>
<li style="margin-bottom:63%;">
</li>
</ul>
<div class="plan-select">
<a href="">
Choisir
</a>
</div>
</div>
</div>

Getting JSON from URL and then display results in accordion using Javascript

I have created an accordion which I would like to populate using JSON from this link : http://design.propcom.co.uk/buildtest/accordion-data.json
Here is my html:
<div class="accordion js-accordion">
<div class="accordion__item js-accordion-item active">
<div class="accordion-header js-accordion-header"></div>
<div class="accordion-body js-accordion-body" >
<div class="accordion-body__contents" ></div>
</div><!-- end of accordion body -->
</div><!-- end of accordion item -->
<div class="accordion__item js-accordion-item ">
<div class="accordion-header js-accordion-header"></div>
<div class="accordion-body js-accordion-body">
<div class="accordion-body__contents"></div>
</div>
</div>
<div class="accordion__item js-accordion-item">
<div class="accordion-header js-accordion-header"></div>
<div class="accordion-body js-accordion-body">
<div class="accordion-body__contents"></div>
</div>
</div>
</div><!-- end of accordion -->
I am trying to populate the accordion-header js-accordion-header div with the "heading" data from the JSON file and accordion-body__contents with the "contents" data.
This is as far as I have got with the Javascript part:
$.ajax({
url: 'http://design.propcom.co.uk/buildtest/accordion-data.json',
type: 'GET',
dataType: 'JSON',
success: function (data) {
$.each(data.blocks, function(index, element) {
$(".accordion-header").append("<div>" + element.heading + "</div>");
$(".accordion-body__contents").append("<div>" + element.content + "</div>");
});
}
});
Any help would be greatly appreciated as I feel like I've hit a wall with my current efforts.

There are a few issues here:
We're a bit off when handling the AJAX results
Use the data.blocks property and while looping use the element variable.
As #Danny suggested we have extra AJAX properties
Remove the callback and data properties.
Lastly your html seems over complicated
After seeing the css from your demo site, I was able to include it and remove the JQueryUI thought. Now be sure to append the entire accordion__item element.
With these problems ironed out it should look similar to this:
$.ajax({
url: 'https://design.propcom.co.uk/buildtest/accordion-data.json',
type: 'GET',
dataType: 'JSON',
success: function (data) {
$.each(data.blocks, function(index, element) {
$(".accordion")
.append(`<div class="accordion__item js-accordion-item ">
<div class="accordion-header js-accordion-header">${element.heading}</div>
<div class="accordion-body js-accordion-body">
<div class="accordion-body__contents">${element.content}</div>
</div>
</div>`);
});
var accordion = (function(){
var $accordion = $('.js-accordion');
var $accordion_header = $accordion.find('.js-accordion-header');
var $accordion_item = $('.js-accordion-item');
// default settings
var settings = {
// animation speed
speed: 400,
// close all other accordion items if true
oneOpen: false
};
return {
// pass configurable object literal
init: function($settings) {
$accordion_header.on('click', function() {
accordion.toggle($(this));
});
$.extend(settings, $settings);
// ensure only one accordion is active if oneOpen is true
if(settings.oneOpen && $('.js-accordion-item.active').length > 1) {
$('.js-accordion-item.active:not(:first)').removeClass('active');
}
// reveal the active accordion bodies
$('.js-accordion-item.active').find('> .js-accordion-body').show();
},
toggle: function($this) {
if(settings.oneOpen && $this[0] != $this.closest('.js-accordion').find('> .js-accordion-item.active > .js-accordion-header')[0]) {
$this.closest('.js-accordion')
.find('> .js-accordion-item')
.removeClass('active')
.find('.js-accordion-body')
.slideUp()
}
// show/hide the clicked accordion item
$this.closest('.js-accordion-item').toggleClass('active');
$this.next().stop().slideToggle(settings.speed);
}
}
})();
$(document).ready(function(){accordion.init({ speed: 300, oneOpen: true });});
}
});
body {
font-size: 62.5%;
background: #ffffff;
font-family: 'Open Sans', sans-serif;
line-height: 2;
padding: 5em;
}
.accordion {
font-size: 1rem;
width: 30vw;
margin: 0 auto;
border-radius: 5px;
}
.accordion-header,
.accordion-body {
background: white;
}
.accordion-header {
padding: 1.5em 1.5em;
margin-bottom:6px;
box-shadow: 0px 4px #6F277D;
background: #9E38B0;
text-transform: uppercase;
color: white;
cursor: pointer;
font-size: .8em;
letter-spacing: .1em;
transition: all .3s;
}
.accordion-header:hover {
background: #6844B7;
box-shadow: 0px 4px #4C3185;
position: relative;
z-index: 5;
}
.accordion-body {
background: #fcfcfc;
color: #3f3c3c;
display: none;
}
.accordion-body__contents {
padding: 1.5em 1.5em;
font-size: .85em;
}
.accordion__item.active:last-child .accordion-header {
border-radius: none;
}
.accordion:first-child > .accordion__item > .accordion-header {
border-bottom: 1px solid transparent;
}
.accordion__item > .accordion-header:after {
content: "\f3d0";
font-family: IonIcons;
font-size: 1.2em;
float: right;
position: relative;
top: -2px;
transition: .3s all;
transform: rotate(0deg);
}
.accordion__item.active > .accordion-header:after {
transform: rotate(-180deg);
}
.accordion__item.active .accordion-header {
background: #6844B7;
box-shadow: 0px 4px #4C3185;
}
.accordion__item .accordion__item .accordion-header {
background: #f1f1f1;
color: black;
}
#media screen and (max-width: 1000px) {
body {
padding: 1em;
}
.accordion {
width: 100%;
}
}body {
font-size: 62.5%;
background: #ffffff;
font-family: 'Open Sans', sans-serif;
line-height: 2;
padding: 5em;
}
.accordion {
font-size: 1rem;
width: 30vw;
margin: 0 auto;
border-radius: 5px;
}
.accordion-header,
.accordion-body {
background: white;
}
.accordion-header {
padding: 1.5em 1.5em;
margin-bottom:6px;
box-shadow: 0px 4px #6F277D;
background: #9E38B0;
text-transform: uppercase;
color: white;
cursor: pointer;
font-size: .8em;
letter-spacing: .1em;
transition: all .3s;
}
.accordion-header:hover {
background: #6844B7;
box-shadow: 0px 4px #4C3185;
position: relative;
z-index: 5;
}
.accordion-body {
background: #fcfcfc;
color: #3f3c3c;
display: none;
}
.accordion-body__contents {
padding: 1.5em 1.5em;
font-size: .85em;
}
.accordion__item.active:last-child .accordion-header {
border-radius: none;
}
.accordion:first-child > .accordion__item > .accordion-header {
border-bottom: 1px solid transparent;
}
.accordion__item > .accordion-header:after {
content: "\f3d0";
font-family: IonIcons;
font-size: 1.2em;
float: right;
position: relative;
top: -2px;
transition: .3s all;
transform: rotate(0deg);
}
.accordion__item.active > .accordion-header:after {
transform: rotate(-180deg);
}
.accordion__item.active .accordion-header {
background: #6844B7;
box-shadow: 0px 4px #4C3185;
}
.accordion__item .accordion__item .accordion-header {
background: #f1f1f1;
color: black;
}
#media screen and (max-width: 1000px) {
body {
padding: 1em;
}
.accordion {
width: 100%;
}
}body {
font-size: 62.5%;
background: #ffffff;
font-family: 'Open Sans', sans-serif;
line-height: 2;
padding: 5em;
}
.accordion {
font-size: 1rem;
width: 30vw;
margin: 0 auto;
border-radius: 5px;
}
.accordion-header,
.accordion-body {
background: white;
}
.accordion-header {
padding: 1.5em 1.5em;
margin-bottom:6px;
box-shadow: 0px 4px #6F277D;
background: #9E38B0;
text-transform: uppercase;
color: white;
cursor: pointer;
font-size: .8em;
letter-spacing: .1em;
transition: all .3s;
}
.accordion-header:hover {
background: #6844B7;
box-shadow: 0px 4px #4C3185;
position: relative;
z-index: 5;
}
.accordion-body {
background: #fcfcfc;
color: #3f3c3c;
display: none;
}
.accordion-body__contents {
padding: 1.5em 1.5em;
font-size: .85em;
}
.accordion__item.active:last-child .accordion-header {
border-radius: none;
}
.accordion:first-child > .accordion__item > .accordion-header {
border-bottom: 1px solid transparent;
}
.accordion__item > .accordion-header:after {
content: "\f3d0";
font-family: IonIcons;
font-size: 1.2em;
float: right;
position: relative;
top: -2px;
transition: .3s all;
transform: rotate(0deg);
}
.accordion__item.active > .accordion-header:after {
transform: rotate(-180deg);
}
.accordion__item.active .accordion-header {
background: #6844B7;
box-shadow: 0px 4px #4C3185;
}
.accordion__item .accordion__item .accordion-header {
background: #f1f1f1;
color: black;
}
#media screen and (max-width: 1000px) {
body {
padding: 1em;
}
.accordion {
width: 100%;
}
}body {
font-size: 62.5%;
background: #ffffff;
font-family: 'Open Sans', sans-serif;
line-height: 2;
padding: 5em;
}
.accordion {
font-size: 1rem;
width: 30vw;
margin: 0 auto;
border-radius: 5px;
}
.accordion-header,
.accordion-body {
background: white;
}
.accordion-header {
padding: 1.5em 1.5em;
margin-bottom:6px;
box-shadow: 0px 4px #6F277D;
background: #9E38B0;
text-transform: uppercase;
color: white;
cursor: pointer;
font-size: .8em;
letter-spacing: .1em;
transition: all .3s;
}
.accordion-header:hover {
background: #6844B7;
box-shadow: 0px 4px #4C3185;
position: relative;
z-index: 5;
}
.accordion-body {
background: #fcfcfc;
color: #3f3c3c;
display: none;
}
.accordion-body__contents {
padding: 1.5em 1.5em;
font-size: .85em;
}
.accordion__item.active:last-child .accordion-header {
border-radius: none;
}
.accordion:first-child > .accordion__item > .accordion-header {
border-bottom: 1px solid transparent;
}
.accordion__item > .accordion-header:after {
content: "\f3d0";
font-family: IonIcons;
font-size: 1.2em;
float: right;
position: relative;
top: -2px;
transition: .3s all;
transform: rotate(0deg);
}
.accordion__item.active > .accordion-header:after {
transform: rotate(-180deg);
}
.accordion__item.active .accordion-header {
background: #6844B7;
box-shadow: 0px 4px #4C3185;
}
.accordion__item .accordion__item .accordion-header {
background: #f1f1f1;
color: black;
}
#media screen and (max-width: 1000px) {
body {
padding: 1em;
}
.accordion {
width: 100%;
}
}body {
font-size: 62.5%;
background: #ffffff;
font-family: 'Open Sans', sans-serif;
line-height: 2;
padding: 5em;
}
.accordion {
font-size: 1rem;
width: 30vw;
margin: 0 auto;
border-radius: 5px;
}
.accordion-header,
.accordion-body {
background: white;
}
.accordion-header {
padding: 1.5em 1.5em;
margin-bottom:6px;
box-shadow: 0px 4px #6F277D;
background: #9E38B0;
text-transform: uppercase;
color: white;
cursor: pointer;
font-size: .8em;
letter-spacing: .1em;
transition: all .3s;
}
.accordion-header:hover {
background: #6844B7;
box-shadow: 0px 4px #4C3185;
position: relative;
z-index: 5;
}
.accordion-body {
background: #fcfcfc;
color: #3f3c3c;
display: none;
}
.accordion-body__contents {
padding: 1.5em 1.5em;
font-size: .85em;
}
.accordion__item.active:last-child .accordion-header {
border-radius: none;
}
.accordion:first-child > .accordion__item > .accordion-header {
border-bottom: 1px solid transparent;
}
.accordion__item > .accordion-header:after {
content: "\f3d0";
font-family: IonIcons;
font-size: 1.2em;
float: right;
position: relative;
top: -2px;
transition: .3s all;
transform: rotate(0deg);
}
.accordion__item.active > .accordion-header:after {
transform: rotate(-180deg);
}
.accordion__item.active .accordion-header {
background: #6844B7;
box-shadow: 0px 4px #4C3185;
}
.accordion__item .accordion__item .accordion-header {
background: #f1f1f1;
color: black;
}
#media screen and (max-width: 1000px) {
body {
padding: 1em;
}
.accordion {
width: 100%;
}
}/* CSS Document */
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="accordion js-accordion">
</div>
After skimming your demo, I've included your CSS into my example.

Responsiveness to Mobile in CSS

Im trying to make my bottom sheet responsive to mobile and desktop. you can see in laptop the bottom sheet when you click new topic it works all fine:
But then lets see it in a mobile version(On a regular Iphone 5):
You can see its beyond terrible... My HTML For that view is(Minimized):
<div class="toolbar_new_topic" ng-if="authDataDesc!=null">
<md-button id="NEW_TOPIC_BUTTON" ng-click="showNewTopic($event)">
<ng-md-icon icon="add_box" style="fill: white" size="20" id="add_icon"></ng-md-icon>
<span id="text_new_topic" color="white">Create a New Topic</span>
</md-button>
</div>
And my CSS Is:
.listdemoListControls md-divider {
margin-top: 0;
margin-bottom: 0
}
.listdemoListControls md-list {
padding-top: 0
}
.listdemoListControls md-list-item ._md-list-item-inner>._md-list-item-inner>p,
.listdemoListControls md-list-item ._md-list-item-inner>p,
.listdemoListControls md-list-item>._md-list-item-inner>p,
.listdemoListControls md-list-item>p {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none
}
body,
html {
background: #DDD
}
#MD-ICON-1 {
position: relative;
left: -40px;
bottom: -23px
}
.avatar_custom {
width: 20px;
height: 20px
}
.avatar_creator {
border-radius: 50%;
position: relative;
height: 30px;
top: 10px;
width: 30px
}
.toolbar_new_topic {
display: flex;
flex-direction: row;
justify-content: flex-end
}
#NEW_TOPIC_BUTTON {
background-color: #81C784;
font-weight: 700;
margin-right: 50px
}
span.views_icon {
position: relative;
top: 5px
}
span.replies_list.md-secondary.ng-binding {
position: relative;
left: -55px;
top: 18px
}
.user-avatar-wrapper {
padding: 0;
margin: 0;
height: 50px;
width: 50px;
border-radius: 50%;
min-width: 50px;
display: flex;
align-items: center
}
.tags a,
.tags li {
height: 24px;
line-height: 24px;
font-size: 11px
}
.search_autocomplete,
input#input-0 {
font-family: FontAwesome;
font-style: normal;
font-weight: 400;
text-decoration: inherit
}
.tags {
margin: 0;
padding: 0;
position: absolute;
right: 24px;
bottom: -12px;
list-style: none
}
.tags li {
float: left;
position: relative
}
.tags a:after,
.tags a:before {
content: "";
position: absolute;
float: left
}
.tags a {
float: left;
margin-left: 20px;
padding: 0 10px 0 12px;
background: #0089e0;
color: #fff;
text-decoration: none;
-moz-border-radius-bottomright: 4px;
-webkit-border-bottom-right-radius: 4px;
border-bottom-right-radius: 4px;
-moz-border-radius-topright: 4px;
-webkit-border-top-right-radius: 4px;
border-top-right-radius: 4px
}
.tags a:before {
top: 0;
left: -12px;
width: 0;
height: 0;
border-color: transparent #0089e0 transparent transparent;
border-style: solid;
border-width: 12px 12px 12px 0
}
.tags a:after {
top: 10px;
left: 0;
width: 4px;
height: 4px;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
border-radius: 2px;
background: #fff;
-moz-box-shadow: -1px -1px 2px #004977;
-webkit-box-shadow: -1px -1px 2px #004977;
box-shadow: -1px -1px 2px #004977
}
.tags a:hover {
background: #555
}
.tags a:hover:before {
border-color: transparent #555 transparent transparent
}
span.last_activity.ng-binding {
position: relative;
right: 129px
}
ul.tags {
position: absolute;
right: 1138px;
bottom: 20px
}
span.bookmark_icon {
position: relative;
right: 130px;
top: 1px
}
.user-avatar {
height: 50px;
width: 50px;
border-radius: 50%
}
md-list.ng-scope.md-whiteframe-24dp.flex-sm-55.flex-gt-sm-45.flex-gt-md-45 {
position: relative;
top: 25px;
left: 25px;
background: #EF5350
}
md-list-item.md-3-line.ng-scope.md-clickable {
background-color: #EF5350
}
.tags a {
position: relative;
left: 800px
}
Im currently Programming this website here so if you go there we can fix this problem real quick:
https://ide.c9.io/amanuel2/ng-fourm
Thanks for your time!

You need to use media queries in your CSS to target mobile device sizes. For example:
#media (max-width: 420px) {
/* your styles here */
}