If the div is devoid of content, then remove the class

<div class="slider">content goes here</div>
<div id="slider-2" class="active inactive">also some content here</div>

<script type="text/javascript">
    function checkEmpty( element ){
        return !$.trim(element.html())
    }
    if (checkEmpty($('#slider'))) {
        $("#slider-2").removeClass("inactive");
        $("#slider-2").addClass("active");
    } else {
        $("#slider-2").removeClass("active");
        $("#slider-2").addClass("inactive");
    }

</script>

I have a requirement to display a div based on the content of another div. I believe using add and remove classes would be an effective solution.

javascriptjqueryhtmlcss

Answer №1

Consider making this adjustment:

if (isEmpty($('#slider'))) {

Change it to:

if (isEmpty($('.slider'))) {

It seems like slider is classified in your HTML, not as an ID

You also seem to have some extra {}.

JSFiddle Link

Answer №2

This is a more straightforward approach with improved clarity, eliminating the need for using isEmpty():

<script type="text/javascript>
    var $carousel = $('.carousel');
    var $carousel2 = $('#carousel-2');
    $carousel2
        .toggleClass("deactivate", !!$.trim($carousel.html()))
        .toggleClass("activate", !$.trim($carousel.html()));
</script>

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

I initially had ngRoute set up in my app, but decided to make the switch to ui-router. However, now it seems like

I currently have an application set up using express and angular. I decided to transition to ui-router in order to utilize multiple views, but it doesn't appear to be functioning as expected. app.js app.use(express.static(path.join(__dirname, ' ...

javascriptnode.jsangularjsexpressangular-ui

Tips on sending form data, including a file, to Ajax using the onclick() method

My Modal Includes a Form: <div class="modal fade bs-example-modal-lg" id="myMODALTWO" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" id="form-content"> <div class="modal-dialog modal-lg" role="document"> ...

javascriptphpajaxbootstrap-modal

Wordpress functionality for filtering Ajax posts using radio buttons

I am in the process of creating an Ajax post filter system using radio buttons to allow users to filter through multiple categories. Below is the code I have implemented: Front-end form: <form id="filter"> <?php if( ...

javascriptphpjqueryajaxwordpress

The assigned type does not match the type 'IntrinsicAttributes & { children?: ReactNode; }'. This property is not assignable

I have been struggling to resolve this issue, but unfortunately, I have not found a successful solution yet. The error message I am encountering is: Type '{ mailData: mailSendProps; }' is causing an issue as it is not compatible with type &apos ...

javascriptreactjstypescriptnext.js

When using React Final Form, the onBlur event can sometimes hinder the

What is the reason that validation does not work when an onBlur event is added, as shown in the example below? <Field name="firstName" validate={required}> {({ input, meta }) => ( <div> <label>First Name</label& ...

javascriptreactjsreact-final-form

Loading a series of images in advance using jQuery

I have a series of frames in an animation, with file names like: frame-1.jpg, frame-2.jpg, and I have a total of 400 images. My goal is to preload all 400 images before the animation begins. Usually, when preloading images, I use the following method: v ...

javascriptjquery

React js code to create a position ranking table

Currently, I am in the process of developing a web application using Reactjs with a ranking table managed by Firebase. However, I have encountered a question: Is it possible to dynamically change the position numbers after sorting the table based on the am ...

javascriptnode.jsreactjsfirebasegoogle-cloud-firestore

The webpage automatically reloads when triggering a jQuery ajax request to an ActionResult

When I try to add a comment on my page, it refreshes the entire page. What am I missing? I want the comments on the Details page to update dynamically without having to refresh the whole page. I am attempting to achieve something similar to how comments ...

jqueryajaxasp.net-mvcasp.net-mvc-partialview

CSS positioning problems thoroughly elucidated

I'm facing two issues that I can't seem to resolve. My goal is to recreate a design similar to the one found at https://i.sstatic.net/XfPqm.jpg. My first issue is with adjusting the box in the header to stay aligned next to my headline tags. The ...

htmlcssdivision

Alpine declined the action of toggling a list with x-show

My goal is to create a toggleable list of items using Alpine & x-show. I want the list to be visible when the page loads and allow the user to toggle it as needed. Although the button works correctly and the JavaScript is set up properly, the list itself d ...

javascriptbootstrap-5alpine.js

Guide to turning off the Facebook iframe page plugin

I am facing a challenge with embedding a facebook iframe on my website. I want to disable it once the screen width reaches a specific point, but I am struggling to make the iframe disappear properly. Here is how I have attempted to implement this: window.o ...

javascripthtmlcss

Scroll upwards within a nested div

Is there a way to smoothly animate the content of the inner div upward without requiring any button clicks? Also, is there a method to trigger an event once the animation has completed? ...

javascriptjqueryhtmlcssanimation

Toggle visibility of an Angular 4 component based on the current route

Hello there, I'm facing an issue and not sure if it's possible to resolve. Essentially, I am looking to display a component only when the route matches a certain condition, and hide another component when the route matches a different condition. ...

javascriptangulartypescript

What is the best way to implement two for loops in a Django template to handle sending and receiving chat messages efficiently?

I am attempting to implement sending and receiving messages in a Django template using a for loop. Here is my views function: @login_required def message_form(request, id, slug, user_id): user2 = request.user user_id = user_id user = get_objec ...

javascriptdjangodjango-templates

Avoid adding any empty entries to the list using jQuery

I have implemented a code to prevent any blank entries from being added to my list, and it seems to be working fine. However, I can't shake the feeling that there might be a better way to achieve this. Even though it functions correctly, it doesn&apos ...

javascriptjquery

PHP and JavaScript both offer methods for escaping variables that are written in the syntax ${HOST}

How can I safely handle variables from the database like ${HOST}? This issue arises when code is posted within <pre><code> tags. If left as it is, an error occurs: Uncaught ReferenceError: HOST is not defined. In this specific context, usin ...

javascriptphp

Tips for preventing elements from wrapping in a lengthy list and using scrollbars in Firefox

When dealing with a lengthy flex list, the items (buttons) should wrap when there is not enough space available (using flex-wrap). However, an issue arises in Firefox where the items are wrapped once a scrollbar appears, even if there is ample space. In c ...

htmlcssfirefox

Troubleshooting problem with Webpack and TypeScript (ts-loader)

Seeking help to configure SolidJS with Webpack and ts-loader. Encountering an issue with return functions. What specific settings are needed in the loader to resolve this problem? import { render } from "solid-js/web"; const App = () => { ...

javascripttypescriptwebpackts-loadersolid-js

Multiplication cannot be performed on operands of type 'NoneType'

Hello everyone, I am attempting to calculate the unit price and quantity from this table using the following model: class Marketers(models.Model): category =models.ForeignKey(Category, on_delete=models.CASCADE, null=True) name =models.CharField(max ...

javascripthtmlcssdjangobootstrap-4

Using regular expressions, eliminate the element from a JSON object that contains a specified property

Imagine I have a string representing a JSON object. It could be invalid, with some params that will be replaced by another system (e.g. %param%). The task at hand is to remove all objects with a known propertyName equal to "true" using regex. { "someT ...

javascriptjsonregex