We Keep Coding

Navigate through a dropdown list using keyboard arrow keys

Using Vanilla JavaScript (not using any framework), how can I add keyboard navigation to a simple dropdown? By simple dropdown I mean a very basic dropdown such as:
<div class="dropdown">
<div>Test Dropdown</div>
<ul>
<li>A</li>
<li>B</li>
<li>C</li>
</ul>
</div>
Alongside with JavaScript, is there any HTML5 solution for this problem (such that the web browser would understand automatically without having to add any ad-hoc logic)?

Just .focus() on it then you can use your keyboard arrows.
document.getElementById("dropdown").focus();
<label for="dropdown">Choose an option:</label>
<select class="dropdown" name="dropdown" id="dropdown">
<option>A</option>
<option>B</option>
<option>C</option>
</select>

Radios will give you all the native functionality, you can hide the bubbles with appearance: none and put a label immediately after the input for styling.
input[type=radio] {
display: block;
appearance: none;
margin: 0;
outline: 0;
}
input[type=radio]+label {
display: block;
width: 100%;
background-color: green;
}
input[type=radio]:checked+label {
background-color: yellow;
}
<input type="radio" name="radio-group" id="A"/>
<label for="A">A</label>
<input type="radio" name="radio-group" id="B"/>
<label for="B">B</label>
<input type="radio" name="radio-group" id="C"/>
<label for="C">C</label>
appearance support: https://caniuse.com/?search=appearance
Note that the for property of the label being the same as the id of the input is what allows you to click the label to select the hidden radio.
You can put any html elements in the label tag to fully customize
input[type='radio'] {
display: block;
appearance: none;
margin: 0;
outline: 0;
}
input[type='radio'] + label {
display: block;
width: 100%;
background-color: lightblue;
margin-top: 4px;
overflow: auto;
}
input[type='radio']:checked + label {
background-color: yellow;
}
.a {
width: min-content;
color: red;
border: 2px solid red;
padding: 10px;
margin: 10px;
}
.b {
width: min-content;
color: blue;
border: 2px solid blue;
padding: 20px;
margin: 20px;
margin-left: auto;
}
.c {
width: min-content;
color: green;
border: 2px solid green;
padding: 40px;
margin: 40px;
margin-left: auto;
margin-right: auto;
}
<input type="radio" name="radio-group" id="A"/>
<label for="A"><div class="a">A</div></label>
<input type="radio" name="radio-group" id="B"/>
<label for="B"><div class="b">B</div></label>
<input type="radio" name="radio-group" id="C"/>
<label for="C"><div class="c">C</div></label>

Custom Radio button selection bug in angular 6 (inside of ngFor)

Selecting radio input inside one item in ngFor triggers other radio inputs checked . Created a demo .
Html
<div class='section' *ngFor="let item of radioData">
<div class="radio-selection">
<input type="radio" attr.name="radio-{{item.Id}}" value="true" attr.id="radio-first-{{item.Id}}" [(ngModel)]='item.IsSelected'>
<label attr.for="radio-first-{{item.Id}}">Radio-first {{item.Id}}--value={{item.IsSelected}}</label>
</div>
<div class="radio-selection">
<input type="radio" attr.name="radio-{{item.Id}}" value="false" attr.id="radio-second-{{item.Id}}" [(ngModel)]='item.IsSelected'>
<label attr.for="radio-second-{{item.Id}}">Radio-second {{item.Id}}--value={{item.IsSelected}}</label>
</div>
</div>
css
.section {
border:1px solid #000;
margin-bottom:1rem;
}
.radio-selection {
input[type="radio"] {
display: none;
}
input[type="radio"] + label {
position: relative;
display: inline-block;
vertical-align: middle;
margin: 5px;
cursor: pointer;
&:hover {
&:before {
border-color: green;
}
}
}
input[type="radio"] + label:before {
content: "";
background: #fff;
border: 1px solid #333;
display: inline-block;
vertical-align: middle;
width: 15px;
height: 15px;
margin-right: 10px;
text-align: center;
padding: 2px;
border-radius:50%;
}
input[type="radio"]:checked + label:before {
background:red;
box-shadow: inset 0px 0px 0px 2.5px #fff;
}
}
Thanks

Use name instead of attr.name to set the name of the input elements (see this stackblitz):
<input type="radio" name="radio-{{item.Id}}" ...>
or use the property binding syntax (see this stackblitz):
<input type="radio" [name]="'radio-'+item.Id" ...>

Hide and Display the div after selecting the radio button

I have a form with cheque and cash radio button and cheque radio is default checked. I also set, If the cheque is checked than displaying the input field. If cash is checked then hide the input field.
I check in the inspect elements, Event is working when selecting the cash but input fields are not hiding when cash is selected.
My issue got resolved using Nisarg Shah answer. Now I tried to submit the form but I am getting the value of cheque radio button but I am not getting the value of cash. Getting errorUndefined index: mode_of_payment
if (isset($_POST['submit'])) {
$status=$_POST['mode_of_payment'];
echo $status;
}
would you help me out in this?
$('label.mode_of_payment').click(function(){
$('input[type=radio]').attr('checked',null);
$('label.mode_of_payment').removeClass("checked");
$(this).prev().attr('checked',"checked");
$(this).addClass("checked");
})
$('#subject_section').change(function() {
if ($('#display_cheque').attr('checked')) {
$('#display_cheque_field').hide();
} else {
$('#display_cheque_field').show();
}
});
.radio-border{
border:1px solid #000;
width: 150px;
border-radius: 30px;
text-align: center;
display: flex;
}
.radio-width-half{
width: 75px;
}
input[type=radio]
{
display: none;
}
input[type=radio]:checked + label {
background-color: #00a2ff;
border-radius: 30px;
display: block;
color: #fff;
}
.checked{
background-color: #00a2ff;
border-radius: 30px;
display: block;
color: #fff;
}
label.mode_of_payment {
display: block;
padding: 8px;
transition: all 300ms ;
}
#display_cheque_field
{
margin-top: 10px;
}
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<form action="#" method="post" name="subject_section">
<div class="radio-border">
<div class="radio-width-half">
<input type="radio" name="mode_of_payment" value="1" class="display-none" id="display_cheque" checked>
<label class="mode_of_payment">Cheque</label>
</div>
<div class="radio-width-half">
<input type="radio" name="mode_of_payment" value="0" class="display-none">
<label class="mode_of_payment">Cash</label>
</div>
</div><!--radio border-->
<div id="display_cheque_field">
<input type="text" name="cheque_number" class="form-control" id="cheque_number" placeholder="Cheque number">
<input type="text" name="drawee_bank" class="form-control" id="drawee_bank" placeholder="Bank">
</div>
<input type="submit" name="submit" value="submit">
</form>

You can't bind to the change event on the entire form, and you don't need to. Since you have already defined a click event to handle checking-unchecking of the radio buttons, you can hide/show the inputs along with them. Your modified event handler could be like this:
$('label.mode_of_payment').click(function() {
$('input[type=radio]').prop('checked', false);
$('label.mode_of_payment').removeClass("checked");
$(this).prev().prop('checked', true);
$(this).addClass("checked");
if (!$('#display_cheque').prop('checked')) {
$('#display_cheque_field').hide();
} else {
$('#display_cheque_field').show();
}
})
$('label.mode_of_payment').click(function() {
$('input[type=radio]').prop('checked', false);
$('label.mode_of_payment').removeClass("checked");
$(this).prev().prop('checked', true);
$(this).addClass("checked");
if (!$('#display_cheque').prop('checked')) {
$('#display_cheque_field').hide();
} else {
$('#display_cheque_field').show();
}
})
.radio-border {
border: 1px solid #000;
width: 150px;
border-radius: 30px;
text-align: center;
display: flex;
}
.radio-width-half {
width: 75px;
}
input[type=radio] {
display: none;
}
input[type=radio]:checked+label {
background-color: #00a2ff;
border-radius: 30px;
display: block;
color: #fff;
}
.checked {
background-color: #00a2ff;
border-radius: 30px;
display: block;
color: #fff;
}
label.mode_of_payment {
display: block;
padding: 8px;
transition: all 300ms;
}
#display_cheque_field {
margin-top: 10px;
}
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<form action="#" method="post" name="subject_section">
<div class="radio-border">
<div class="radio-width-half">
<input type="radio" name="mode_of_payment" value="1" class="display-none" id="display_cheque" checked>
<label class="mode_of_payment">Cheque</label>
</div>
<div class="radio-width-half">
<input type="radio" name="mode_of_payment" value="0" class="display-none">
<label class="mode_of_payment">Cash</label>
</div>
</div>
<!--radio border-->
<div id="display_cheque_field">
<input type="text" name="cheque_number" class="form-control" id="cheque_number" placeholder="Cheque number">
<input type="text" name="drawee_bank" class="form-control" id="drawee_bank" placeholder="Bank">
</div>
<input type="submit" name="submit" value="submit">
</form>

You can use below code. Here I have added click event on div of radio button and handled radio button change functionality there itself
$(document).on('click', '.radio-width-half',function() {
debugger;
$("input[name=mode_of_payment]",this).prop("checked",true);
//console.log("radio name = "+$("input[name=mode_of_payment]",this).attr('id'));
if($('#display_cheque').is(":checked"))
{
$('#display_cheque_field').show();
}
else{
$('#display_cheque_field').hide();
}
});
.radio-border{
border:1px solid #000;
width: 150px;
border-radius: 30px;
text-align: center;
display: flex;
}
.radio-width-half{
width: 75px;
}
input[type=radio]
{
display: none;
}
input[type=radio]:checked + label {
background-color: #00a2ff;
border-radius: 30px;
display: block;
color: #fff;
}
.checked{
background-color: #00a2ff;
border-radius: 30px;
display: block;
color: #fff;
}
label.mode_of_payment {
display: block;
padding: 8px;
transition: all 300ms ;
}
#display_cheque_field
{
margin-top: 10px;
}
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js">
</script>
<form action="#" method="post" name="subject_section">
<div class="radio-border">
<div class="radio-width-half">
<input type="radio" name="mode_of_payment" value="1" class="display-none" id="display_cheque" checked>
<label class="mode_of_payment">Cheque</label>
</div>
<div class="radio-width-half">
<input type="radio" name="mode_of_payment" value="0" class="display-none" id="display_cash">
<label class="mode_of_payment">Cash</label>
</div>
</div><!--radio border-->
<div id="display_cheque_field">
<input type="text" name="cheque_number" class="form-control" id="cheque_number" placeholder="Cheque number">
<input type="text" name="drawee_bank" class="form-control" id="drawee_bank" placeholder="Bank">
</div>
<input type="submit" name="submit" value="submit">
</form>

Try this. I have added this css for custom radio not require to use jQuery for this and also added jQuery for show and hide display_cheque_field.
.radio-width-half{
position: relative;
}
input[type="radio"] {
height: 100%;
left: 0;
opacity: 0;
position: absolute;
width: 100%;
}
$("input[type=radio]").click(function () {
if($('#display_cheque')[0].checked) {
$("#display_cheque_field").css('display' ,'block');
}
else{
$("#display_cheque_field").css('display' ,'none');
}
});
.radio-border{
border:1px solid #000;
width: 150px;
border-radius: 30px;
text-align: center;
display: flex;
}
.radio-width-half{
width: 75px;
position: relative;
}
input[type="radio"] {
height: 100%;
left: 0;
opacity: 0;
position: absolute;
width: 100%;
}
input[type=radio]:checked + label {
background-color: #00a2ff;
border-radius: 30px;
display: block;
color: #fff;
}
.checked{
background-color: #00a2ff;
border-radius: 30px;
display: block;
color: #fff;
}
label.mode_of_payment {
display: block;
padding: 8px;
transition: all 300ms ;
}
#display_cheque_field
{
margin-top: 10px;
}
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<form action="#" method="post" name="subject_section">
<div class="radio-border">
<div class="radio-width-half">
<input type="radio" name="mode_of_payment" value="1" class="display-none" id="display_cheque" checked>
<label class="mode_of_payment">Cheque</label>
</div>
<div class="radio-width-half">
<input type="radio" name="mode_of_payment" value="0" class="display-none">
<label class="mode_of_payment">Cash</label>
</div>
</div>
<!--radio border-->
<div id="display_cheque_field">
<input type="text" name="cheque_number" class="form-control" id="cheque_number" placeholder="Cheque number">
<input type="text" name="drawee_bank" class="form-control" id="drawee_bank" placeholder="Bank">
</div>
<input type="submit" name="submit" value="submit">
</form>

Creating Tabs using JQuery or Javascript

How could I achieve the same behaviour as my current CSS using JQuery or javascript, where the contents of a tab is shown when its div is clicked?
For example, If I clicked SUN, it shows content of the sunday tab i.e " Today is Sunday" and if clicked MON shows "Today is Monday".
How can I achieve this using JQuery and Javascript rather than CSS?
#import url('https://fonts.googleapis.com/cssfamily=Open+Sans:400,600,700');
* {
margin: 0;
padding: 0;
}
body {
padding: 2px;
background: #E5E4E2;
}
.tabinator {
background: #fff;
padding: 1px;
font-family: Open Sans;
margin-top: 10px;
}
.tabinator input {
display: none;
}
.tabinator label {
box-sizing: border-box;
display: inline-block;
padding: 5px 0.6%;
color: #ccc;
margin-bottom: -1px;
margin-left: -1px;
font-family: courier;
font-weight: bold;
}
.tabinator label:before {
content: '';
display: block;
width: 100%;
height: 15px;
background-color: #fff;
position: absolute;
bottom: -4px;
left: 0;
z-index: 10;
}
.tabinator label:hover {
color: red;
cursor: pointer;
}
.tabinator input:checked+label {
position: relative;
color: red;
font-weight: bold;
background: #fff;
border: 1px solid #bbb;
border-bottom: 1px solid #fff;
border-radius: 5px 5px 0 0;
font-size: 22px;
}
.tabinator input:checked+label:after {
display: block;
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
box-shadow: 0 0 15px #939393;
}
#content1,
#content2,
#content3,
#content4,
#content5,
#content6,
#content7 {
display: none;
border-top: 1px solid #bbb;
padding: 3px;
margin-top: 2px;
}
#tab1:checked~#content1,
#tab2:checked~#content2,
#tab3:checked~#content3,
#tab4:checked~#content4,
#tab5:checked~#content5,
#tab6:checked~#content6,
#tab7:checked~#content7 {
display: block;
box-shadow: 0 0 15px #939393;
}
<div class="tabinator">
<input type="radio" id="tab1" name="tabs" checked>
<label for="tab1">SUN</label>
<input type="radio" id="tab2" name="tabs">
<label for="tab2">MON</label>
<input type="radio" id="tab3" name="tabs">
<label for="tab3">TUE</label>
<input type="radio" id="tab4" name="tabs">
<label for="tab4">WED</label>
<input type="radio" id="tab5" name="tabs">
<label for="tab5">THU</label>
<input type="radio" id="tab6" name="tabs">
<label for="tab6">FRI</label>
<input type="radio" id="tab7" name="tabs">
<label for="tab7">SAT</label>
<div id="content1">
<p> This is Sunday</>
</div>
<div id="content2">
<p> This is Monday</p>
</div>
<div id="content3">
<p> This is Tuesday</p>
</div>
<div id="content4">
<p> This is Wednesday</p>
</div>
<div id="content5">
<p> This is Thursday</p>
</div>
<div id="content6">
<p> This is Friday</p>
</div>
<div id="content7">
<p> This is Saturday</p>
</div>

There is a great article on W3schools on how to make tabs using Javascript -
https://www.w3schools.com/howto/howto_js_tabs.asp
Each content div should be given a common class. Such as tabcontent. When one of the radio buttons are clicked to switch tabs a function will be ran to hide all tabcontent divs (hiding all shown tabs), and then only show the required content.
Using JQuery I came up with this code -
HTML
<div class="tabinator">
<input type="radio" id="tab1" name="tabs" checked>
<label for="tab1">SUN</label>
<input type="radio" id="tab2" name="tabs">
<label for="tab2">MON</label>
<input type="radio" id="tab3" name="tabs">
<label for="tab3">TUE</label>
<input type="radio" id="tab4" name="tabs">
<label for="tab4">WED</label>
<input type="radio" id="tab5" name="tabs">
<label for="tab5">THU</label>
<input type="radio" id="tab6" name="tabs">
<label for="tab6">FRI</label>
<input type="radio" id="tab7" name="tabs">
<label for="tab7">SAT</label>
<div id="content1" class="tabcontent">
<p> This is Sunday</>
</div>
<div id="content2" class="tabcontent">
<p>This is Monday</p>
</div>
<div id="content3" class="tabcontent">
<p> This is Tuesday</p>
</div>
<div id="content4" class="tabcontent">
<p> This is Wednesday</p>
</div>
<div id="content5" class="tabcontent">
<p> This is Thursday</p>
</div>
<div id="content6" class="tabcontent">
<p> This is Friday</p>
</div>
<div id="content7" class="tabcontent">
<p> This is Saturday</p>
</div>
CSS
#import url('https://fonts.googleapis.com/cssfamily=Open+Sans:400,600,700');
* {
margin: 0;
padding: 0;
}
body {
padding: 2px;
background: #E5E4E2;
}
.tabinator {
background: #fff;
padding: 1px;
font-family: Open Sans;
margin-top: 10px;
}
.tabinator input {
display: none;
}
.tabinator label {
box-sizing: border-box;
display: inline-block;
padding: 5px 0.6%;
color: #ccc;
margin-bottom: -1px;
margin-left: -1px;
font-family: courier;
font-weight: bold;
}
.tabinator label:before {
content: '';
display: block;
width: 100%;
height: 15px;
background-color: #fff;
position: absolute;
bottom: -4px;
left: 0;
z-index: 10;
}
.tabinator label:hover {
color: red;
cursor: pointer;
}
.tabinator input:checked+label {
position: relative;
color: red;
font-weight: bold;
background: #fff;
border: 1px solid #bbb;
border-bottom: 1px solid #fff;
border-radius: 5px 5px 0 0;
font-size: 22px;
}
.tabinator input:checked+label:after {
display: block;
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
box-shadow: 0 0 15px #939393;
}
.tabcontent {display: none;}
#content1 {display: block;}
JQuery Function
$('input[name=tabs]').click(function(){
var id = $(this).attr('id');
$('.tabcontent').css('display', 'none');
switch (id) {
case "tab1":
$('#content1').css('display', 'block');
break;
case "tab2":
$('#content2').css('display', 'block');
break;
case "tab3":
$('#content3').css('display', 'block');
break;
case "tab4":
$('#content4').css('display', 'block');
break;
case "tab5":
$('#content5').css('display', 'block');
break;
case "tab6":
$('#content6').css('display', 'block');
break;
case "tab7":
$('#content7').css('display', 'block');
break;
}
});
Other methods can be used rather than a switch statement as long as the display of all tabcontent elements is set to none and the content to be shown is set to be displayed with block.
Hope this achieves what you wanted.

How to use radio buttons to make a div visible with javascript

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/