jQuery will not carry out the initial trigger action more than once

I've successfully implemented a feature where clicking on one of the 3 divs causes the main container to slide half away by 600px and reveal a new container with additional options. However, I'm facing an issue where after closing the new content, it doesn't slide again!

For a clearer demonstration, you can visit this link

Below is the HTML markup:

<aside>
<h1 class="lato blue">Getting Started</h1>
<ul id="menu_container">
<li id="show_newbus" class="show_hide green">NEW BUSINESS</li>
<li id="show_limited" class="show_hide amber">UMBRELLA vs LIMITED</li>
<li id="show_investigation" class="show_hide red">TAX INVESTIGATIONS</li>
</ul>
</aside>
<div class="main-inner lato blue-underline"></div>

<div id="#menu_newbus" class="new-business">
<div class="close-bt"></div>
</div>
<div class="why-ltd">
<div class="close-bt show_hide-2"></div>
</div>
<div class="investigation">
<div class="close-bt"></div>
</div>

Here's the corresponding CSS:

(CSS code here)

The JQuery implementation is as follows:

(JQuery code here)

If anyone has suggestions on how to fix this issue, I'd greatly appreciate it!

javascriptjqueryhtmlcss

Answer №1

Issue Resolved:

jQuery(function () {
jQuery('.show_hide').click(function () {
    var index = $(this).index(),
        newTarget = jQuery('.main-inner').eq(index).animate({left: '-600px'}, 500);
    jQuery('.main-inner').not(newTarget).animate({left: '-600px'}, 500);

});

});

After consulting the jQuery Documentation, we were able to find a solution. Jquery .index()

Appreciate the assistance.

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

Encountered an issue with npm install showing error message 'Failed: connection closed unexpectedly.'

Encountered an issue while running the command npm install module-name --save. The installation fails regardless of the module I try to install. Even specifying it in the package.json and then running npm install for the entire project results in failure ...

javascriptnode.jsnpmserverless-frameworkserverless

Unable to retrieve fileReader result value within AngularJS service

I am currently in the process of developing a service that reads image files from an HTML input element. The goal of this service is to return the HTML img object with the updated attribute containing the base64 string of the read image file. Below is the ...

javascriptangularjsimageservicecontroller

Is it possible for HTML/CSS to automatically adjust content size to fit or fill a container?

I'm interested in finding a CSS-only technique that can ensure content within a container scales to fit, regardless of whether it's text or images. Take a look at the example below: .container { display: inline-block; width: 2in; hei ...

htmlcss

transferring JSON information to a template in a NodeJs application

Currently, I am performing some filtering on my JSON data and storing the result in a variable called driver. The driver variable contains JSON data that I want to pass unchanged to the view. My main query is: How can I effectively send the data stored i ...

javascriptnode.jsexpress

What causes the CSS height attribute to mess up UL lists?

I'm struggling to understand a problem in my nested list. When I set the height of LI elements, they end up overlapping each other. Can someone explain why this is happening and suggest a proper way to apply height without causing this overlap effect? ...

htmlcsshtml-lists

Send the chosen item from the <b-form-select> element to the parent component through props

Using Vue.js, I have successfully created a form where all input fields pass their values except for the <b-form-select> element. How can I pass the value of the selected option in <b-form-select> to the parent component? Child Component: < ...

javascriptvue.jsaxiosbootstrap-vue

Guide to implementing a real-time countdown timer for days, hours, minutes, and seconds leading up to a specific date and time with JavaScript

Implement a dynamic countdown timer in JavaScript that counts up to a specific date. See the example image for reference: here ...

javascripthtmlcss

Failure to align Bootstrap columns side by side despite being within the same row

I'm having an issue with aligning the columns in my testimonials section. Despite using col-md-5 for each column, they are not lining up side by side as expected. Here is the code I am currently using: <section id="testimonials"> <d ...

htmlcssbootstrap-4

Rotate Chevron icon downwards on mobile devices in a Multilevel Dropdown Bootstrap 4

Bootstrap 4 is being utilized for my current project, I am looking to modify the rotation of the chevron icon in a multi-level dropdown menu specifically on mobile devices when the parent link is tapped, Here is the code snippet for the multi-level dropd ...

javascripthtmljquerycssbootstrap-4

Unlock the powers of Openlayers 5: Altering interactions and accessing targeted vertices

When making changes to a feature, there is a convenient option to delete a single vertex. The documentation explains this feature as follows: removePoint(){boolean}: Removes the vertex that is currently selected. () Working on mobile devices, I int ...

javascriptgisopenlayers

What is the best way to adjust the width of a button to match the size of its

Is there a way to make a button automatically adjust its width to the parent div it is nested in? . Below is the code (html structure) for reference: <div class="drp"> <button class="drp-btn" id="i-drp-btn">m/s</button> <div i ...

htmlcss

Fill the center circle with GoJs background

Is there a specific way to paint the center circle only? I have provided an example project below. ...

javascripthtmlgojs

Tips for canceling an http request in angularjs when the requesting controller has exited its scope

Developed a custom angularjs application with ng-view for loading four different modules using route provider. Each module makes HTTP requests as shown below: var requestManager = { "locations": {}, "employees": {}, "items": {}, "templates ...

javascriptangularjshttp

When the function $(document).width() is called, it may yield varying results depending on the timing of the call

Every time I use $(document).width(); within $(window).load(function(){}) or $(document).ready(function(){}), the result differs from when it is called inside $(window).resize(function(){}). The discrepancy is approximately 100px, and it's not due to ...

javascriptjquery

Difficulty surfaced in the React project following relocation to a different device

I'm new to using React and webpack with babel loader in my app. My project was running smoothly until I changed machines. I copied all the files except for node_modules (which I installed with npm install). Now, when I try to run or build the projec ...

javascriptnode.jsreactjsnpmwebpack

Retrieving Data from a Form in AngularJS

Currently, I am working on a project where I am using 3 nested ng-repeat to read a JSON file and display various questions along with their answers. Everything seems to be working fine up to this point, but I am facing an issue with storing the selected an ...

javascriptangularjsforms

Top guidelines for validating inherited props within React applications

Exploring a component called <Section /> which requires 3 props to function: color size title The color and size props are used for styling purposes, while the title prop is passed down to its child component <SectionTitle />. Here's an ...

javascriptvalidationreactjs

The error message "File is not defined" in the context of express is throwing

I am attempting to convert a base64 string into an image file and send it to Firebase through Express. Everything is functioning correctly on the frontend, except for this particular section: const convertBase64ToFile = (base64String, fileName) => { ...

javascriptnode.jsexpressfile

A guide to building a dynamic form slider that showcases variable output fields with Javascript

I'm interested in creating a Slider Form that shows different output fields when sliding, using Javascript. Something like this: https://i.sstatic.net/3Isl4.png Could anyone provide suggestions on how to achieve this or share any links related to so ...

javascripthtmljquerycss

Is it possible to send a ternary expression inside a component as a prop based on whether the condition is true or false?

Is it possible to include a ternary expression inside a component and pass it as a prop depending on whether the condition is true or false? <ExperienceList onUserToggle={this.onUserToggle} jobs={this.state.jobs[this.state.value]} { th ...

javascriptreactjs