How can you make an element appear when clicking and then disappear with a second click?

Having a bit of an issue here. When I click on the menu button "x," it triggers an onclick event that opens/displays an element. All good so far. But now, I want to click the same menu button "x" to close that same element, and that's where I'm struggling. I'm not sure how to make it happen.

Here's my HTML code with the JS.

<a href="#" onclick="toggleSubMenu(); return false;" class="deco-text">services</a>

*toggleSubMenu means to turn the submenu on or off.

function toggleSubMenu() {
  var menu = document.getElementById('menu-vg');
  
  if(menu.style.display === "block") {
    menu.style.display = "none";
  } else {
    menu.style.display = "block";
    menu.style.zIndex = "999";
  }
}

I tried adding another function after "return false" for closing, but it didn't work as expected.

Would greatly appreciate any help or advice. Thanks!

Ps. Before someone points out a similar question like this, I did search but couldn't find one. If there is, I'd appreciate a link to it.

javascripthtmlcss

Answer №1

To determine the appropriate course of action, you can use a straightforward if statement:

<a href="#" onclick="toggleDropdown();" class="styled-link">services</a>

function toggleDropdown(){
  if(document.getElementById('dropdown-menu').style.display != "block"){
    document.getElementById('dropdown-menu').style.display = "block";
    document.getElementById('dropdown-menu').style.zIndex = "999";
  }
  else{
    document.getElementById('dropdown-menu').style.display = "none";
    document.getElementById('dropdown-menu').style.zIndex = "auto";
  }
}

Answer №2

Reducing the Size of the Code for @Xufox's Response

function toggleSubMenu(){"none"!=document.getElementById("menu-vg").style.display?(document.getElementById("menu-vg").style.display="none",document.getElementById("menu-vg").style.zIndex="auto"):(document.getElementById("menu-vg").style.display="block",document.getElementById("menu-vg").style.zIndex="999")}

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

Employ the JQuery Datepicker functionality to enhance the user experience

Is it possible to integrate jQuery Datepicker into a web page that includes an iframe? And where is the optimal placement for linking the CSS and script references? ...

jqueryhtmljquery-ui

AngularJS validation for minimum character count prevents character overflow

Encountering an unusual "issue". I've set up a form with a textarea that has both a minlength and maxlength validation. In addition, there's a straightforward character count displayed: <textarea ng-trim="false" ng-model="form.text" minlengt ...

javascriptangularjs

Using a custom function, automatically initiate audio playback when an Android WebView JS loads

I have a unique JS function specifically designed for the audio tag, which also controls the progress bar. It works perfectly when I click on the associated tag <a onclick="playSound(1)">. However, if I try to initiate it on page load, the function s ...

javascripthtmlaudio

What is the best way to center and personalize slider arrow placements vertically?

I applied CSS to customize the appearance of the previous and next arrows for .customer-logos, but I'm still seeing the default button style along with my changes. How can I resolve this issue and position the buttons on either side of the slider inst ...

jqueryhtmlcss

React cannot be utilized directly within HTML code

I am looking to incorporate React directly into my HTML without the need for setting up a dedicated React environment. While I can see the test suite in the browser, my React app fails to load. Below is the content of my script.js file: I have commented ...

javascripthtmlreactjs

What is the best way to attach a tag or label onto multiple objects so that it remains facing the camera whenever the user interacts with the objects?

My goal is to create a tag or label that always faces the camera when a user clicks on an object, even if that object is rotated. How can I achieve this? I've been advised to use an Orthogonal camera, but I'm not sure how to do that. Additionall ...

javascriptthree.jswebgl

Vanishing ShareThis Link After Postback in JavaScript

On my webpage at , I have included a ShareThis link in the footer that is generated via Javascript. However, whenever there is an AJAX postback after entering an email on the site, the link disappears. Is there a way to prevent this from happening and ensu ...

asp.netjavascriptajax

Adding an arrow to a Material UI popover similar to a Tooltip

Can an Arrow be added to the Popover similar to the one in the ToolTip? https://i.stack.imgur.com/syWfg.png https://i.stack.imgur.com/4vBpC.png Is it possible to include an Arrow in the design of the Popover? ...

javascriptcssreactjstypescriptmaterial-ui

Repeatedly triggering the Jquery Dialog Event

When I open a calendar plugin in jquery dialog, I encounter a recurring issue. Every time I close and reopen the dialog, my calendar event onDayClick triggers multiple times – twice, thrice, and so on. <div id="show_calendar"> <div class="c ...

javascriptjqueryhtmldialogrepeat

Enable vertical scrolling on the second row of a table while keeping the first row fixed as the table header (CSS)

While embedding the Ace Editor in a Chrome popup window, I encountered a challenge. My goal was to keep the first row of text always visible at the top while allowing the rest of the Editor to fill the screen. However, there is an issue with a vertical scr ...

javascripthtmlcssace-editor

React useEffect appended script not activating

I'm having trouble loading a script that should generate an iframe and display a weather widget upon trigger. I am able to append the script correctly, but it doesn't seem to be called and does not create the iframe. Even when I directly add the ...

javascriptreactjsreact-hooksuse-effect

Is it possible to import Vue directly from the "/path/to/vue.js" file without using npm or NodeJs?

Is it possible to build a web app using just a single index.js file and importing other available files like shown in this image: https://i.stack.imgur.com/02aFF.png encountering the error message: import not found: default Do you have to use Vuejs wit ...

javascriptnode.jsvue.jsnpm

Steps to calculate the total number of rows in a datatable

I have implemented a datatable in my project, and I need to find out the total number of rows in the table when it is loaded. Here's the snippet of code I am currently using: $(document).ready( function() { $('#jobSearchResultTable').data ...

javascriptjquerydatatable

Transfer data dynamically between JSP pages using parameters

In my Java application, users can log in and predict football matches. I have created an admin JSP page where I retrieve all team names from a database table to set up this week's matches. Later, after the matches finish, I set the final results to co ...

javahtmljspservletsjstl

Adding or Deleting Rows from Input Table

I'm in the process of creating a website that features an input table allowing users to easily add or remove rows at their discretion. The desired UI is shown below: https://i.sstatic.net/EFAlM.jpg Here is the HTML code I have developed so far: & ...

javascripthtmlcssbootstrap-4

Storing a string in an array in PHP: A step-by-step guide

I'm facing an issue with storing a string in an array, as it seems to not save the changes in the array properly: <?php session_start(); $username = $_POST["username"]; $password = $_POST["password"]; $users = array(); $passe ...

phphtmlarraysforms

Tips for switching out images depending on the time of day

Currently, I have a script that dynamically changes the background color of my webpage based on the time of day. However, I am facing issues trying to implement a similar functionality for replacing an image source. The current code is also time zone-based ...

javascriptjqueryhtmlcss

Error: The component passed is invalid and cannot be defined within kendo UI

Check out this example https://www.telerik.com/kendo-vue-ui/components/grid/ showcasing a computed method gridSearchMessage() { return provideLocalizationService(this).toLanguageString( "gridSearch", "Search in all colu ...

javascriptvue.jskendo-uikendo-gridvue-composition-api

Can Next.js 13 support the usage of axios?

Despite trying to implement the SSG operation with the fetch option {cache: 'force-cache'}, I consistently received the same data even when the mock server's data changed. I found that using the fetch option {cache: 'no-store'} do ...

javascriptreactjsnext.jsaxiosfetch-api

How can I retrieve the data passed in a post request using Azure Functions and JavaScript?

I have a JavaScript Azure function that takes a context and request as parameters: function(context, req) It's easy to retrieve data from a GET request using the req object. For example, if I pass name=test in the URL, I can retrieve it in my code l ...

javascriptnode.jsazureazure-functions