Issue with Showing Hidden Section using Jquery - Try it Out on JSfiddle!

I'm struggling with a script that should reveal a hidden <div> when a checkbox is clicked. Despite my best efforts, I can't seem to get the section to display correctly. The snippet of code in question looks like this...

If you'd like to take a look, I've set up a JSFiddle. Simply scroll down to where it says "add spouse" to find the hidden section.

 $.appicant.applicants();
 $('#spouse').live('click', function () {
     alert('s');
     if ($(this).is(':checked')) {
         $('.spouse-content').slideDown();
     } else {
         $('.spouse-content').slideUp();
     }
 });
javascriptjqueryhtmlcss

Answer №1

It is recommended to utilize on() instead of live() method as the latter is deprecated in jQuery versions 1.7 and later, and completely removed in 1.9+

$.appicant.applicants();
 $('#spouse').on('click', function () {
     alert('s');
     if ($(this).is(':checked')) {
         $('.spouse-content').slideDown();
     } else {
         $('.spouse-content').slideUp();
     }
 });

Fiddle Demo

According to @KevinJantzer, there seems to be an issue with the line $.appicant.applicants();

Answer №2

Check out the new version of your demonstration:

Demo Fix

To resolve the issue, I replaced live with on. Additionally, I had to disable the following line:

$.appicant.applicants();

This change prevented any JavaScript errors from occurring.

Answer №3

live() has been deprecated starting from jQuery version 1.9. As you are using jQuery 1.10.1, it is recommended to switch to on() instead:

$('#spouse').on('click', function () {
    alert('s');
    if ($(this).is(':checked')) {
        $('.spouse-content').slideDown();
    } else {
        $('.spouse-content').slideUp();
    }
});

Additionally, make sure to include the applicants plugin to avoid encountering this error:

Cannot call method 'applicants' of undefined

Answer №4

    Ensure that the code $.applicant.applicants(); is not throwing any errors. Once fixed, your remaining code should function properly. Remember to replace deprecated "live" with "on".

This issue needs to be resolved in order for the rest of your code to work flawlessly.

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

npm does not accommodate the current version of Node.js (vX.X.X)

Today, I am attempting to install the most recent version of Node.js (13.12.0) along with npm. However, I have encountered an issue because the latest npm version (6.14.4) does not support this Node.js version, resulting in the following error message: np ...

javascriptnode.jsnpmchocolatey

Using Angular Material for creating tabs with identical content

I am using material with angularjs and have encountered an issue with my two md-tabs. Both tabs have a similar DOM structure, but contain some unique content. Instead of duplicating the common DOM twice, I am looking for an alternative solution. Is it poss ...

javascriptangularjsangular-material

classes_1.Individual is not a callable

I am facing some difficulties with imports and exports in my self-made TypeScript project. Within the "classes" folder, I have individual files for each class that export them. To simplify usage in code, I created an "index.ts" file that imports all class ...

javascriptnode.jstypescript

When you click on the input field, a file manager window will open. You can then select a file and the URL of the selected file will be automatically added to the

I need assistance with customizing the code to open the flmngr window and add the URL of the selected file to the input field when onclick. window.onFlmngrAndImgPenLoaded = function() { var elBtn = document.getElementById("btn"); // Style bu ...

javascripthtmljquery

CSS Only Sidebar Dropdown (without using Bootstrap)

I want to create a sidebar with collapsible dropdown options and smooth animations using only pure css/js/html/jquery, without relying on bootstrap like I did in the past. Here is an example of what I created previously with bootstrap: Now, as a challenge ...

javascripthtmljquerycss

How can you modify the styling of a single child element within a grandparent container and then revert it back to its original state

My goal is for #homeContainer to occupy the entire width of the page, but a higher-level element is restricting its width and margin. Below you can see the DOM structure. By removing margin: 0 auto, I am able to achieve full width. How can I specifically ...

javascripthtmlcss

requiring a page reload for an AJAX-loaded webpage

Encountering an issue with a third-party integration on a website specifically designed for iPads, where multiple pages are loaded using AJAX. Upon visiting the page for the first time, the expected functionality is missing and only appears after refreshi ...

javascriptjqueryajaxipadonload

I attempted to access $.cookie but it appears to be malfunctioning

I found cookie.js on GitHub at https://github.com/carhartl/jquery-cookie and incorporated it into my code like this: $(document).ready(function(){ $("#abc").click(function() { var a = $("#text").val(); var b = $("#password").val(); alert("asdasdsd ...

jquery

Exploring the Magic of Class Variable Destructuring in React

Is there a simpler method to break down a prop object and assign them to variables of the same name in the class? I am familiar with ({ first: this.first, second: this.second, } = props) however, it can get complicated when dealing with numerous variable ...

javascriptreactjstypescript

Is there a way to modify the space bar and enter key functionality exclusively for the third button, rather than applying it to all buttons?

https://jsfiddle.net/ffkwgddL/ In the code, I have three buttons named first-button, second-button, and third-button. If the first-button (introduction) is clicked and then the space bar is pressed, it functions as if the first button was clicked again. H ...

javascriptjqueryhtmlcsstwitter-bootstrap

Showing the output variable from node.js on a canvas

Is it possible to display the output of my node.js program, which consists of a series of points (x,y), on canvas without a browser? I came across this module that could potentially help with displaying the points: (https://www.npmjs.com/package/canvas) ...

javascriptnode.jscanvas

Why does my loading screen appear again when I submit the form and refresh the page?

I've been working on setting up a login page and was able to create a loading screen that fades away once the page has finished loading. $(window).on("load",function(){ setTimeout(function() { $(".lo ...

javascriptphphtmljqueryforms

Enhancing Website Performance with Vue.js 2.0 Lazy Loading

I'm attempting to implement Lazy Loading for my components in Vue.js 2.0 (within a Laravel 5.3 project). As per the guidelines, I should proceed like this: Vue.use(VueRouter); const Forum = resolve => require(['./Components/Forum/Forum.vue& ...

javascriptlaravellazy-loadingvue.jschunks

Utilize the Vue-Chartjs plugin registration for a specific chart component only

I am currently working with a chart component in Vue 3 using the composition API. My goal is to incorporate the datalabels plugin into this specific chart only. Upon attempting to register the plugin outside of the chart's data or options, I noticed ...

javascriptvue.jschart.js

Reset TinyMCE 4 using AJAX

I have integrated TinyMCE into a Foundation Reveal modal using Ajax. The issue I am facing is that TinyMCE works perfectly the first time the modal loads, but if I close the modal and reopen it, TinyMCE fails to initialize. Interestingly, other scripts li ...

jqueryajaxtinymce-4

Using Regular Expressions as an Alternative to Conditionals

My knowledge of RegEx is limited, but I'm trying to make the following expression work with Javascript/Typescript: /^({)?(?(1)|(\()?)[0-9A-F]{8}(-)?([0-9A-F]{4}(?(3)-)){3}[0-9A-F]{12}(?(1)}|(?(2)\)))$/i This RegEx is used to check if a str ...

javascriptregextypescript

Locate the unique identifier of the window responsible for triggering alerts

Can anyone provide a solution for identifying the ID of the Internet Explorer window that triggers alert boxes? I suspect it is related to the document or window itself. This can be achieved using basic HTML or jQuery code. I attempted the following appr ...

javascriptjquery

The input box is not properly filled with the complete string using protractor sendKeys

[HTTP] --> POST /wd/hub/session/ffcd7072-9f96-45cb-a61d-ec53fc696b56/element/0.9513211246393813-32/value {"value":["1","0","0","0","1"],"text":"10001"} My JavaScript code snippet: this.zipcode = element(by.model('personalInfo.zipcode')); t ...

javascriptseleniumprotractor

What is the best way to style only numbers using CSS in jQuery?

Here is some HTML code that needs styling: <tr> <td>Test</td> <td>324</td> </tr> The default CSS setting is text-align:left However, I am looking to apply text-align:center to any <td> element that contai ...

javascriptjquerycss

How to create a slideToggle effect for nested ul and li elements

Initially, everything was working fine until I put it through the W3C validator. After fixing the errors, now it's not functioning as expected. I have created a jsfiddle The setup involves nested ul elements being used as dropdowns, with headers tha ...

jquerycssnestedhtml-lists