What causes the ul element to display upon clicking the input field?

Question

What causes the ul element to display upon clicking the input field?

Why is the ul disappearing with display: none when the input element is clicked? Here is the HTML code snippet: When this input is clicked:

 <input class="input country" type="text"/>

This unordered list should be displayed (but it's not):

 <ul id='country-list'>
                <li id="US">United States</li>
 </ul>

Check out the jQuery code below:

function handleCountries() {
    $('#country-list').hide();
    $('#country').click(function () {
        $("#country-list").show();
    });
};

function handleTestOut() {
    handleCountries()
};

$(handleTestOut)

HTML structure to showcase the issue:

 <div class="container">
            <input class="input country" type="text"/>
            <ul id='country-list'>
                <li id="US">United States</li>
            </ul>
            <button>explore</button>
        </div>

Here are some CSS styles being applied:

.container {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 200px;
}

.input {
  height: 30px;
  margin-bottom: 50px;
}

ul {
  height: 200px;
  width: 18%;
  overflow: hidden;
  overflow-y: scroll;
  position: absolute;
  background-color: blue;
  top: 20px
}

Access the complete code here

Note: Invalid HTML has been removed, but the issue persists

html jquery css absolute

Answer 1

Answer №1

If you want to conceal it, just use this code: $('#country-list').hide();

Why are these functions calling each other?

It seems odd that you're using jQuery to call the handleTestOut function, which then calls the handleCountries function. It doesn't really serve a purpose.

You can achieve the same outcome by simply removing them from the functions:

Your main issue was that you were referencing an id as #country when it should be a CSS class called .country for click events (or use input.country or .input class, or combine them all as input.country.input):

$('#country-list').hide();

$('.country').click(function() {
  $("#country-list").show();
});

html {
  height: 100%;
}

body {
  font-family: 'Nunito', sans-serif;
  color: #1b4639;
  background: #cbe2e4;
  height: 100%;
}

.wrapper {
  height: 100%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

p {
  text-align: center;
  margin: 0;
  font-size: 24px;
}

.container {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 200px;
}

.input {
  height: 30px;
  margin-bottom: 50px;
}

ul {
  height: 200px;
  width: 18%;
  overflow: hidden;
  overflow-y: scroll;
  position: absolute;
  background-color: blue;
  top: 20px
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css" />
  <link href='http://fonts.googleapis.com/css?family=Nunito:400,300' rel='stylesheet' type='text/css'>
  <title>Document</title>
</head>

<body>
  <div class="wrapper">
    <p>Hello World!</p>
    <div class="container">
      <input class="input country" type="text" />
      <ul id='country-list'>
        <li id="US">United States</li>
        <li id="AF">Afghanistan</li>
        <li id="AX">Åland Islands</li>
        <li id="AL">Albania</li>
        <li id="DZ">Algeria</li>
        <li id="AS">American Samoa</li>
        <li id="AD">Andorra</li>
        <li id="AO">Angola</li>
        <li id="AI">Anguilla</li>
        <li id="AQ">Antarctica</li>
        <li id="AG">Antigua and Barbuda</li>
        <li id="AR">Argentina</li>
        <li id="AM">Armenia</li>
        <li id="AW">Aruba</li>
        <li id="AU">Australia</li>
        <li id="AT">Austria</li>
        <li id="AZ">Azerbaijan</li>
        <li id="BS">Bahamas</li>
        <li id="BH">Bahrain</li>
        <li id="BD">Bangladesh</li>
        <li id="BB">Barbados</li>
        <li id="BY">Belarus</li>
        <li id="BE">Belgium</li>
        <li id="BZ">Belize</li>
        <li id="BJ">Benin</li>
        <li id="BM">Bermuda</li>
        <li id="BT">Bhutan</li>
        <li id="BO">Bolivia, Plurinational State of</li>
        <li id="BQ">Bonaire, Sint Eustatius and Saba</li>
        <li id="BA">Bosnia and Herzegovina</li>
      </ul>
      <button>explore</button>
    </div>
  </div>
</body>

</html>

Answer 2

If you want to conceal it, just use this code: $('#country-list').hide();

Why are these functions calling each other?

It seems odd that you're using jQuery to call the handleTestOut function, which then calls the handleCountries function. It doesn't really serve a purpose.

You can achieve the same outcome by simply removing them from the functions:

Your main issue was that you were referencing an id as #country when it should be a CSS class called .country for click events (or use input.country or .input class, or combine them all as input.country.input):

$('#country-list').hide();

$('.country').click(function() {
  $("#country-list").show();
});

html {
  height: 100%;
}

body {
  font-family: 'Nunito', sans-serif;
  color: #1b4639;
  background: #cbe2e4;
  height: 100%;
}

.wrapper {
  height: 100%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

p {
  text-align: center;
  margin: 0;
  font-size: 24px;
}

.container {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 200px;
}

.input {
  height: 30px;
  margin-bottom: 50px;
}

ul {
  height: 200px;
  width: 18%;
  overflow: hidden;
  overflow-y: scroll;
  position: absolute;
  background-color: blue;
  top: 20px
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css" />
  <link href='http://fonts.googleapis.com/css?family=Nunito:400,300' rel='stylesheet' type='text/css'>
  <title>Document</title>
</head>

<body>
  <div class="wrapper">
    <p>Hello World!</p>
    <div class="container">
      <input class="input country" type="text" />
      <ul id='country-list'>
        <li id="US">United States</li>
        <li id="AF">Afghanistan</li>
        <li id="AX">Åland Islands</li>
        <li id="AL">Albania</li>
        <li id="DZ">Algeria</li>
        <li id="AS">American Samoa</li>
        <li id="AD">Andorra</li>
        <li id="AO">Angola</li>
        <li id="AI">Anguilla</li>
        <li id="AQ">Antarctica</li>
        <li id="AG">Antigua and Barbuda</li>
        <li id="AR">Argentina</li>
        <li id="AM">Armenia</li>
        <li id="AW">Aruba</li>
        <li id="AU">Australia</li>
        <li id="AT">Austria</li>
        <li id="AZ">Azerbaijan</li>
        <li id="BS">Bahamas</li>
        <li id="BH">Bahrain</li>
        <li id="BD">Bangladesh</li>
        <li id="BB">Barbados</li>
        <li id="BY">Belarus</li>
        <li id="BE">Belgium</li>
        <li id="BZ">Belize</li>
        <li id="BJ">Benin</li>
        <li id="BM">Bermuda</li>
        <li id="BT">Bhutan</li>
        <li id="BO">Bolivia, Plurinational State of</li>
        <li id="BQ">Bonaire, Sint Eustatius and Saba</li>
        <li id="BA">Bosnia and Herzegovina</li>
      </ul>
      <button>explore</button>
    </div>
  </div>
</body>

</html>

What causes the ul element to display upon clicking the input field?

Answer №1

Similar questions

Can someone show me how to populate select options with values from a list using Python variables?

Dynamic menu plugin for JQuery

Refreshing information within a table using Ajax Prototype

Issue with initial width calculation of Slick slider

show a picture and text side by side

The jQuery animate() method fails to execute animations

Ways to retrieve the content and characteristics of a span element

Having trouble with changing the class using Jquery click function

Position an element in the middle of the range between the tallest and shortest characters

Instructions on how to assign a class number to a div matching the cookie number

Utilize jQuery $.ajax to integrate a RESTful WCF service within an MVC 4 web application

Unusual Ajax response detected by JSF ajax listener

The Eonasdan DateTimePicker plugin for Bootstrap v4 (Tempus Dominus) is experiencing technical difficulties

The usage of event.returnValue has been phased out. It is recommended to utilize the standard event.preventDefault()

What is the best way to activate a click event when I set a radio button to checked?

Transferring JavaScript to a different page using EJS

When the user presses either the refresh button or the back button, they will be redirected

Troubleshooting a Windows Phone HTML5 app encountering an Ajax error

Issues with DnD functionality in Chrome, images not visible during dragging operation

Using jQuery and Ajax to send the content of a single textbox to a controller for processing