Hide a div element upon selecting an option from a dropdown menu

On iPhone 6plus and lower, I created a dropdown menu that opens when users click on "jobs" or "contact." However, after clicking on these options, the drop-down menu remains open. How can I make it hide automatically after a list item is clicked at this specific screen width? The dropdown menu is built with a toggle function for better understanding.

See the demo here:

http://codepen.io/anon/pen/VpyNwa

HTML:

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">

        <link href="https://fonts.googleapis.com/css?family=Nunito:700" rel="stylesheet">
        <link href="https://fonts.googleapis.com/css?family=Baloo" rel="stylesheet">
        <link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet">
        <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet"> 

             <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
        <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>


        <link rel="stylesheet" type="text/css" href="magicstyle.css">

        </head>     
        <body>
            <!-- Section for Jobs Popup -->
            <div id="top-bar">
                  <a id="burger-nav"></a>
                    <ul id="nav-menu" class="blah">
                    <li id="job" class="testAgain">Job</li>
                    <li id="contact" class="testAgain">Contact</li>
                    <li id="press" class="testAgain">Press</li>
                    <li id="legal" class="testAgain">Legal</li>
                    <li id="support" class="testAgain">Support</li>


                </ul>
                    <!--<div id="nav-menu">
                    <span id="job">Jobs</span>
                    <span id="contact">Contact</span>
                    <span id="press">Press</span>
                    <span id="legal">Legal</span>
                    <span id="support">Support</span>

                    </div> -->


                </div>
                 <div id="job-popup">
            <div class="x-div1"><img class="x-icon1" id="fadeX1" src="web%20x%20icon%20white.png" alt="Text alternative when image is not available"></div>
            <div id="job-content">

                <h1 id="jobWords"></h1>

                </div>

            </div>
            <!-- Section for Contact Popup -->
            <div id="contact-popup">
            <div class="x-div2"><img class="x-icon2" id="fadeX2" src="web%20x%20icon%20white.png"></div>
            <div id="contact-content">

                <h1 id="contactWords"></h1>

                </div>

            </div>

            <!-- Section for Press Popu -->
             <div id="press-popup">
            <div class="x-div3"><img class="x-icon3" id="fadeX3" src="web%20x%20icon%20white.png"></div>
            <div id="press-content">

                <h1 id="pressWords"></h1>

                </div>

            </div>

            <div id="legal-popup">
            <div class="x-div4"><img class="x-icon4" id="fadeX4" src="web%20x%20icon%20white.png"></div>
            <div id="legal-content">

                <h1 id="legalWords"></h1>

                </div>

            </div>

            <div id="support-popup">
            <div class="x-div5"><img class="x-icon5" id="fadeX5" src="web%20x%20icon%20white.png"></div>
            <div id="support-content">

                <h1 id="supportWords"></h1>

                </div>

            </div>




            <div id="container">


                <div id="name-div">
                <h1 id="name">Open Touch</h1>
                </div>
                <ul class="bubbles">

            <li id="firstCircle"></li>
            <li id="secondCircle"></li>
            <li id="thirdCircle"></li>
            <li id="fourthCircle"></li>
            <li id="fifthCircle"></li>
            <li id="sixthCircle"></li>



            </ul>



            </div>



        </body>

I would greatly appreciate any assistance in resolving this issue.

</html>
javascriptjqueryhtmlioscss

Answer №1

Consider incorporating the following JavaScript snippet:

$('.testAgain').click(function(){ $('.blah').removeClass('open') })

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Guide to displaying a progress bar while submitting a form using JavaScript and AJAX

After successfully creating the progress bar for my project, I encountered a technical issue. When I choose to upload a file, it gets uploaded twice - once when selecting the file and then again when submitting the form. This creates a poor user experience ...

javascriptjsonreactjsdjangoajax

After jQuery, let's dive into the world of

Imagine if my HTML input looked something like this: <input type="text" class="hello"> I attempted to use jQuery alongside ajax to add an element after it, as shown below: $(".hello").after("<p>"+response."</p>"); //response contains d ...

jqueryajax

Utilize Mongoose's post method to generate a fresh collection without any data

Libraries in use: Express, Mongoose, Express-Restify-Mongoose Challenge: I am currently exploring the process of creating a POST request that involves providing the schema within the req.body. My goal is to seamlessly generate a new collection if it doesn ...

javascriptnode.jsmongodbexpressmongoose

Removing accordion borders in Bootstrap and AngularJS can be achieved by customizing

Can anyone help me figure out how to hide the border in each accordion group that contains a panel and inner elements? I've tried using classes like .accordion and .inner but nothing seems to work. Any advice on where to find the specific class or ID ...

csslessangularjs-bootstrap

Creating a draggable div with JQuery that can be sorted and saving its position in a database

I am working on a project where I need to implement drag and drop functionality for multiple div tags on a page using jQuery. Additionally, I want to save the position of all the divs in a SQL Server database. Essentially, I am trying to create a page simi ...

c#jqueryasp.netsql-server-2008

What is the best way to convert an Angular object into a string using a for-loop and display it using $sce in AngularJS?

Currently, I am rendering a block of HTML and directives using $sce.trustAsHtml. To achieve this, I utilized a directive called compile-template which enables the use of ng-directives like ng-click and ng-disabled. While it is possible for me to pass sta ...

javascriptjqueryhtmlangularjsfor-loop

send a message to all clients using socket.io

I am having trouble figuring out how to broadcast a message from the client or another NodeJS file to all clients. While I was able to send messages to the server successfully, I am not able to reach every other client. Server code: var io = require(&ap ...

javascriptnode.jssockets

What are some best practices for utilizing JSONDecoder in the context of inheritance and protocols?

Imagine you have a JSON with both employees and employers mixed together, all inheriting from the Person class. How can we properly handle this using JSONDecoder without being able to cast it back to a subclass? let decoder = JSONDecoder() let persons = t ...

iosjsonswiftparsingcodable

What is the best way to iterate through two separate "div" elements that contain different data in each?

Currently, I am working on implementing a timeline feature in my web application. I have two distinct divs, each containing different data. Despite utilizing a foreach loop, I am encountering unexpected issues with its functionality. Could someone please a ...

phphtmlcodeigniter

Issue with Vuex not functioning properly in Nuxt.js

I'm facing an issue with setting the state in Vuex on my Nuxt.js App. It seems to not be working correctly. So, here is how I am trying to set the state using the fetch method: fetch({app, store, route}) { app.$axios.$get(`apps/${route.params ...

javascriptvue.jsvuexnuxt.js

When I try to add more content to my page, it doesn't extend beyond a single page and instead gets compacted together

As a beginner in the world of coding, my goal is to create a time management website specifically tailored for school use. Despite copying this code multiple times, I have encountered an issue where it does not continue down the page, and I am unsure of th ...

javascripthtmlcssbuttoninput

Adjust the location of the slider scrollbar in jQuery UI

Currently, I am implementing jQuery UI's slider scrollbar and my goal is to set its position upon page load. Although I have referred to the sample code provided, my experience with jQuery UI is limited, so I am unsure about the necessary modification ...

javascriptjqueryjquery-uijquery-ui-slider

Having issues with retrieving data using findOne or findById in Express and Node JS, receiving undefined values

Currently, I am working on a microservice dedicated to sending random OTP codes via email. Below is the code for my findbyattr endpoint: router.get('/findbyattr/:email', async (request, response) =>{ try { let requestEmail = reque ...

javascriptnode.jsmongodbexpressmongoose

reactjs implementation of a virtualized list

Recently, I stumbled upon the React-window library and found it to be incredibly useful. Intrigued by how it was built, I decided to try my hand at creating my own virtualized list. However, I encountered an issue where the list could only scroll up to it ...

javascriptreactjslistviewreact-virtualized

Is it possible to continuously update a Google line chart by programmatically adding rows at specific intervals using an AJAX call

Is there a way to dynamically add rows to the Google line chart each time data is retrieved via an AJAX call at set intervals? This is the existing code: google.charts.load('current', {'packages':['line']}); google.charts. ...

javascriptjqueryajaxgoogle-visualization

Struggling to transmit data to material dialog in Angular2+

I am facing an issue with my Material Dialog not working properly. Can anyone point out what I might be missing? product-thumbnail.ts I will use this to trigger the dialog export class ProductThumbnailComponent implements OnInit { @Input() product: Pr ...

javascriptangulartypescriptangular-material

The server is unable to process the request for /path

After browsing various posts, I am still unable to identify the root cause of my issue. I am developing a donation page for an organization and need to verify if PayPal integration is functioning correctly. The error I am encountering lies between my form ...

javascripthtmlnode.jsforms

Steps to remove a row from a table in a ReactJS component

I'm struggling with implementing a delete operation for table rows and encountering errors. Any assistance in resolving this issue would be greatly appreciated. Since I am unsure how to set an auto-incrementing id, I used Date.now(). Now my goal is t ...

javascripthtmlreactjs

Display issue with Google Chart

Could someone please help me identify why these charts are not showing up? This code was functioning properly in a previous project. I copied the same code to a new project, only adding the master page. However, now the charts are not appearing. All I can ...

javascriptc#htmlasp.netgoogle-visualization

The order of items in MongoDB can be maintained when using the $in operator by integrating Async

It's common knowledge that using {$in: {_id: []}} in MongoDB doesn't maintain order. To address this issue, I am considering utilizing Async.js. Let's consider an example: const ids = [3,1,2]; // Initial ids retrieved from aggregation con ...

javascriptmongodbasync.js