I am currently working on a project where I have a button icon that I want to change upon clicking it. I am using the following jQuery code:
<script>
$('div[id^="module-tab-"]').click(function(){
$(this).next('.hi').slideToggle();
});
</sript>
Can someone please guide me on how to change the left arrow cursor to a right arrow cursor in jQuery? Any help with the code would be appreciated.
If you want to switch between two images, a great method is to utilize the toggleClass function in jQuery. Simply assign each image to a different class and then use toggleClass to change between the classes when the image is clicked.
Check out a live demonstration here
$('div[id^="module-tab-"]').click(function(){
$(this).next('.hi').toggleClass("left-image right-image");
});
Check out this demo to see your problem in action.
I've created an active class that changes the background image. Simply toggling the active class will meet your needs.
Below is the CSS code:
.tab {
background: url('https://i.sstatic.net/dzs9m.png') no-repeat;
padding-left:50px;
}
.tab.active {
background: url('https://i.sstatic.net/euD9p.png') no-repeat;
}
.hi {
display:none
}
And here's the JavaScript code:
(function(){
$('div[id^="module-tab-"]').click(function(){
$(this).toggleClass("active").next('.hi').slideToggle();
});
}());
hello @Jeetendra Chauhan thank you for your input, but I am still not able to achieve what I desire. Here is another snippet of HTML code that I have been working on:
<div id="tab-module-row" style="display:none;">
div class="module-row module-tab module-details pull-right">
<b>Details:</b>
<span class="grey-line"></span>
<div id="module-tab-details" class="hello-sugg">
<img src="images/icons/icon-orangeboxarrow-right.png" class="right"> Some error is here <span class="pull-right">
<img src="images/icons/icon-chat.png" data-toggle="modal" data-target="#commentBox">
<img src="images/icons/icon-alert.png"> </span>
</div>
<div class="hi" id="hi1" style="width: 95%;display:none;">
<span class="grey-line"></span>
<b>Suggested steps:</b><br>
<ol>
<li>Step one to resolve the issue. Try this one first!</li>
<li>Second Step to resolve the issue. Try this one first!</li>
</ol><br>
<img src="images/icons/icon-charcoalarrow.png"> <a href="" data-toggle="modal" data-target="#commentBox">Add Comments</a><br>
<img src="images/icons/icon-charcoalarrow.png"> <a href="" data-toggle="modal" data-target="#fetchData">Update / Test Data</a><br> <br>
</div>
<span class="grey-line"></span> </div>
</div>
I have integrated Vue into my Wordpress theme, but I am facing an issue with the router when setting mode: 'history'. The site goes blank and even after trying to configure the .htaccess file, nothing seems to work. My project is located in the V ...
Where is the optimal placement for JavaScript code in order to execute a plugin after rendering is complete? <html> <head> <script src='https://cdnjs.cloudflare.com/ajax/libs/es6-promise/3.2.2/es6-promise.min.js'></script ...
I'm currently using @angular/animations module to animate HTML objects and I want to move an object when a button is clicked. For example: * The object initially has top: 800px, left: 800px * Clicking the 'W' button should move the obje ...
I am facing a challenge in updating the style of a specific element after ng-repeat has finished changing the DOM. The directive I have implemented for triggering ng-repeat works perfectly fine when adding items to the model, but it does not get called whe ...
After realizing it was easier than expected, I simply consolidated all columns into one row and the responsiveness now works perfectly. Thank you to everyone who helped. I am utilizing Bootstrap 4 grid system to structure 3 rows with columns. For lg brea ...
This is the code snippet I am working with (you can view the fiddle here): <div class='container'> <div class='hero-unit'> <h2>Welcome</h2> <p>Please log in</p> <div i ...
In my project structure, I have a 'js' folder containing the jQuery function and a PHP script. The HTML file is located in a separate folder. Currently, the setup looks like this: /server/js/global.js /server/js/script.php /server/html/stude ...
I'm currently utilizing Nodejs in my project. One issue I am facing is with a promise that is requested after a delay. It seems like my Middleware is unable to catch the error, however, uncaughtException is able to handle it. router.all('/incas ...
Is there a way to reset the ng-model value in the controller after an ngChange event without needing to use a directive? <div ng-repeat="i in items"> <!-- Some DOM comes here --> <select ng-model="i.avail" ng-change="changeAvail(i. ...
I am facing an issue with the password while everything else seems to be working fine. I am using a schema and getting an error, but it could be a problem in my functions because I hashed the password. I am unable to identify what's causing the issue. ...
I recently came across a post discussing how to change default error messages in jQuery validation. You can check it out here. After reading the post, I decided to modify my js code by adding the following lines to jquer.validate.min.js: jQuery.extend(jQ ...
Is it feasible to enable my users to save content in a MuI dialog by pressing CTRL + S? ...
I need to send a JSON request using the Postman app, utilizing the POST method to retrieve data. My boss, who is overseeing my training, assigned me this task. I've scoured the web for a week but haven't found a solution yet. Initially, I sugges ...
Here is an object I am working with: rightGroups: [ { name: "Admin Rights", id: 1, rights: [ { caption: 'Manage Rights', name: 'reports', ...
I am having trouble with two functions in my app that create different HTML structures. I want to close the info button event when the menu_div button is clicked, and vice versa. Can anyone provide some help? const menu_div = document.createElement("butt ...
When it comes to my node js projects, I usually opt for using a text.json file and requiring it rather than hardcoding static text directly into my code. Here's an example: JSON file { "greet": "Hello world" } var text = require('./text.json ...
When I use the vanilla XMLHttpRequest() object to make a CORS request, it works perfectly fine. However, when I try using the jQuery.get() function, it tells me that cross-origin requests are not allowed. This is confusing because $.get() is built on top o ...
Encountering a curious issue here. I have multiple mongoose models, and oddly enough, only one of them is throwing this error: TypeError: Schema is not a constructor This situation strikes me as quite odd because all my other schemas are functioning prop ...
Struggling to send a form to a PHP file upon submission and retrieving the value without having to reload the page. It was working smoothly for some time but now it just won't cooperate. I have multiple pages with similar functionality, where 2 work p ...
I'm looking to place an image on the left side of each h1 tag. I've been attempting to utilize the before pseudo element for this task. The issue arises when there is no content, causing the before pseudo element to overlap with the h1 tag. How ...