Tips on how to slideDown/Up only when a particular element does not contain the error class

In the code snippet below, I am able to slide the sibling div up and down.

However, I now want to restrict this behavior when the element within it is assigned an error class.

Javascript

$('input').on('focus blur', function(e){
        $(this).siblings('div')[e.type === 'focus' ? 'slideDown' : 'slideUp']('fast');
    })
    

HTML

<div class="input">
        <label>Name</label>
        <input type="text">
        <div>
            <div class="addition error">Input error 1</div>
        </div>
    </div>
    <div class="input">
        <label>Rest</label>
        <input type="text">
        <div>
            <div class="addition error">Input error 2</div>
        </div>
    </div>
    <div class="input">
        <label>Rest</label>
        <input type="text">
        <!-- Only this should be allowed to slide -->
        <div>
            <div class="addition">Input addition 1</div>
        </div>
    </div>
    

Answer №1

Make sure to verify the existence of the specified class within the event handler

$('input').on('focus blur', function(e){
    if ( $(this).closest('.input').find('.error').length === 0)
        $(this).siblings('div')[e.type === 'focus' ? 'slideDown' : 'slideUp']('fast');
});

Answer №2

What do you think about this solution?

$('input').on('focus blur', function(e){
    $(this).next('span').children().not('.error')[e.type === 'focus' ? 'slideDown' : 'slideUp']('fast');
})

Check out the FIDDLE demo

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

Adjust the alignment of the text to match the orientation of the image

When creating a layout with text and an image, I want them to be contained within a parent element that has a specified height, such as 100px. The text should adjust to the content, whether it's a short phrase or a lengthy paragraph, without a fixed ...

What is the best way to ensure a span takes up 100% of its parent li's width

Looking to create a span that spans 100% of its parent li element <ul> <li><a href="#">Home</a></li> <li><a href="#">About</a> <span> <a href="#">One</a> ...

Is it better to use multiple external style sheets?

Hello! I am looking to implement a pop-up login screen by integrating downloaded code. The issue I am facing is that the CSS file that accompanies it clashes with my current one. Is there a way to have a specific style sheet only affect certain div tags, ...

What is the functioning process of the angular method decorator?

The tutorial on creating custom decorators in Angular introduces a throttle decorator that utilizes the lodash throttle function. The implementation of this decorator can be seen below: import t from 'lodash.throttle'; export function throttle( ...

Retrieve the HTML value of an element in Vue.js by clicking on its adjacent element

Hey there, I'm currently working on a simple notes app and I've hit a roadblock with one particular feature. In my project, I have a card element with a delete button as a child. What I need to achieve is to check if the value of the .card-title ...

Struggling to display the preloader animation while waiting for the render.com server to start up (using the free tier web service)

My choice for deploying dynamic websites is render.com and I am currently using their free tier. The issue with this free service is that Render spins down the web service after 15 minutes of inactivity, resulting in a delay when it needs to spin back up u ...

Obtaining values from a text box using jQuery

I found this code online and I am looking to customize it to fit my specific requirements. I have two number boxes and I want the code to show me the sub total and total when I input numbers into them. However, the code only retrieves the value from the ...

Live update input text form using React framework

I am currently in the process of converting an excel spreadsheet into a web application. One challenge I am facing is how to dynamically update the "first-commission" value which is nested within a child element. How can I enable this multiplication and up ...

The color may not appear accurately when rendering events in FullCalendar

I am struggling to set a background color for the entire day on my calendar, instead of just for individual events. Currently, with the code I have written, only the events themselves are displaying with a colored background. Here is my view code: <scr ...

Decoding date formats using d3.js version 4

Currently diving into the world of coding with d3.js by working on my very first d3 mini project, following the Free Code Camp curriculum. The goal is to create a basic bar graph using this json file. However, I've hit a roadblock while trying to form ...

The like button seems to be malfunctioning and I'm not sure what the issue is

I've added the ability for users to like my posts, but it's not working as intended. Here's the code snippet I used: models.py class Post(models.Model): title = models.CharField(max_length=100) content = models.TextField(blank=Tru ...

MUI AutoComplete does not currently support the type number with maxLength restriction. What steps can be taken to resolve this issue?

Hey there, I'm encountering an issue where maxLength is not working on the AutoComplete component when the input type is set to number. Any suggestions on how to resolve this? export default function Select({ onChangeInput, label, name, ...

Customizing the appearance of the 'Submit' button compared to the <a href=""></a> button using CSS

I am experiencing some issues. Even though the CSS code for these two buttons is exactly the same, their appearance is different. I am unable to make the :hover or :active effects work either. My goal is to have the left 'input type="submit' but ...

Exploring the process of cycling through "Fetch" JSON data in React.js for a dynamic slider component after setting it to state

Still getting the hang of React, so please go easy on me! My main objective is to retrieve data from my personal JSON server and display it on a custom "Slider" component that I'm working on. Following a tutorial, I wanted to challenge myself by usi ...

Improving the visualization of large GPS tracks on Google Earth Plugin

I need to display GPS routes on Google Earth using the Google Earth API. However, with approximately 20,000 points per route, the performance is not optimal. The code I have implemented successfully draws the tracks but struggles with rendering time and tr ...

discord.js: Bot keeps sending duplicate embeds

I recently set up my discord bot to respond with a message when I enter a specific command, but I've run into an issue where it's sending the same embed twice. I've tried troubleshooting, but so far I haven't been able to pinpoint the c ...

Unable to subscribe due to the return value being an AnonymousSubject rather than an Observable

I am facing an issue in Angular 4 where I am attempting to retrieve details from a specific user when clicking on the 'user link profile'. However, I am unable to subscribe to my function because the return value of switchMap is AnonymousSubject ...

Transferring the state from a parent component to a child function

I'm having trouble passing a state from a component to a function. I was able to pass the state from Home to ListHome, but I'm struggling to continue passing it to a function within ListHome (Slider) because it's a function. Even after revi ...

An issue with MVC Ajax calls to an API resulting in a null model retrieval

I've been scratching my head for hours because I'm facing a strange issue with my API in one project, while everything is working fine in another project! The Problem: Here's the JavaScript code snippet: var data = new FormData(), ...

The functionality of the jQuery plugin for displaying a div element is ineffective unless an alert is placed in

I'm puzzled by this situation. I've been working on a jQuery plugin to retrieve data from my MongoDB database and display it back. Here's a snippet of the code... (function() { var result1; var image1; $.fn.showRecs = function() { var ...