Add a new class to an element located in a separate div using JavaScript

$(document).ready(function() { 
   
    $('.btn').click(function() {
        $(this).parent().addClass('show');
    });
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
   <div class="row">
       <h4 id="txt1">Bookmark 1</h4>
       <a href="#" class="bokmarksave"> <img src="https://vignette.wikia.nocookie.net/secondlife/images/2/2b/Box.png/revision/latest?cb=20120226073326" class="hidden" width="100"></a>
      <p> Lorem Ipsum is simply dummy text of the printing and </p>
       <p class="page_num">Page 3 </p>
   </div>
   <div class="bookmark_icon"> 
      <a href="#"><img src="http://www.pngall.com/wp-content/uploads/2016/05/Click-Here-PNG-Images.png" width="100"class="btn"></a> 
   </div>
</div>

Upon clicking the image labeled "click here" with the class ".btn", my intention is to assign a class ".show" to the hidden image that resides within it. Although I attempted this using jQuery, I was only able to add the class to its parent element.

javascriptjqueryhtmlcss

Answer №1

Check out this solution:

$(this).closest('.box').find('.invisible').addClass('reveal');

For a more effective approach, consider adding data- attributes to the necessary elements in your HTML and utilizing them for navigation. For example:

$(this).closest('[data-container]').find('[data-image]').addClass('display');

Note: Following @sheriffderek's advice, it may be beneficial to remove the invisible class instead or in addition.

Answer №2

Here is the JS code snippet that you can utilize:

$('.btn').on('click', function() {

  $('.hidden').toggleClass('visible');

});

To target the image with the 'hidden' class, you can simply use $(".hidden").

Answer №3

The main container of the image is the anchor element. Shifting the styling from the button class to the anchor element will not affect its functionality.

Answer №4

For this particular scenario, you have the option to directly focus on the element that has been assigned the hidden class by utilizing the corresponding jQuery selector.

$(document).ready(function() { 
    $('.btn').click(function() {
       $('.hidden').toggleClass('show');
    });
});

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

Having trouble getting Fullcalendar to show up on my cordova app

Currently, I am in the process of building a mobile application using ionic and cordova. My goal is to incorporate a timetable system utilizing Fullcalendar and a PHP page that showcases MySQL data in JSON format. Despite my efforts, I am encountering diff ...

javascriptangularjscordovafullcalendar

Assess the HTML containing v-html injection

Is there a way to inject raw HTML using Vue, especially when the HTML contains Vue markup that needs to be evaluated? Consider the following example where HTML is rendered from a variable: <p v-html="markup"></p> { computed: { m ...

javascriptvue.jsvuejs2vue-component

Creating interactive avatars with Material UI and React to provide a dynamic user

I have developed a simple form validation application using react.js. Each user has a unique profile containing their personal information. I am looking to utilize the first letter of the user's name, for example Peter, where the letter "P" would be d ...

javascriptreactjsreduxmaterial-ui

Tips for aligning column components in a vertical position

My task is to align vertically the elements within multiple columns that include a headline, a description, and a button. By default, each element expands based on its content size https://i.stack.imgur.com/RJJP4.png However, I need all elements to be al ...

htmlcssalignmentcss-grid

The collapsible section expands upon loading the page

Trying to implement Disqus as a plugin on my test webpage, I created a collapsible section with a "Show comments" button. The idea was to hide the plugin by default and reveal it only when users click on "Show comments". Despite using the w3schools example ...

javascripthtmlcsscollapsable

``There was an attempt to install uniqid, however, I am unable to utilize its functionality

After installing the package uniqid from npm, I encountered an issue. Whenever I try to use the uniqid() function, it displays an error message stating "TypeError: _uniqid.uniqid is not a function". import { uniqid } from 'uniqid'; console.log( ...

javascriptnpm

Challenges encountered while making CSS adjustments on the Wordpress Twentyfourteen theme

I'm currently assisting a friend with making some final adjustments to their website. The site is built on Wordpress using the Twentyfourteen theme and can be found at centromariposa.no. Most of the modifications have been completed, but I'm fac ...

htmlcsswordpressheader

What is the best way to manage individual properties in React (Next.js)?

import React from 'react'; import { makeStyles} from '@material-ui/core/styles'; import {Select, MenuItem} from '@material-ui/core'; import useState from 'react'; const sample = () => { const data = [ {TITLE : & ...

javascriptreactjsnext.jsarray.prototype.map

Using jQuery to retrieve the content of a textarea and display it

I need help finding the right way to read and write to a Linux text file using JavaScript, jQuery, and PHP. Specifically, I want to retrieve the value from a textarea (#taFile) with jQuery ($("#taFile").val();) and send it via $.post to a PHP script that w ...

phpjavascriptjqueryfile

Utilizing AJAX to showcase an HTML popup

I am currently working on a project to create an HTML page that will display another HTML file in an alert when a button is pressed. However, I am facing an issue where the content is not being displayed as expected. <html> <head> ...

javascriptajax

Implementing image max-width and maintaining aspect ratios for responsiveness

Within the code snippet below and utilizing Bootstrap, a grid layout is defined with several .block components, each comprising an image and a title. The images are designed to be larger than the column size so that they can expand to full width for respon ...

javascriptjqueryhtmlcssimage

Using JavaScript, create a set of buttons within a div element and implement

$(document).ready(function() { $('#b1').click(function() { $('#uch').toggle("slow"); }); $('#b2').click(function() { $('#uch2').toggle("slow"); }) }) Although I'm not a program ...

javascriptjqueryhtmlcssfunction

Determine if a JSON object is void

Using jQuery, I am checking whether the object returned from an AJAX call is empty or not. In the first example, the AJAX call is successful and returns some data. console.log("obj before JSON parse:", response); var test = $.isEmptyObject(response); con ...

javascriptjqueryobject

What is the method for adding data to a table without utilizing an ID field?

Here is the code I have written: This table contains details of the candidates: <table id="candidates-table" class="table table-striped table-bordered"> <thead class="thead-dark"> <tr> <th scope="col">Candidate Picture ...

javascripthtml

My goal is to create text that is opaque against a backdrop of transparency

Is it feasible using CSS to create text with a transparent background while keeping the text opaque? I attempted the following method: p { position: absolute; background-color: blue; filter: alpha(opacity=60); opacity: 0.6; } span { color: b ...

htmlcss

The event listener attached to this model is failing to trigger when there are

The issue is that the "change" event is not being triggered in the code snippet below. var PageView = Backbone.View.extend({ el: $("body"), initialize: function(){ this.model.on("change:loading", this.loader, this); }, loader: func ...

javascriptbackbone.jsbackbone-eventsbackbone-model

Tips for integrating scroll-snap and jQuery's .scroll() function together

I'm facing challenges in integrating both of these elements into the same project. When I activate overflow: scroll, my jQuery function does not work as expected. However, if I deactivate it, then the jQuery works but the scroll-snap feature does not ...

jquerycssscroll

The menu bar becomes distorted when the page is zoomed out

Hey everyone, I could really use some assistance with my menus. Whenever I zoom out of the page, they become distorted. Here is the link to my website: https://dl.dropbox.com/u/22813136/Finding%20Nemo%20Inc/FNemo_front.htm# I tested the link on Internet E ...

htmlcss

Repeated Hover Effects on CSS Menu Icons

the webpage I need help with is (issue with general menu drop down) Hello I recently decided to enhance my menu by incorporating icons. I had successfully implemented a drop-down menu using only HTML and CSS, but when I attempted to add icons next to ea ...

htmlcssmenuiconsdrop-down-menu

Hover effect triggered upon mouse exit

As I delve into learning the basics of HTML and CSS, I came across the :hover property in CSS. This unique feature allows for a specific action to occur when the cursor hovers over an element, based on the code provided. Additionally, I discovered the tran ...

htmlcsshover