Allow background-image url to be clickable

Question

Is there a way to allow this (search) icon to be clickable? I would like it so that it can be used as an expand/collapse button for the list below it. The list is html and I can hide and show it. I'm more curious as to how I would allow the icon to be clickable to be able to hide/show the ul/li list. If this is possible, can an animation be applied somehow. This is a sample from w3 schools, but I have my own data. Should I convert it into a different type of list? There are examples online of retractable lists with animations as well.

function myFunction() {
    var input, filter, ul, li, a, i;
    input = document.getElementById("myInput");
    filter = input.value.toUpperCase();
    ul = document.getElementById("myUL");
    li = ul.getElementsByTagName("li");
    for (i = 0; i < li.length; i++) {
        a = li[i].getElementsByTagName("a")[0];
        if (a.innerHTML.toUpperCase().indexOf(filter) > -1) {
            li[i].style.display = "";
        } else {
            li[i].style.display = "none";

        }
    }
}

* {
  box-sizing: border-box;
}

#myInput {
  background-image: url('https://www.w3schools.com/css/searchicon.png');
  background-position: 10px 12px;
  background-repeat: no-repeat;
  width: 100%;
  font-size: 16px;
  padding: 12px 20px 12px 40px;
  border: 1px solid #ddd;
  margin-bottom: 0px;
}

#myUL {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

#myUL li a {
  border: 1px solid #ddd;
  margin-top: -1px; /* Prevent double borders */
  background-color: #f6f6f6;
  padding: 12px;
  text-decoration: none;
  font-size: 18px;
  color: black;
  display: block
}

#myUL li a:hover:not(.header) {
  background-color: #eee;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<br><br>
<div>
<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for names.." title="Type in a name">
</div>

<ul id="myUL">
  <li><a href="#">Adele</a></li>
  <li><a href="#">Agnes</a></li>

  <li><a href="#">Billy</a></li>
  <li><a href="#">Bob</a></li>

  <li><a href="#">Calvin</a></li>
  <li><a href="#">Christina</a></li>
  <li><a href="#">Cindy</a></li>
</ul>

Answer 1

You can make clickable any DOM element by adding an event listener. In your example the icon is a background image of the input element, so you need to remove it from there and make it an independent image to interact with it. Then you can add the event listener to click, triggering a function to show / hide the list (I changed the css to start hidden).

var searchIco = document.getElementById("search-ico");
var myUL = document.getElementById("myUL");
searchIco.addEventListener("click", function() {
  if(myUL.style.display == 'block') {
    myUL.style.display = 'none';
    // or: myUL.removeAttribute("style");
  } else {
    myUL.style.display = 'block';
  }
});

function myFunction() {
    var input, filter, ul, li, a, i;
    input = document.getElementById("myInput");
    filter = input.value.toUpperCase();
    ul = document.getElementById("myUL");
    li = ul.getElementsByTagName("li");
    for (i = 0; i < li.length; i++) {
        a = li[i].getElementsByTagName("a")[0];
        if (a.innerHTML.toUpperCase().indexOf(filter) > -1) {
            li[i].style.display = "";
        } else {
            li[i].style.display = "none";

        }
    }
}

* {
  box-sizing: border-box;
}
/* New */
#search-ico {
  width: 16px;
  height: 16px;
}
/* Background removed, size changed */
#myInput {
  width: 80%;
  font-size: 16px;
  padding: 12px 20px 12px 40px;
  border: 1px solid #ddd;
  margin-bottom: 0px;
}

#myUL {
  display: none; /* Added to start hidden */
  list-style-type: none;
  padding: 0;
  margin: 0;
}

#myUL li a {
  border: 1px solid #ddd;
  margin-top: -1px; /* Prevent double borders */
  background-color: #f6f6f6;
  padding: 12px;
  text-decoration: none;
  font-size: 18px;
  color: black;
  display: block
}

#myUL li a:hover:not(.header) {
  background-color: #eee;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<br><br>
<div>
<!-- Add the icon as a separate image -->
<img id="search-ico" src="https://www.w3schools.com/css/searchicon.png">
<!-- end of edited -->
<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for names.." title="Type in a name">
</div>

<ul id="myUL">
  <li><a href="#">Adele</a></li>
  <li><a href="#">Agnes</a></li>

  <li><a href="#">Billy</a></li>
  <li><a href="#">Bob</a></li>

  <li><a href="#">Calvin</a></li>
  <li><a href="#">Christina</a></li>
  <li><a href="#">Cindy</a></li>
</ul>

Answer 2

You can call the slideToggle function based on jQuery (since you are already using jQuery)

  $('#myInput').click(function(){
    $('#myUL').slideToggle('slow');
});

Learn more about sideToggle here - http://api.jquery.com/slidetoggle/