The slidetoggle() function in jquery seems to be malfunctioning

I encountered an issue with my jQuery code. Two days ago, it was working perfectly fine but now it's not functioning properly. I created a Demo here for reference.

Here is my code:

$(document).ready(function () {
    $(".change").click(function () {
        $(".pass").slideToggle("slow");
        $(".pass1").slideToggle("slow");
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<a class="change">Change Password</a>
<br/>
<div class="pass">
<br />
<input type="password" class="textbox" placeholder="Current Password" name="old" id="old" size="20" />
<br/>
<br/>
<input type="password" class="textbox" placeholder="New Password" name="new" id="new" size="20" />
<br/>
<br/>
<br/>
<br/>
<br/>
<button class="add" name="go" id="go">Go</button>
<a style="padding-right:2ex;"></a>
<a class="change">
    <button class="add" name="cancel" id="cancel">Cancel</button>
</a>
</div>
<br/>

jqueryhtmlcss

Answer №1

Here is a simple solution that should work for you. I made some modifications to the code by adding the closing div tag in the HTML section and removing the script tag from the JavaScript section.

$(document).ready(function(){
  $(".change").click(function(){
    $(".pass").slideToggle("slow");
    $(".pass1").slideToggle("slow");
  });
});
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<a class="change">Change Password</a>
<br />
<div class="pass">
<br />
<input type="password" class="textbox" placeholder="Current Password" name="old" id="old" size="20" />
<br />
<br />
<input type="password"  class="textbox" placeholder="New Password" name="new" id="new" size="20" />
<br />
<br />
<br />
<br />
<br />
<button class="add" name="go" id="go">Go</button>
<a style="padding-right:2ex;"></a>
<a class="change">
    <button class="add" name="cancel" id="cancel">Cancel</button>
</a>
</div>

Answer №2

To ensure your question remains useful even if jsFiddle goes down, always remember to include your code in the question.

If some of your code is not functioning as expected, it could be due to invalid HTML structure such as placing a button within an anchor tag. You should either style the anchor like a button without including the button element, or remove the anchor and assign the class directly to the button.

For example, input the following code into http://validator.w3.org/#validate_by_input to identify any errors:

<!DOCTYPE html>
<html>
<head>
<title>Test</title>
</head>
<body>
<a class="change"><button class="add" name="cancel" id="cancel">Cancel</button></a>
</body>
</html>

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

Storing values from a content script into textboxes using a button press: a simple guide

I am new to creating chrome extensions and currently utilizing a content script to fetch values. However, I am facing difficulty in loading these values into the popup.html. Here is the code snippet: popup.html <head> <script src ...

javascripthtmljsongoogle-chrome-extension

Changing the background image within a CSS class on an imported Vue component

Is there a way to dynamically change the background-image on a CSS class within an imported component? I have successfully installed 'vue-range-slider' and imported RangeSlider. The setup for the range-slider is as follows: <template> ...

cssvue.js

Stop jQuery from listening to events

Looking for a way to unbind just one listener that is listening on a shared emitter: // This is the emitter. It always fires in the a.b.c namespace but with different parameters $(document).trigger("a.b.c", { p: 1, p2: ... }); // Listener 1 $(d ...

eventstriggersevent-handlingjquery

Display a pop-up modal once the Http.get() function is executed

Currently, I'm invoking a function to obtain a response from an Http.get() request. This is my data retrieval function: getCharacterDetail(characterId: number) { return this.http.get(this.characterDetailApiUrl + characterId) .subscribe(r ...

htmlangularbootstrap-modalangular-ui-bootstrap

Reorder a specific character within an array using Javascript

I am a beginner in JavaScript and I'm hoping for some assistance. I have an HTML list with a select option, and I want to sort the list based on the selected character. Specifically, I would like to arrange the "Z" options first, followed by the "B" ...

javascripthtmljquerycss

Enable jQuery Readonly for a temporary unlock

I have a form with two input fields, a checkbox for completion, and a save button. When the checkbox is ticked and the save button is clicked, the input boxes are locked from further editing. Everything is functioning correctly. I would like to add a co ...

javascriptjqueryforms

Exploring ways to dynamically adjust the video source URL based on the time in an HTML video player

I'm working on creating a custom video player that changes the video source based on specific times. For example, at "12 AM" I want to play "video1.mp4," at "1 AM" I want to switch to "video2.mp4," and at "5 PM" I want to play "video3.mp4." As a begi ...

javascripthtmlvideo

Sending an array and an object simultaneously through a single ajax request

I previously inquired about passing an object to an ajax request for my rest service. Now I am wondering if it's possible to pass both an array and an object within a single ajax request. Any insights on this matter would be greatly valued. ...

javascriptjqueryajaxarraysobject

Splitting up website content dynamically across various pages

I am interested in developing a webpage that showcases different versions of my code in a tabular format, arranged in reverse chronological order. An example of how I want it to look is provided below. Number Release Date End Date Requires ...

htmlcssweb

Issues with Google Analytics Event Tracker Inconsistent Performance

I am experiencing an issue with a Google Analytics event that is triggered when a user clicks on a form submission button to enroll in a course. The event uses data attributes within the button element. What's puzzling is that the event seems to be w ...

javascriptjquerygoogle-analyticsuniversal-analytics

Having trouble with the "Like Button" feature in Tango with Django?

I attempted to follow a tutorial for adding a like button, but unfortunately the like count is not increasing after clicking it. The tutorial can be found at this link. Below is the code I have implemented: views.py def like_post(request): post ...

javascriptjquerypythonajaxdjango

Using Bootstrap columns within a PHP while loop

Encountering an issue https://i.sstatic.net/twePb.png and the code in question is shown below: <div class="col-md-4 text-center animate-box"> <a href="work-single.html" class="work" style="background-image: url(images/port ...

phpcsstwitter-bootstrapbootstrap-4

Sending a PHP variable to jQuery using AJAX

I am working on a project where my ajax function in jquery is calling a php file to interact with the database. However, the result of this operation can vary. Depending on whether it succeeded or not, I want to output a different message. Currently, I ha ...

phpjqueryajax

The SQL query in my PHP code is not functioning properly with the specified value

After attempting to organize data from my SQL table by username, I realized that this is based on the user connected to the website. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewpor ...

phphtmlmysqlsqlif-statement

Stop the content inside a div box from wrapping around the edges when using Bootstrap

Utilizing bootstrap to structure a webpage, I have organized three divs next to each other within a row. The widths of the divs are set as follows: 2 columns, 6 columns, and 4 columns in a 12 column layout. The middle div has a minimum width defined. As a ...

htmlcsstwitter-bootstrap

Need to adjust the layout of PHP form

Snippet of code: echo "<form method ='post' action='NextFile.cgi'>"; echo "<table>"; echo "<tr><td>Date: </td></td> <input type='date' name='Date' value =".$record['Date& ...

phphtmlformslayout

Connecting PHP modules for AJAX requests: a guide to linking files in PHP

If I have a file structure like the following: / index.php // contains database connection, login details, ... ... /someSubSite content_someSite.html // basic layout, text, forms, ... styles_someSite.css // styling for cont ...

phpjqueryajaxpdoconcept

Prevent redirection on buttons within ionic lists

THE ISSUE: I am facing an issue in my Ionic app where I am using the ion-list component. Each item in the list can be swiped to reveal a button (add/remove to favorites). Additionally, each item serves as a link to another page. The problem arises when ...

javascriptcssangularjsionic-framework

Easily validate your email with this straightforward form. Completely puzzled

Today's challenge is tackling the email validation form issue. While searching for a solution, I stumbled upon an interesting code snippet: http://jsfiddle.net/jquery4u/5rPmV/ dyingOverHere(); The code seems to work flawlessly in the demo provided. ...

jqueryhtmlvalidation

How can I use jQuery to navigate through list items using the up and down keys while maintaining the cursor position?

Hello everyone, I need help with a specific scenario: http://jsfiddle.net/cKf5b/ When you focus on the text field and use the UP and DOWN arrow keys, you can navigate through the list items below. This is the code snippet in question: //set cursor posit ...

jqueryiteration