Adjust the class of a div element located close to its ancestor using JavaScript

Question

Adjust the class of a div element located close to its ancestor using JavaScript

I'm trying to change the class of the element #sidePanel from .compact to .expanded dynamically in this code snippet:

<div id="sidePanel" class="compact"></div>
<div id="topbar">
    <div id="buttonContainer">
        <div id="button"></div>
    </div>
</div>

I've hit a roadblock and can't figure out how to apply the class to the correct <div>; currently, I'm only able to add the class to the top bar. Here's what I have tried:

$(document).ready(function(){
    $("#button").mouseover(function(){
    $("this").parent().eq(2).addClass(".expanded").removeClass(".compact");
    });
});

I also attempted this method:

$(document).ready(function(){
    $("#button").mouseover(function(){
    $("#sidepanel").addClass(".expanded").removeClass(".compact");
    });
});

javascript html css class

Answer 1

Answer №1

Your second example was almost there. When using $.addClass() and $.removeClass(), or mentioning classnames without selecting something, simply use the class name without the preceding .. It's important to note that JavaScript (and CSS) are case-sensitive, so $('#sidepanel') will not target #sidePanel - the cases must match.

    $("#button").mouseover(function() {
      $("#sidePanel").addClass("expanded").removeClass("compact");
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<style>.expanded {color: red;}</style>
<div id="sidePanel" class="compact">sidepanel</div>
<div id="topbar">
    <div id="buttonContainer">
        <div id="button">button</div>
    </div>
</div>

In your first example, $(this) is used to reference the current element in jQuery. If you enclose this in quotes, it becomes a string literal instead. To traverse up 2 levels with $.parent(), you should utilize $.parents() specifying the ID of the desired parent element, then apply $.prev() to select the previous element (#sidePanel). The correct approach to navigating the DOM would be as follows:

$("#button").mouseover(function() {
      $(this).parents('#topbar').prev().removeClass('compact').addClass('expanded');
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<style>.expanded {color: red;}</style>
<div id="sidePanel" class="compact">sidepanel</div>
<div id="topbar">
    <div id="buttonContainer">
        <div id="button">button</div>
    </div>
</div>

Answer 2

Your second example was almost there. When using $.addClass() and $.removeClass(), or mentioning classnames without selecting something, simply use the class name without the preceding .. It's important to note that JavaScript (and CSS) are case-sensitive, so $('#sidepanel') will not target #sidePanel - the cases must match.

    $("#button").mouseover(function() {
      $("#sidePanel").addClass("expanded").removeClass("compact");
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<style>.expanded {color: red;}</style>
<div id="sidePanel" class="compact">sidepanel</div>
<div id="topbar">
    <div id="buttonContainer">
        <div id="button">button</div>
    </div>
</div>

In your first example, $(this) is used to reference the current element in jQuery. If you enclose this in quotes, it becomes a string literal instead. To traverse up 2 levels with $.parent(), you should utilize $.parents() specifying the ID of the desired parent element, then apply $.prev() to select the previous element (#sidePanel). The correct approach to navigating the DOM would be as follows:

$("#button").mouseover(function() {
      $(this).parents('#topbar').prev().removeClass('compact').addClass('expanded');
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<style>.expanded {color: red;}</style>
<div id="sidePanel" class="compact">sidepanel</div>
<div id="topbar">
    <div id="buttonContainer">
        <div id="button">button</div>
    </div>
</div>

Answer 3

Answer №2

It seems the issue lies in using `$("#sidepanel")` instead of `$("#sidePanel")`

Check out the corrected code snippet below:

$(document).ready(function(){
    $("#button").on('mouseover', function(){
       $("#sidePanel").addClass("expanded").removeClass("compact");
    });
});

#topbar > div {
  width: 100px;
  height: 30px;
  background: #ccc;
  margin-top: 20px;
}

#sidePanel {
  width: 100%;
  height: 40px;
  background: #ccc;
}

#sidePanel.expanded {
  height: 100px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="sidePanel" class="compact"></div>
<div id="topbar">
    <div id="buttonContainer"></div>
    <div id="button"></div>
</div>

Answer 4

It seems the issue lies in using `$("#sidepanel")` instead of `$("#sidePanel")`

Check out the corrected code snippet below:

$(document).ready(function(){
    $("#button").on('mouseover', function(){
       $("#sidePanel").addClass("expanded").removeClass("compact");
    });
});

#topbar > div {
  width: 100px;
  height: 30px;
  background: #ccc;
  margin-top: 20px;
}

#sidePanel {
  width: 100%;
  height: 40px;
  background: #ccc;
}

#sidePanel.expanded {
  height: 100px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="sidePanel" class="compact"></div>
<div id="topbar">
    <div id="buttonContainer"></div>
    <div id="button"></div>
</div>

Answer 5

Answer №3

initially: the answer

$(document).ready(function()
{
    $("#button").mouseover(function()
    {
         // applying classes to specific elements
         $("#sidepanel").addClass("expanded").removeClass("compact");
    });
});

subsequently: the reason you nearly had it right at first

$(document).ready(function()
{
    $("#button").mouseover(function()
    {
        // using $(this) and correctly targeting classes
        $(this).parent().eq(2).addClass(".expanded").removeClass(".compact");
    });
});

Answer 6

initially: the answer

$(document).ready(function()
{
    $("#button").mouseover(function()
    {
         // applying classes to specific elements
         $("#sidepanel").addClass("expanded").removeClass("compact");
    });
});

subsequently: the reason you nearly had it right at first

$(document).ready(function()
{
    $("#button").mouseover(function()
    {
        // using $(this) and correctly targeting classes
        $(this).parent().eq(2).addClass(".expanded").removeClass(".compact");
    });
});

Adjust the class of a div element located close to its ancestor using JavaScript

Answer №1

Answer №2

It seems the issue lies in using `$("#sidepanel")` instead of `$("#sidePanel")`

Answer №3

Similar questions

Experiencing inaccuracies in Magento's item validation process when checking the quantity of items being added to the cart

Exploring the Concept of Dependency Injection in Angular 2

ways to change the font color style of a header element using css

Create a custom overlay for an image that is centered horizontally and does not have a fixed width

Sub-menu disappears upon resizing the screen

Creating separate files for establishing DB connection and writing Node.js queries is a recommended practice for organization

Easily validate your email with this straightforward form. Completely puzzled

Tips on arranging jQuery deferred objects in order?

Creating element modules in EJS

Embed a hyperlink within an informational passage

Creating a type definition for the createSelector function based on the useQuery result

When running the command `npx create-react-app client`, an error is thrown stating "Reading properties of undefined is not possible (reading 'isServer')."

Step-by-step guide on displaying SVG text on a DOM element using Angular 8

Assign a predetermined value to a dropdown list within a FormGroup

Adapting iFrame height to accommodate fluctuating content height in real time (details included)

Unable to execute JS script to navigate back to prior page with webdriver

What is the best way to ensure an image fits perfectly within a div container

The Firebase signInWithPopup functionality suddenly shuts down in a Next.js project

Creating HTML Textarea to Show Text with Newline and Spacing

Modifying the input field's name attribute while utilizing multiple datasets in typeahead.js

Adjust the class of a div element located close to its ancestor using JavaScript

Answer №1

Answer №2

It seems the issue lies in using $("#sidepanel") instead of $("#sidePanel")

Answer №3

Similar questions

Experiencing inaccuracies in Magento's item validation process when checking the quantity of items being added to the cart

Exploring the Concept of Dependency Injection in Angular 2

ways to change the font color style of a header element using css

Create a custom overlay for an image that is centered horizontally and does not have a fixed width

Sub-menu disappears upon resizing the screen

Creating separate files for establishing DB connection and writing Node.js queries is a recommended practice for organization

Easily validate your email with this straightforward form. Completely puzzled

Tips on arranging jQuery deferred objects in order?

Creating element modules in EJS

Embed a hyperlink within an informational passage

Creating a type definition for the createSelector function based on the useQuery result

When running the command `npx create-react-app client`, an error is thrown stating "Reading properties of undefined is not possible (reading 'isServer')."

Step-by-step guide on displaying SVG text on a DOM element using Angular 8

Assign a predetermined value to a dropdown list within a FormGroup

Adapting iFrame height to accommodate fluctuating content height in real time (details included)

Unable to execute JS script to navigate back to prior page with webdriver

What is the best way to ensure an image fits perfectly within a div container

The Firebase signInWithPopup functionality suddenly shuts down in a Next.js project

Creating HTML Textarea to Show Text with Newline and Spacing

Modifying the input field's name attribute while utilizing multiple datasets in typeahead.js

It seems the issue lies in using `$("#sidepanel")` instead of `$("#sidePanel")`