Issue with toggleClass functionality (potential coding glitch)

I am attempting to display my div once the button is clicked. Below is the code snippet:

<div class="post-menu">
    <button class="button">
        <i class="uil uil-ellipsis-h"></i>
    </button>
    <div id="menu-lists" class="menu-lists">
        <div><a href=""><i class="uil uil-edit-alt"></i>&nbsp;&nbsp;Edit</a></div>
        <div><a href=""><i class="uil uil-trash"></i>&nbsp;&nbsp;Delete</a></div>
    </div>
</div>

div.post-menu div.menu-lists {
    /* display: none; */
    position: absolute;
    width: 140px;
    right: 0;
    background-color: #ffffff7f;
    backdrop-filter: blur(8px);
    border-radius: 20px;
    margin: 10px 5px;
    z-index: 99;
    overflow: hidden;
    padding: 0 20px;
    height: 0;
}

.activePostMenu {
    padding: 20px;
    height: 124px;
}

$("button.button").click(function(){
    $(".menu-lists").toggleClass("activePostMenu");
});

The web console does not show any errors, so I am having trouble identifying the issue. (The placement of the div is correct within its parent element before being hidden)

htmljquerycss

Answer №1

To update the CSS, you can use the following code snippet:

 $("button.button").click(function(){
    $(".menu-lists").toggleClass("activePostMenu");
});
div.post-menu div.menu-lists {
   display: none;
    position: absolute;
    width: 140px;
    right: 0;
    background-color: #ffffff7f;
    backdrop-filter: blur(8px);
    border-radius: 20px;
    margin: 10px 5px;
    z-index: 99;
    overflow: hidden;
    padding: 0 20px;
    height: 0;
}

div.post-menu div.menu-lists.activePostMenu {
    display: block;
    padding: 20px;
    height: 124px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="post-menu">
    <button class="button">
        <i class="uil uil-ellipsis-h">[Button]</i>
    </button>
    <div id="menu-lists" class="menu-lists">
        <div><a href=""><i class="uil uil-edit-alt"></i>&nbsp;&nbsp;Edit</a></div>
        <div><a href=""><i class="uil uil-trash"></i>&nbsp;&nbsp;Delete</a></div>
    </div>
</div>

Answer №2

Hey there, thanks for your question! Check out the code below for some jQuery options:

$("button.button").click(function(){
        $(".menu-lists").slideUp();
        $(this).next(".menu-lists").slideToggle();
    });
div.post-menu div.menu-lists {
       display: none; 
       position: absolute;
       width: 140px;
       right: 0;
       background-color: #ffffff7f;
       backdrop-filter: blur(8px);
       border-radius: 20px;
       margin: 10px 5px;
       z-index: 99;
       padding: 0 20px;
   }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="post-menu">
    <button class="button">
        <i class="uil uil-ellipsis-h">Button1</i> 
    </button>
    <div id="menu-lists" class="menu-lists">
        <div><a href=""><i class="uil uil-edit-alt"></i>&nbsp;&nbsp;Edit</a></div>
        <div><a href=""><i class="uil uil-trash"></i>&nbsp;&nbsp;Delete</a></div>
    </div>
</div>
<div class="post-menu">
    <button class="button">
        <i class="uil uil-ellipsis-h">Button2</i>
    </button>
    <div id="menu-lists" class="menu-lists">
        <div><a href=""><i class="uil uil-edit-alt"></i>&nbsp;&nbsp;Edit</a></div>
        <div><a href=""><i class="uil uil-trash"></i>&nbsp;&nbsp;Delete</a></div>
    </div>
</div>

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

Managing AJAX Errors in PHPAJAX error handling tips for developers

My current code is only set up to display a general error message when an error occurs during execution. I want to improve it by returning specific error messages for different scenarios. However, I have not been able to find satisfactory solutions in my s ...

javascriptphpjqueryjsonajax

Utilizing PHP Variables in an External JavaScript: A Step-by-Step Guide

I am attempting to utilize an array generated in PHP within my external JavaScript. My PHP code retrieves images from a directory based on the user ID provided via URL and stores them in an array. I aim to use this array in JavaScript to create a photo sli ...

javascriptphpjqueryhtmlarrays

Creating a torn paper illusion using CSS masking techniques

My goal is to create a ripped/lined paper effect using CSS mask. It's working well and looks good. However, I'm struggling to apply the mask at the top as well. Here's what I've tried so far: mask-image: linear-gradient(white, white), u ...

csscss-mask

C# ASP.NET Dynamic Gridview Expansion

Has anyone found a method to implement a collapsible ASP.NET gridview that can show parent-child relationships when a checkbox is clicked? ...

c#asp.netjqueryajax

I'm having trouble extracting data into my HTML file using the append function in Jquery. What could be causing this issue?

Hey there, I'm having some trouble extracting data from a URL to my HTML file using jQuery. Can anyone help out? I'm still new to this. Here's the code <html> <head> <title> My Program </title> <script src="ht ...

javascriptjqueryhtmljson

Executing a Controller function using JavaScript

This particular task seemed simple at first, but I have encountered some issues. Here is the code I am using to execute a method in my HomeController from my JavaScript file: function(id) { alert("here"); $.ajax({ url: '/HomeControlle ...

asp.net-mvcjquery

Expanding Issue with Bootstrap Navigation

Hello! I am experiencing an issue with my navbar. The menu collapses, but it does not expand. I have used an example from Bootstrap and made some tweaks, but for some reason, it still doesn't expand properly. Below is the code that I have been workin ...

htmlcsstwitter-bootstrap

Is all of the CSS stored in one or multiple files?

Will the number of CSS files on my website impact its performance? I understand the necessity of having a separate file for print styles, but I'm wondering about the other CSS files. Is it better to have all my styles in one file or split them into mu ...

cssweb

Trigger the jQuery event only during moments of inactivity

My form includes a search input box that automatically pulls remote data based on the user's entry. To activate the search, at least 3 characters are required. For instance, typing "smi" will bring up all staff members with last names starting with " ...

jquery

What is the best method for storing a model in a database?

Hello, I am currently attempting to save a model to the database. I am simply inputting the value of a title in order to save it, as my id is set to auto increment. However, I have encountered an issue where my attempts have been unsuccessful. Can someone ...

javascriptjqueryajaxbackbone.js

Locating error messages in Selenium WebDriver: mastering xpath and css selectors

Test scenario: 1. Visit the [example test URL] : 2. Scroll to the bottom of the page and observe the Facebook comment module. 3. Without signing into Facebook, click 'Comment using' button and select 'Facebook' from the dropdown menu. ...

cssseleniumxpathautomationwebdriver

Struggling to position a div below another div within a flex box layout

https://i.sstatic.net/8vZSW.jpg When trying to make the Information & advice header appear above the other div elements, I encountered an issue with flexbox. Despite setting the container div to have a flex direction of column, the header div continue ...

htmlcssangularflexbox

What is the best way to indicate if a user is currently online or offline based on their session using PHP, MySQL,

Can you please provide me with a way to determine if a user is online or offline by accessing their session? I am using PHP and MySQL for this query. header('Content-Type: application/json'); $array = array(); $res = mysql_query("SELECT * FRO ...

phpjquerymysqlajaxsession

My HTML file is not able to load my Javascript file

I'm currently working on integrating a JavaScript code for a show more and show less feature on my page. The goal is to limit the description so that it shows only a certain number of characters, with an option to expand or collapse the text. However, ...

javascriptjqueryhtml

Creating a primary php file in Apache without the use of SQL or any database: is it possible?

Forgive me if this comes across as rude, but I'm struggling to grasp the concept of apache, PHP, and servers in general. To help myself understand better, I want to create a very basic website that assigns an ephemeral ID to each user (not a session). ...

javascriptphphtmlapache

Is there a way to implement a scrollbar that only scrolls through one specific column in an HTML table?

I need help adding a scrollbar to a specific column in an HTML table. Take a look at this scenario https://jsfiddle.net/6wpdc4tL/: https://i.stack.imgur.com/svzIg.png This table should have two scrollbars, one for the light blue SCROLL column and another ...

javascripthtmlcsshtml-table

Using Knockout to bind an element to the selected value from a dropdown list

When using the following select, I am connecting it to an observable array. <select id="selectProtocols" data-bind="options: optionsAvailable, optionsCaption:'Selecione...', optionsText: 'SimpleDescription', optionsValue:'???&a ...

javascriptjqueryknockout.js

Retrieve four distinct values using only a single text box input and display them individually on separate lines

Is there a way to receive four input values from the user using just one textbox and display them on separate lines? function collectData() { var userInput, i; var textOutput = " "; for (i = 0; i <= 3; i++) { userInput = document.g ...

javascripthtmldeveloper-tools

How to center align text in the media-body using Bootstrap 4 Beta

Struggling to vertically align the text in media-body to the middle when using the new Bootstrap 4 beta version. Tried an approach mentioned in this solution, but it didn't work with the latest version of Bootstrap. Attempted using text-center and a ...

htmlcsstwitter-bootstrapflexboxbootstrap-4

Modify the text when clicked on, but do not change the span

I'm currently attempting to change the text within an anchor (<a href=>) element when another element is clicked. The structure of the HTML is as follows: <h1> <a href=""> replace this text <span class="breadcrumb" ...

jqueryhtml