Hello I'm having trouble passing this code from jquery to pure js
i have this:
function xd() {
const dropDown = document.querySelector(".dropdown-el");
dropDown.addEventListener("click", event(event));
function event(e){
e.preventDefault();
e.stopPropagation();
dropDown.classList.add('expanded')
}
}.dropdown-el {
margin-top: 20vh;
min-width: 12em;
position: relative;
display: inline-block;
margin-right: 1em;
min-height: 2em;
max-height: 2em;
overflow: hidden;
top: 0.5em;
cursor: pointer;
text-align: left;
white-space: nowrap;
color: #444;
outline: none;
border: 0.06em solid transparent;
border-radius: 1em;
background-color: #cde4f5;
transition: 0.3s all ease-in-out;
}
.dropdown-el input:focus + label {
background: #def;
}
.dropdown-el input {
width: 1px;
height: 1px;
display: inline-block;
position: absolute;
opacity: 0.01;
}
.dropdown-el label {
border-top: 0.06em solid #d9d9d9;
display: block;
height: 2em;
line-height: 2em;
padding-left: 1em;
padding-right: 3em;
cursor: pointer;
position: relative;
transition: 0.3s color ease-in-out;
}
.dropdown-el label:nth-child(2) {
margin-top: 2em;
border-top: 0.06em solid #d9d9d9;
}
.dropdown-el input:checked + label {
display: block;
border-top: none;
position: absolute;
top: 0;
width: 100%;
}
.dropdown-el input:checked + label:nth-child(2) {
margin-top: 0;
position: relative;
}
.dropdown-el::after {
content: "";
position: absolute;
right: 0.8em;
top: 0.9em;
border: 0.3em solid #3694d7;
border-color: #3694d7 transparent transparent transparent;
transition: 0.4s all ease-in-out;
}
.dropdown-el.expanded {
border: 0.06em solid #3694d7;
background: #fff;
border-radius: 0.25em;
padding: 0;
box-shadow: rgba(0, 0, 0, 0.1) 3px 3px 5px 0px;
max-height: 15em;
}
.dropdown-el.expanded label {
border-top: 0.06em solid #d9d9d9;
}
.dropdown-el.expanded label:hover {
color: #3694d7;
}
.dropdown-el.expanded input:checked + label {
color: #3694d7;
}
.dropdown-el.expanded::after {
transform: rotate(-180deg);
top: 0.55em;
}
<div class="service_mode flex">
<span class="dropdown-el">
<input
type="radio"
name="sortType"
value="Relevance"
checked="checked"
id="sort-relevance"
/><label for="sort-relevance">Relevance</label>
<input
type="radio"
name="sortType"
value="Popularity"
id="sort-best"
/><label for="sort-best">Product Popularity</label>
<input
type="radio"
name="sortType"
value="PriceIncreasing"
id="sort-low"
/><label for="sort-low">Price Low to High</label>
<input
type="radio"
name="sortType"
value="PriceDecreasing"
id="sort-high"
/><label for="sort-high">Price High to Low</label>
<input
type="radio"
name="sortType"
value="ProductBrand"
id="sort-brand"
/><label for="sort-brand">Product Brand</label>
<input
type="radio"
name="sortType"
value="ProductName"
id="sort-name"
/><label for="sort-name">Product Name</label>
</span>
</div>and this is the jquery code that I need to pass to javascript:
$('.dropdown-el').click(function(e) {
e.preventDefault();
e.stopPropagation();
$(this).toggleClass('expanded');
$('#'+$(e.target).attr('for')).prop('checked',true);
});
$(document).click(function() {
$('.dropdown-el').removeClass('expanded');
});
Basically I tried to add an event to add the class and remove it, but without success, I can't think of how to add and remove the class: "expanded" correctly
Could someone help me how can I fix this?
