jQuery slideToggle function not working properly when clicking on a link within a div

I am facing a slight issue with the slideToggle function when there is a link inside the slideup panel. My goal is to create a button that, when clicked, will slide up a div displaying related posts. Subsequently, when another button or project link is clicked on the page, it should close the toggle and reveal an alternate effect I have implemented (a 100% width and height popup). The script seems to be working well, but I am encountering one problem. Clicking on a related post within the slideToggle causes the div to slide down instead of directing to the corresponding link.

Below is my code along with an example http://jsfiddle.net/K8vBg/15/.

$(document).ready(function(){
// Create a variable to target the #menu div
var menu = $('#menu')
// Bind a click function to the menu-trigger
$('#menu-trigger').click(function(event){
    event.preventDefault();
    event.stopPropagation();
    // If the menu is visible, slide it up
    if (menu.is(":visible"))
    {
        menu.slideUp(1000);
    }
    // Otherwise, slide the menu down
    else
    {
        menu.slideDown(400);
    }
});     

$(document).not('.projectHolder-small,#projectSpecs').click(function(event) {
    event.preventDefault();
    if (menu.is(":visible"))
    {
        menu.slideUp(400);
    }
     });
     })

If I modify .projectHolder-small,#projectSpecs in the .not function to only read #menu, I can click the link inside the panel. However, the panel does not slide down when I click another button on the page. Instead, the popup from #project specs overlaps the panel without closing it.

Am I overlooking something in my script?

Thank you

Answer №1

Consider updating the $(document).not().click() code to:

$(document).click(function(event){
    if(!$(event.target).closest('.projectHolder-small,#projectSpecs').length){
        if (menu.is(":visible")){
            menu.slideUp(400);
        }            
    }
});

Instead of using the typical is(), I am utilizing closest() to ensure that even when clicking on child elements of

'.projectHolder-small,#projectSpecs'
, the panel will not close.

Answer №2

After some tweaking, I successfully revised the script as shown below:

$(document).ready(function () {

var $menu = $('#menu').hide();

var $button = $("#menu-trigger").on('click', function () {
    var $this = $(this)
    $button.filter(".selected").not(this).removeClass('selected');
    $this.toggleClass('selected');

    if ($this.hasClass('selected') && $menu.is(':visible')) {
        $menu.stop(true, true).slideUp(function () {
            $(this).slideDown()
        });
    } else {
        $menu.stop(true, true).slideToggle();
    }
});
$button.filter('.selected').click();

$("#projectSpecs, #menuButton").click(function () {
    $button.filter(".selected").removeClass('selected');
    $menu.slideUp();
});
});

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

Is there a way to access and modify files stored locally through a webpage using HTML?

My team uses a specific application and I need to access a local log that they generate. The goal is to transfer this log to a central system for tracking their activities. To accomplish this, I plan to create a background web application or webpage that a ...

Vue automatically clears the INPUT field when disabling it

Have you ever noticed why Vue resets a text input field when it's set to disabled? This behavior is not observed with plain Javascript and also doesn't affect textarea fields. var app = new Vue({ el: '.container', data: { disab ...

retrieving request headers using XMLHttpRequest

Is there a way for me to access my requestHeaders within the onload function? Any guidance on how to achieve this would be greatly appreciated. Many thanks! ...

When working with HTML, how can you prevent the scrollbar from automatically scrolling to the bottom when new data is continuously added to a <textarea> element using AJAX calls?

Is there a way to prevent a textarea on an HTML page from automatically scrolling to the top when new data is entered, causing inconvenience for manual scrolling? ...

After downloading the latest version of NodeJS, why am I seeing this error when trying to create a new React app using npx?

After updating to a newer version of NodeJS, I attempted to create a new React app using the command npx create-react-app my-app. However, I encountered the following error message: Try the new cross-platform PowerShell https://aka.ms/pscore6 PS E:\A ...

Guide on incorporating Bootstrap 4 beta.2 into an Angular 4 project

After attempting to install Bootstrap 4 version beta.2 along with its dependencies (jquery and popper.js), I encountered a strange problem. A SyntaxError message kept appearing in the console, specifically stating "SyntaxError: export declarations may only ...

Is there a way to verify the presence of months in a column related to departments?

Is there a way to validate whether the current row aligns with the current column month and year? If not, can it be set to 0. Let's consider the current dataset. Presenting my resultData https://pastebin.com/GHY2azzF I want to verify if this data ...

JavaScript Object has Not Been Defined

Currently, I am developing a small program for myself related to a video game. The main issue I am facing is that certain objects are being flagged as not defined when the errors appear on the page. $(document).ready(function(){ //A list of chara ...

Tips for maintaining tab state using Angular Material

In my Angular 8 application with Angular Material, I have implemented four tabs where each tab allows editing. However, when going back from the edit mode to the tabs, I want the last selected tab to remain selected. My approach so far is as follows: exp ...

Can dynamic attributes be used with ternary operators in Angular?

I attempted to alter the id of a div using Angular and implemented the following code: <div [id]="'item_' + (itemName !== undefined ? itemName.replace(' ', '-').toLowerCase() : '')"> However, when I run my te ...

React Material-UI select component malfunctions when I enclose the menu item within a Tooltip wrapper

Here is a snippet of my code: return( <FormControl sx={{ m: 1, minWidth: 80 }}> <InputLabel id="demo-simple-select-autowidth-label">Age</InputLabel> <Select labelId="demo-simple-select-autowidt ...

Implementing dynamic attribute id addition to select option

Here's the code snippet I'm currently working with: Included HTML <select id="drop_opts"> <option>1<option> <option>2<option> <option>3<option> </select> ...

I am encountering difficulties with hosting a project that was created using Next.js

I am currently working on a Next.js project and I encountered some version compatibility issues when integrating MUI. While my project runs smoothly in localhost, it fails to work when deployed in hosting. I attempted to resolve this by using the --legacy ...

When you're downloading a file in Safari, the filename ends up being displayed as 'unidentified'

I am encountering an issue with the code I implemented that downloads a file in Safari, but the filename appears as 'untitled'. Interestingly, it works fine in other browsers. var saveData = (function () { var base64 = "data:application/mswo ...

Steps for navigating to a different page by clicking on a gridview row

Currently, I am utilizing a grid view on my webpage. My specific request is that upon clicking on any row within the grid, it should redirect to a separate page where all the details of the selected row will be displayed. Appreciate your assistance! ...

Place the image on the canvas

I currently have a canvas where I am able to add text layers and images from flickr. My goal is to enable users to upload an image to the canvas using the html input. For uploading images from flickr, I am using this code: $(".search form.image-search"). ...

Using the `ng-if` directive in Angular to check for the

I need to output data in JSON format using items. To display a single item, I utilize ng-repeat="item in items". Additionally, I can access the user object of the currently logged-in user with user. Every item has the ability to belong to multiple wishlis ...

Hiding content with a fixed Bootstrap menu

How can I prevent the fixed menu in my web page from hiding content, especially when the screen size is reduced and responsive menu hides even more content? Here's an example of the code: <nav class="navbar navbar-inverse navbar-fixed-top" styl ...

Tips for integrating AngularJS into a webpage

I am currently developing a NodeJS application and I am looking to integrate AngularJS for the client side scripting. After downloading AngularJS via NPM, I encountered an issue where my require statement is not functioning as expected. Can anyone provide ...

Utilizing PHP to Assign Attributes to Form Elements

Currently, I am utilizing a Content Management System (CMS) along with a form builder extension. This particular extension grants me the ability to execute PHP scripts upon page load. Furthermore, I have the option to include custom 'Additional Attri ...