I am trying to add a checkbox but it seems to always go on the next line.
I somehow fixed it by design but it goes back on the new line always.
This is sample checkbox I am copying from the web
input[type=checkbox]+label {
display: block;
cursor: pointer;
padding: 0.2em;
width: 113px;
}
input[type=checkbox] {
display: none;
}
input[type=checkbox]+label:before {
content: "\2714";
border: 0.1em solid #000;
border-radius: 0.2em;
display: inline-block;
width: 1em;
height: 1em;
vertical-align: bottom;
color: transparent;
transition: .2s;
}
input[type=checkbox]+label:active:before {
transform: scale(0);
}
input[type=checkbox]:checked+label:before {
background-color: MediumSeaGreen;
border-color: MediumSeaGreen;
color: #fff;
}
<input type="checkbox" id="fruit1" name="fruit-1" value="Apple">
<label for="fruit1">Apple</label>
<input type="checkbox" id="fruit2" name="fruit-2" value="Banana" disabled>
<label for="fruit2">Banana</label>
<input type="checkbox" id="fruit3" name="fruit-3" value="Cherry" checked disabled>
<label for="fruit3">Cherry</label>
<input type="checkbox" id="fruit4" name="fruit-4" value="Strawberry">
<label for="fruit4">Strawberry</label>
Do not use display block for label:
<!DOCTYPE html>
<html>
<head>
<title>Parcel Sandbox</title>
<meta charset="UTF-8" />
<style>
input[type=checkbox]+label {
cursor: pointer;
padding: 0.2em;
width: 113px;
}
input[type=checkbox] {
display: none;
}
input[type=checkbox]+label:before {
content: "\2714";
border: 0.1em solid #000;
border-radius: 0.2em;
display: inline-block;
width: 1em;
height: 1em;
vertical-align: bottom;
color: transparent;
transition: .2s;
}
input[type=checkbox]+label:active:before {
transform: scale(0);
}
input[type=checkbox]:checked+label:before {
background-color: MediumSeaGreen;
border-color: MediumSeaGreen;
color: #fff;
}
</style>
</head>
<body>
<div id="app">
<input type="checkbox" id="fruit1" name="fruit-1" value="Apple">
<label for="fruit1">Apple</label>
<input type="checkbox" id="fruit2" name="fruit-2" value="Banana" disabled>
<label for="fruit2">Banana</label>
<input type="checkbox" id="fruit3" name="fruit-3" value="Cherry" checked disabled>
<label for="fruit3">Cherry</label>
<input type="checkbox" id="fruit4" name="fruit-4" value="Strawberry">
<label for="fruit4">Strawberry</label>
</div>
</script>
</body>
</html>
Sample
Related
I am making a website that displays multiple tarot cards. And when the user selects the cards that they want, I want to display that selected card on the next page. So I did some code for selecting the cards, but I am not sure about the next part.
HTML
<html>
<head>
<meta http-equiv="Content-Type" content="text/html"; charset="utf-8">
<link rel="stylesheet" type="text/css" href="scriptstyle.css">
<script type="text/javascript">
function test_checkbox() {
var flag=false;
var values=document.getElementsByName("lang")
for(var i=0; i<values.length;i++) {
if(values[i].checked) {
}
}
}
</script>
</head>
<body>
<ul>
<li><input type="checkbox" id="cb1" name="lang" value="1" />
<label for="cb1"><img src="https://picsum.photos/seed/1/100" /></label>
</li>
<li><input type="checkbox" id="cb2" name="lang" value="2" />
<label for="cb2"><img src="https://picsum.photos/seed/2/100" /></label>
</li>
<li><input type="checkbox" id="cb3" name="lang" value="3" />
<label for="cb3"><img src="https://picsum.photos/seed/3/100" /></label>
</li>
<li><input type="checkbox" id="cb4" name="lang" value="4" />
<label for="cb4"><img src="https://picsum.photos/seed/4/100" /></label>
</li>
</ul>
</body>
</html>
CSS
ul {
list-style-type: none;
}
li {
display: inline-block;
}
input[type="checkbox"][id^="cb"] {
display: none;
}
label {
border: 1px solid #fff;
padding: 10px;
display: block;
position: relative;
margin: 10px;
cursor: pointer;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
label::before {
background-color: white;
color: white;
content: " ";
display: block;
border-radius: 50%;
border: 1px solid grey;
position: absolute;
top: -5px;
left: -5px;
width: 25px;
height: 25px;
text-align: center;
line-height: 28px;
transition-duration: 0.4s;
transform: scale(0);
}
label img {
height: 100px;
width: 100px;
transition-duration: 0.2s;
transform-origin: 50% 50%;
}
:checked+label {
border-color: #ddd;
}
:checked+label::before {
content: "✓";
background-color: rgb(41, 148, 255);
transform: scale(1);
}
:checked+label img {
transform: scale(0.9);
box-shadow: 0 0 5px #333;
z-index: -1;
}
I think I should add some storing information part after
if(values[i]).checked) {
~~~}
but I am not sure about this part :(
You are going to need more than CSS and HTML to display anything "on the next page."
My suggestions would be to use PHP GET or POST requests, or use cookies or localstorage.
I am trying to create a container that contains two forms.I want to show only one form at a time. Each form can be accessed when clicking on their respective tab and hide the other form.
But when i tried doing this i ended up in a situation where when i am clicking on the other tab to access the 2nd form then both of my form disappeared and only tabs remains their on the screen.
The desired output will be i should be able to toggle between the form.
I Had tried to debug but didn't got where i am going wrong.
Here is my javascript, HTML and CSS code:
const tabs = document.querySelectorAll(".tab");
const forms = document.querySelectorAll(".form-div");
const removeActiveTab = () =>{
tabs.forEach(tab => tab.classList.remove("active"));
};
const removeActiveForm = () => {
forms.forEach(form => form.classList.remove("current"));
};
function setActiveForm(tab){
removeActiveForm();
forms.forEach(form => {
if (tab.classList.contains(form.dataset['form'])){
form.classList.add('current')
}
});
}
function setActiveTab(tab){
if(!tab.classList.contains("active")){
removeActiveTab();
tab.classList.add("active");
}
}
tabs.forEach(tab => {
tab.addEventListener("click", () =>{
setActiveTab(tab);
setActiveForm(tab);
});
});
*{
margin : 0;
padding: 0;
box-sizing: border-box;
}
html,
body{
font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Verdana, sans-serif;
display: flex;
height: 100vh;
justify-content: center;
align-items: center;
background-color: #e6eeff;
}
.main-div{
background-color:#1a2a4d;
padding: 3rem;
width: 700px;
}
.tabs{
display: flex;
}
.tab{
flex: 1;
text-align: center;
color: #fff;
cursor: pointer;
border: 2px solid #02a1fd;
transition: background 300ms;
}
.tab:hover{
background-color: #02a1fd;
}
.tab:nth-child(1){
border-radius: 25px 0 0 25px;
}
.tab:nth-child(2){
border-radius: 0 25px 25px 0;
}
.tab h2{
padding: .5rem 1rem;
}
.active{
background-color: #02a1fd;
}
.form-div{
display: none;
opacity: 0;
}
.current{
display: block;
animation: fadeIn 500ms ease-in forwards;
}
.form-div h1{
text-align: center;
color: #fff;
padding: 1rem 0;
}
.input{
padding: .5rem 1rem;
}
.input label{
padding: 0.3rem 0.6rem;
font-size: 1.3rem;
color: #fff;
}
.req{
color: #02a1fd;
}
.input input{
width: 100%;
padding: .3rem;
font-size: 1.3rem;
background-color: transparent;
color: #fff;
border: 1px solid #fff;
outline: 0;
}
.input input:focus{
border: 1px solid #02a1fd;
}
.form-submit{
padding: .5rem 1rem;
}
.form-submit input{
padding: 1rem;
width: 100%;
font-size: 1.5rem;
background-color: #02a1fd;
border: 0;
color: #fff;
}
.form-submit input:hover{
background-color: #02886d;
}
#keyframes fadeIn{
from{
opacity: 0;
}
to{
opacity: 1;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<body>
<div class="main-div">
<div class="tabs">
<div class="tab encryption active"><h2>Encryption</h2></div>
<div class="tab decryption"><h2>Decryption</h2></div>
</div>
<div class="form-div current" data-form="Encryption">
<h1>Encryption</h1>
<form action="#">
<div class="input">
<label for="plaintext">Enter Plain text </label>
<input type="text" id="plaintext">
</div>
<div class="input">
<label for="password">Enter password </label>
<input type="password" id="password">
</div>
<div class="form-submit">
<input type="submit" value="encryption">
</div>
</form>
</div>
<div class="form-div" data-form="Decryption">
<h1>Decryption</h1>
<form action="#">
<div class="input">
<label for="decryptiontext">Enter Encrypted text </label>
<input type="text" id="decryptiontext">
</div>
<div class="input">
<label for="password">Enter password </label>
<input type="password" id="password">
</div>
<div class="input">
<label for="key">Enter key </label>
<input type="number" id="key">
</div>
<div class="form-submit">
<input type="submit" value="decryption">
</div>
</form>
</div>
</div>
<script src="main.js"></script>
</body>
</html>
Thanks in advance
The problem is in the below line -
if (tab.classList.contains(form.dataset['form'])){
Here you are checking if class list in the tab has the data-form value.
But the classes are in lower case (decryption, encryption), but data-form value is in capitals (Decryption, Encryption). That's the reason the condition never matches and the current class is never added to form.
You can either change the case, so that it matches or convert case to lower while matching as below -
if (tab.classList.contains(form.dataset['form'].toLowerCase())) {
Final Code -
const tabs = document.querySelectorAll(".tab");
const forms = document.querySelectorAll(".form-div");
const removeActiveTab = () => {
tabs.forEach(tab => tab.classList.remove("active"));
};
const removeActiveForm = () => {
forms.forEach(form => form.classList.remove("current"));
};
function setActiveForm(tab) {
removeActiveForm();
forms.forEach(form => {
if (tab.classList.contains(form.dataset['form'].toLowerCase())) {
form.classList.add('current')
}
});
}
function setActiveTab(tab) {
if (!tab.classList.contains("active")) {
removeActiveTab();
tab.classList.add("active");
}
}
tabs.forEach(tab => {
tab.addEventListener("click", () => {
debugger;
setActiveTab(tab);
setActiveForm(tab);
});
});
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html,
body {
font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Verdana, sans-serif;
display: flex;
height: 100vh;
justify-content: center;
align-items: center;
background-color: #e6eeff;
}
.main-div {
background-color: #1a2a4d;
padding: 3rem;
width: 700px;
}
.tabs {
display: flex;
}
.tab {
flex: 1;
text-align: center;
color: #fff;
cursor: pointer;
border: 2px solid #02a1fd;
transition: background 300ms;
}
.tab:hover {
background-color: #02a1fd;
}
.tab:nth-child(1) {
border-radius: 25px 0 0 25px;
}
.tab:nth-child(2) {
border-radius: 0 25px 25px 0;
}
.tab h2 {
padding: .5rem 1rem;
}
.active {
background-color: #02a1fd;
}
.form-div {
display: none;
opacity: 0;
}
.current {
display: block;
animation: fadeIn 500ms ease-in forwards;
}
.form-div h1 {
text-align: center;
color: #fff;
padding: 1rem 0;
}
.input {
padding: .5rem 1rem;
}
.input label {
padding: 0.3rem 0.6rem;
font-size: 1.3rem;
color: #fff;
}
.req {
color: #02a1fd;
}
.input input {
width: 100%;
padding: .3rem;
font-size: 1.3rem;
background-color: transparent;
color: #fff;
border: 1px solid #fff;
outline: 0;
}
.input input:focus {
border: 1px solid #02a1fd;
}
.form-submit {
padding: .5rem 1rem;
}
.form-submit input {
padding: 1rem;
width: 100%;
font-size: 1.5rem;
background-color: #02a1fd;
border: 0;
color: #fff;
}
.form-submit input:hover {
background-color: #02886d;
}
#keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="main-div">
<div class="tabs">
<div class="tab encryption active">
<h2>Encryption</h2>
</div>
<div class="tab decryption">
<h2>Decryption</h2>
</div>
</div>
<div class="form-div current" data-form="Encryption">
<h1>Encryption</h1>
<form action="#">
<div class="input">
<label for="plaintext">Enter Plain text </label>
<input type="text" id="plaintext">
</div>
<div class="input">
<label for="password">Enter password </label>
<input type="password" id="password">
</div>
<div class="form-submit">
<input type="submit" value="encryption">
</div>
</form>
</div>
<div class="form-div" data-form="Decryption">
<h1>Decryption</h1>
<form action="#">
<div class="input">
<label for="decryptiontext">Enter Encrypted text </label>
<input type="text" id="decryptiontext">
</div>
<div class="input">
<label for="password">Enter password </label>
<input type="password" id="password">
</div>
<div class="input">
<label for="key">Enter key </label>
<input type="number" id="key">
</div>
<div class="form-submit">
<input type="submit" value="decryption">
</div>
</form>
</div>
</div>
</body>
</html>
An alternative way to do the job - just set the style display from block to none (and vice versa) :
$("#enx").click(function(){
document.getElementById("eny").style.display = "block";
document.getElementById("dey").style.display = "none";
});
$("#dex").click(function(){
document.getElementById("eny").style.display = "none";
document.getElementById("dey").style.display = "block";
});
*{
margin : 0;
padding: 0;
box-sizing: border-box;
}
html,
body{
font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Verdana, sans-serif;
display: flex;
height: 100vh;
justify-content: center;
align-items: center;
background-color: #e6eeff;
}
.main-div{
background-color:#1a2a4d;
padding: 3rem;
width: 700px;
}
.tabs{
display: flex;
}
.tab{
flex: 1;
text-align: center;
color: #fff;
cursor: pointer;
border: 2px solid #02a1fd;
transition: background 300ms;
}
.tab:hover{
background-color: #02a1fd;
}
.tab:nth-child(1){
border-radius: 25px 0 0 25px;
}
.tab:nth-child(2){
border-radius: 0 25px 25px 0;
}
.tab h2{
padding: .5rem 1rem;
}
.active{
background-color: #02a1fd;
}
.form-div{
display: none;
opacity: 0;
}
.current{
display: block;
animation: fadeIn 500ms ease-in forwards;
}
.form-div h1{
text-align: center;
color: #fff;
padding: 1rem 0;
}
.input{
padding: .5rem 1rem;
}
.input label{
padding: 0.3rem 0.6rem;
font-size: 1.3rem;
color: #fff;
}
.req{
color: #02a1fd;
}
.input input{
width: 100%;
padding: .3rem;
font-size: 1.3rem;
background-color: transparent;
color: #fff;
border: 1px solid #fff;
outline: 0;
}
.input input:focus{
border: 1px solid #02a1fd;
}
.form-submit{
padding: .5rem 1rem;
}
.form-submit input{
padding: 1rem;
width: 100%;
font-size: 1.5rem;
background-color: #02a1fd;
border: 0;
color: #fff;
}
.form-submit input:hover{
background-color: #02886d;
}
#keyframes fadeIn{
from{
opacity: 0;
}
to{
opacity: 1;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<body>
<div class="main-div">
<div class="tabs">
<div id=enx class="tab encryption active"><h2>Encryption</h2></div>
<div id=dex class="tab decryption"><h2>Decryption</h2></div>
</div>
<div id=eny class="form-div current" data-form="Encryption">
<h1>Encryption</h1>
<form action="#">
<div class="input">
<label for="plaintext">Enter Plain text </label>
<input type="text" id="plaintext">
</div>
<div class="input">
<label for="password">Enter password </label>
<input type="password" id="password">
</div>
<div class="form-submit">
<input type="submit" value="encryption">
</div>
</form>
</div>
<div id=dey class="form-div current" style="display:none;" data-form="Decryption">
<h1>Decryption</h1>
<form action="#">
<div class="input">
<label for="decryptiontext">Enter Encrypted text </label>
<input type="text" id="decryptiontext">
</div>
<div class="input">
<label for="password">Enter password </label>
<input type="password" id="password">
</div>
<div class="input">
<label for="key">Enter key </label>
<input type="number" id="key">
</div>
<div class="form-submit">
<input type="submit" value="decryption">
</div>
</form>
</div>
</div>
</body>
</html>
This question already has answers here:
Can I make a <button> not submit a form?
(8 answers)
Closed 2 years ago.
I am trying to show a form with a add button and on clicking it the display property should be toggled.
But whenever I click on the button i am getting Navigated to "Link Address" in my console ,so I placed a
console.log there which gets triggered.I dont understand where I am going wrong.
This is my code snippet:
function addForm(){
console.log("triggered");
var x= document.getElementById("add-form");
if(x.style.display === "none"){
x.style.display="grid";
}
else
x.style.display="none";
}
.form-box{
display: grid;
grid-template-columns: repeat(20,50px);
grid-template-rows: repeat(40,50px);
width: 100%;
}
.heading{
font-size: 22px;
font-weight: 600px;
grid-row: 2/3;
grid-column: 3/6;
}
.line{
height: 2px;
background: #F2F2F2 0% 0% no-repeat padding-box;
opacity: 1;
width: 100%;
opacity: 1;
grid-row: 3/4;
grid-column: 3/15;
}
.form{
grid-column: 3/12;
grid-row:4/10;
display: grid;
grid-auto-rows: 50px;
}
.same-line{
display: flex;
align-items: center;
}
.full{
flex:1;
}
.btn-add{
border: none;
outline: none;
background: none;
cursor: pointer;
}
.btn-add:hover{
color: #F08520;
}
.add-form{
grid-row:12/16;
display: none;
}
.btn-submit{
grid-row: 18/19;
grid-column:10/12;
display: flex;
justify-content: center;
}
.btn-style{
border: none;
outline: none;
background: #F08520;
width: 90px;
border-radius: 7px;
color: white;
}
.btn-style:hover{
color: aqua;
}
.select-input{
height: 35px;
background: #FFFFFF 0% 0% no-repeat padding-box;
border: 1px solid #DDDDDD;
opacity: 1;
border-radius: 4px;
color: #AAAAAA;
}
.form-input{
height: 35px;
background: #FFFFFF 0% 0% no-repeat padding-box;
border: 1px solid #DDDDDD;
opacity: 1;
border-radius: 4px;
}
.form-textarea{
height: 70px;
background: #FFFFFF 0% 0% no-repeat padding-box;
border: 1px solid #DDDDDD;
opacity: 1;
border-radius: 4px;
resize: none;
}
.label{
font-size: 15px;
color: #666;
padding-top: 10px;
font-family: 'Nunito Sans', sans-serif;
}
<div class="form-box">
<p class="heading">Form Elements</p>
<div class="line"></div>
<form class="form">
<label class="label">First Name</label>
<input class="form-input" type="text" name="" id="">
<label class="label">Last Name</label>
<input class="form-input" type="text" name="" id="">
<label class="label">Age</label>
<input class="form-input" type="text" name="" id="">
<div class="same-line">
<label class="label full">Instances</label>
<button class="btn-add" onclick="addForm()">add</button>
</div>
<label class="label">Address</label>
<input class="form-input" type="text" name="" id="">
<label class="label">Type</label>
<select class="select-input" name="" id="">
<option value="">Home</option>
<option value="">office</option>
<option value="">others</option>
</select>
<div id="add-form" class="add-form">
<label class="label">Address2</label>
<input class="form-input" type="text" name="" id="">
<label class="label">Type</label>
<select class="select-input" name="" id="">
<option value="">Home</option>
<option value="">office</option>
<option value="">others</option>
</select>
</div>
<label class="label">comments</label>
<textarea class="form-textarea"></textarea>
</form>
<div class="btn-submit">
<button class="btn-style">Submit</button>
</div>
<div id="new">
</div>
</div>
Button element in form will automatically submit the form when clicked. You need to set its type as button.
<button class="btn-add" onclick="addForm()" type="button">add</button>
I am sure this question was asked before but I am looking for a very specific way to style a radio button.
Here is the fiddle of what I currently have
<label for="pretty">
<input type="radio" value="pretty" name="quality" id="pretty"> <span>pretty</span>
</label>
<label for="accessible-and-pretty">
<input type="radio" value="pretty" name="quality" id="accessible-and-pretty" checked> <span>accessible and pretty</span>
</label>
The question that I have is how can I achieve the attached image look and feel?
I am having trouble figuring our how to make the green area smaller or if there is something else I need to do to achieve that
Feel free to change the colors, gradients and sizes to match your requirement.
.container {
width: 100px;
margin: 0 auto;
}
.radio-grp {
margin-bottom: 10px;
}
input[type="radio"] {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
height: 0;
width: 0;
}
input[type="radio"] + label {
display: inline-block;
position: relative;
height: 30px;
width: 30px;
border-radius: 100%;
background-color: #fff;
border: 1px solid #ddd;
}
input[type="radio"] + label,
.radio-txt {
cursor: pointer;
}
label.radio-txt {
display: inline-block;
float: right;
padding-top: 5px;
}
input[type="radio"] + label:before {
content: '';
position: absolute;
height: 22px;
width: 22px;
border-radius: 100%;
top: 4px;
left: 4px;
box-shadow: 4px 5px 10px 0px #ccc inset;
}
input[type="radio"] + label:after {
content: '';
position: absolute;
height: 10px;
width: 10px;
border-radius: 100%;
top: 10px;
left: 10px;
transition: background 0.1s linear;
}
input[type="radio"]:checked + label:after {
background-color: #888888;
}
<div class="container">
<div class="radio-grp">
<input type="radio" name="demo" value="1" id="radio1" checked>
<label for="radio1"></label>
<label for="radio1" class="radio-txt">Demo 1</label>
</div>
<div class="radio-grp">
<input type="radio" name="demo" id="radio2" value="2">
<label for="radio2"></label>
<label for="radio2" class="radio-txt">Demo 2</label>
</div>
<div class="radio-grp">
<input type="radio" name="demo" id="radio3" value="3">
<label for="radio3"></label>
<label for="radio3" class="radio-txt">Demo 3</label>
</div>
</div>
I'm trying to make this accordion be a selector for some items. So a quick break down so if a button is pressed (which is really a radio button) then the panel below it makes one of the three choices visible. They each have a class called invisible which makes them hidden and I want to make which ever one equals the id of the selected radio button visible.
Picture Example
For some reason however they are not invisible and only one is showing is it something to do with the accordion JavaScript I have?
HTML
<div id="pricing_holder">
<button class="accordion">
<h2 class="text-center">Screen Type</h2></button>
<div class="panel text-center" id="type_panel">
<label class="icon-select">
<input type="radio" name="type" id="laptop_button" /> <img src="https://iconmonstr.com/wp-content/g/gd/makefg.php?i=../assets/preview/2012/png/iconmonstr-laptop-4.png&r=0&g=0&b=0" alt="laptop"> </label>
<label class="icon-select">
<input type="radio" name="type" id="tablet_button" /> <img src="https://iconmonstr.com/wp-content/g/gd/makefg.php?i=../assets/preview/2012/png/iconmonstr-tablet-1.png&r=0&g=0&b=0" alt="tablet"> </label>
<label class="icon-select">
<input type="radio" name="type" id="phone_button" /> <img src="https://cdns.iconmonstr.com/wp-content/assets/preview/2012/240/iconmonstr-smartphone-4.png" alt="phone"> </label>
</div>
<button class="accordion">
<h2 class="text-center">Model</h2></button>
<div class="panel invisible" id="laptop_panel">
<div id="col1">
<label class="control control--radio">LAPTOP
<input type="radio" name="radio-laptop" />
<div class="control__indicator"></div>
</label>
</div>
<div id="col3">
<label class="control control--radio">LAPTOP2
<input type="radio" name="radio-laptop" />
<div class="control__indicator"></div>
</label>
</div>
<div id="col2">
<label class="control control--radio">LAPTOP3
<input type="radio" name="radio-laptop" />
<div class="control__indicator"></div>
</label>
</div>
</div>
<div class="panel invisible" id="tablet_panel">
<div id="col1">
<label class="control control--radio">TABLET1
<input type="radio" name="radio-tablet" />
<div class="control__indicator"></div>
</label>
</div>
<div id="col3">
<label class="control control--radio">TABLET2
<input type="radio" name="radio-tablet" />
<div class="control__indicator"></div>
</label>
</div>
<div id="col2">
<label class="control control--radio">TABLET3
<input type="radio" name="radio-tablet" />
<div class="control__indicator"></div>
</label>
</div>
</div>
<div class="panel invisible" id="phone_panel">
<div id="col1">
<label class="control control--radio">iPhone 3
<input type="radio" name="radio-phone" />
<div class="control__indicator"></div>
</label>
</div>
<div id="col3">
<label class="control control--radio">Microsoft Lumia 430
<input type="radio" name="radio-phone" />
<div class="control__indicator"></div>
</label>
</div>
<div id="col2">
<label class="control control--radio">Galaxy S3
<input type="radio" name="radio-phone" />
<div class="control__indicator"></div>
</label>
</div>
</div>
</div>
CSS
#pricing_holder {
width: 100%;
margin-left: auto;
margin-right: auto;
padding-bottom: 20px;
}
.icon-select {
margin-right: 20px;
margin-left: 20px;
}
#col1 {
float: left;
width: 285px;
height: 65px;
}
#col2 {
float: none;
height: 65px;
overflow: hidden;
display: table-cell;
}
#col3 {
float: right;
height: 65px;
}
button.accordion {
background-color: #ffffff;
color: #444;
cursor: pointer;
padding: 12px;
width: 75%;
text-align: left;
outline: none;
transition: 0.4s;
border-left: 1px solid grey;
border-right: 1px solid grey;
border-top: 1px solid grey;
border-radius: 4px;
border-bottom: none;
}
button.accordion.active,
button.accordion:hover {
background-color: #6fdd7a;
color: #ffffff;
}
div.panel {
padding: 0px 18px;
background-color: #ffffff;
max-height: 0;
overflow: hidden;
width: 71%;
display: block;
transition: max-height 0.2s ease-out;
border: 1px solid grey;
}
label > input {
visibility: hidden;
position: absolute;
}
label > input + img {
cursor: pointer;
border: 2px solid transparent;
border-radius: 2px;
-webkit-transition: all 0.25s linear;
}
label > input:checked + img {
background-color: #6fdd7a;
}
.invisible {
display: none;
}
.control {
font-size: 18px;
position: relative;
display: block;
margin-bottom: 15px;
padding-left: 30px;
cursor: pointer;
}
.control input {
position: absolute;
z-index: -1;
opacity: 0;
}
.control__indicator {
position: absolute;
top: 2px;
left: 0;
width: 20px;
height: 20px;
background: #e6e6e6;
}
.control--radio .control__indicator {
border-radius: 50%;
}
.control:hover input ~ .control__indicator,
.control input:focus ~ .control__indicator {
background: #ccc;
}
.control input:checked ~ .control__indicator {
background: #6fdd7a;
}
.control:hover input:not([disabled]):checked ~ .control__indicator,
.control input:checked:focus ~ .control__indicator {
background: #6fdd7a;
}
.control__indicator:after {
position: absolute;
display: none;
content: '';
}
.control input:checked ~ .control__indicator:after {
display: block;
}
.control--checkbox .control__indicator:after {
top: 4px;
left: 8px;
width: 3px;
height: 8px;
transform: rotate(45deg);
border: solid #fff;
border-width: 0 2px 2px 0;
}
.control--checkbox input:disabled ~ .control__indicator:after {
border-color: #7b7b7b;
}
.control--radio .control__indicator:after {
top: 7px;
left: 7px;
width: 6px;
height: 6px;
border-radius: 50%;
background: #fff;
}
.control--radio input:disabled ~ .control__indicator:after {
background: #7b7b7b;
}
JS
var acc = document.getElementsByClassName("accordion");
var i;
for (i = 0; i < acc.length; i++) {
acc[i].onclick = function() {
this.classList.toggle("active");
var panel = this.nextElementSibling;
if (panel.style.maxHeight){
panel.style.maxHeight = null;
} else {
panel.style.maxHeight = panel.scrollHeight + "px";
}
}
}
var typeselect = $("input[name='type']:checked").attr('id');
$("laptop_button").click(function(){
$("laptop_panel").toggleClass("invisible");
});
$("tablet_button").click(function(){
$("tablet_panel").toggleClass("invisible");
});
$("phone_button").click(function(){
$("phone_panel").toggleClass("invisible");
});
JSFIDDLE: https://jsfiddle.net/4crj2ash/