jquery code to javascript pure on select box

Question

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?

Mohamed-Yousef · Accepted Answer · 2020-07-10T21:14:34.847

1st: You need to call the xd() function

2nd: Instead of event(event) you can use function(e){ event(e); }

3rd: To remove the class use .remove instead of .add

I changed the nested functions to expand and close .. see the next code

function xd() {
  const dropDown = document.querySelector(".dropdown-el");
  dropDown.addEventListener("click", function(e){expand(e)});
  document.addEventListener("click", close);
  function expand(e){
    e.preventDefault();
    e.stopPropagation();
    dropDown.classList.add('expanded');
  }
  function close(){
    dropDown.classList.remove('expanded');
  }
}
xd();

.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>

How to remove a class from elements in pure JavaScript?

How can I change an element's class with JavaScript?

How to get the HTML for a DOM element in javascript

How to get innerHTML of this element in javascript?

How to change HTML element value using javascript?

.parents() without jquery - or querySelectorAll for parents

@Mohammed-Yousef thank u , can u help me with this?: $(".select_ul li").click(function(){ var currentele = $(this).html(); $(".default_option li").html(currentele); $(this).parents(".select_wrap").removeClass("active"); }) — Ming, Jul 10 '20 at 21:00
@GabrielCosta I updated my answer with all references links you will need to convert this piece of code to pure javascript , Have a great day :-) — Mohamed-Yousef, Jul 10 '20 at 21:20

jquery code to javascript pure on select box

1 Answers1