Add a closing button to a dropdown element vanilla js

Question

I have the code that triggers my dropdown. When i press my dropdown trigger, the code works and my dropdown appears. It also works when i click outside of the dropdown. My only problem is that i cannot manage to make my dropdown dissapear when i click on my close button. I simply do not know how to make it work. Any suggestions?

function dropFunction(containerID) {
    var container = document.getElementById(containerID),
        selected = container.querySelector('.selected'),
        currentInList = container.querySelector('.dropdown-active'),
        dropdown = container.querySelector('.dropdown');


    var ignoredClicked = [selected, dropdown];

    selected.addEventListener('click', function () {
        if (dropdown.className.indexOf('open') > -1) {
            dropdown.className = 'dropdown'
        }
        else {
            dropdown.className = 'dropdown open';
            setTimeout(function () {
                dropdown.className = 'dropdown open visible'
            }, 5)
        }
    });

    document.body.addEventListener('click', function () {
        dropdown.className = 'dropdown';
    });



    for (var i = 0; i < ignoredClicked.length; i++) {
        ignoredClicked[i].addEventListener('click', function (e) {
            e.stopPropagation();
        })

    }
}
document.addEventListener('DOMContentLoaded', dropFunction('sortBox1'));

And this is my html:

<div id="sortBox1" class="sort">
                        <p class="selected">
                            <span class="icon-speak"></span> <?= get_option('advertiser_disclosure_caption'); ?>
                        </p>

                        <div class="dropdown">
                            <p><?= get_option('advertiser_disclosure_text'); ?> </p>

                            <span class="icon-close"></span>
                        </div>
                    </div>

And this is my css:

.dropdown {
  padding: 20px;
  position: absolute;
  background-color: white;
  left: 0;
  top: 100%;
  color: #111;
  border-radius: 3px;
  display: none;
  opacity: 0;
  transition: all 1s;
  line-height: 30px;
  width: 100%;
}
p.selected {
  background: transparent;
  padding: 0;
  margin: 0;
  color: #1e6ac6;
  font-weight: 400;
  cursor: pointer;
}
.dropdown.open {
  display: block;
}

.dropdown.visible {
  opacity: 1;
  box-shadow: 2px 4px 10px rgba(0, 0, 0, 0.1);
}

Answer 1

You can just blur out the drop-down.

dropdown.blur();

Answer 2

You can just add new event listener like that:

//Relative define to respect your function definiton
var container = document.getElementById('sortBox1'),
     dropdown = container.querySelector('.dropdown'),
        close = dropdown.querySelector('.icon-close')

close.addEventListener('click', function () {
   dropdown.className = 'dropdown';
})

Test case: https://jsfiddle.net/7xy0uwnt/8/