Using jQuery to select an element by its class through its parent element

I am trying to create a wrapper div with a button and a hidden div inside. When the button is clicked, I want the div to be displayed. Since this structure appears multiple times on my webpage, I prefer not to use ids. Can you suggest the correct jQuery command for this scenario?

View js fiddle

HTML

<div class="wrap">

   <div class="button"> see more </div>
   <div class="moreInfos"> Lorem ipsum... </div>

</div>

CSS

.moreInfos{ display: none;}

jQuery

    $(".wrapp").on('click', '.button', function(){

    $(this).parent('.moreInfos').css('display', 'block');
});
javascriptjqueryhtmlcss

Answer №1

When the click event is attached to the button:

$(this).parent().find(".moreInfos").show();

If the click event is linked to the surrounding div:

$(this).find(".moreInfos").show();

Check out this demo on FIDDLE: http://jsfiddle.net/BeNdErR/acN6R/8/

Answer №2

So close! Try using parent().find()

$(this).parent().find('.moreInfos').css('display', 'block');

Quick note, you have a slight typo in the class name: instead of $(".wrapp"), it should be $(".wrap")

Also, watch out for typos like diplay, make sure it's actually display

Check out the jsFiddle DEMO

Answer №3

Consider utilizing the siblings method:

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

    $(this).siblings('.additionalInfo').toggle();
});

Example: http://jsfiddle.net/xyz123/9/

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

displaying a confirmation alert upon unchecking a checkbox using javascript

I am trying to implement a feature where a message saying "are you sure?" pops up when the user tries to uncheck a checkbox. If they choose "yes", then the checkbox should be unchecked, and if they choose "no" it should remain checked. I'm new to Java ...

javascripthtml

I am currently facing an issue in my Node.js environment specifically with the 'oracledb' package

I am encountering an issue with the oracledb modules. Fortunately, I was able to successfully install oracledb. When I run the command like this, -> npm install oracledb njsOracle.cpp njsPool.cpp njsConnection.cpp njsResul ...

javascriptnode.jsnode-oracledb

React NextJS CSS - Setting the section's height to 100% of the parent's height results in taking up 100% of the page's height

I've encountered an issue while transferring my project to NextJS from Create-React-App. In NextJS, setting the height of a section to 100% is causing it to take up the entire page height instead of adjusting for the header and footer elements. I nee ...

cssreactjsnext.js

Selecting either "THREE.NearestFilter" or "THREE.LinearFilter" will result in the black plane

During my experimentation with the THREE.js library, I encountered a notification stating: THREE.WebGLRenderer: Texture is not power of two. Texture.minFilter should be set to THREE.NearestFilter or THREE.LinearFilter. To address this issue, I made the ...

javascriptthree.js

Tracking the progress of reading position using Jquery within an article

Here is an example of a reading progress indicator where the width increases as you scroll down the page: http://jsfiddle.net/SnJXQ/61/ We want the progress bar width to start increasing when the article content div reaches the end of the article c ...

javascriptjqueryhtmlcssscroll

JavaScript Transforming an Array into an Object

After working with node and redis for a while, I've encountered an issue. When using hgetall in redis, it returns an object. { uid: '6203453597', first_name: 'Name', last_name: 'Surname', gender: 'male& ...

javascriptnode.jsredis

Steps for confirming the chosen selection in a dropdown menu on Internet Explorer

I am encountering a challenge in verifying the selection of an option in a dropdown menu. Within my application, there is a dropdown with 10 different options. When I choose option 5, I need to confirm that it was indeed selected. It's straightforwar ...

javahtmlcssseleniumselenium-webdriver

$_POST is unable to read POST parameters when using AJAX

I've been facing an issue with sending data to my PHP script. Interestingly, everything works smoothly when using POSTMAN and the results are displayed correctly. However, when attempting to send the data through AJAX in my HTML project, the PHP scrip ...

phphtmlajax

Incorporate a directive dynamically within a separate directive

Introducing the table-div directive, which is responsible for rendering both the header and body of a table. Each row within tbody has the option to incorporate additional functionality through a custom directive that can display data linked to its parent ...

javascriptangularjsangularjs-directive

Mastering the implementation of owl-carousel in React.js

I'm currently working on a project that involves utilizing the react framework. My intention is to incorporate the owl-carousel, however, I've encountered issues as it fails to function properly. The following error keeps popping up: OwlCarousel ...

javascriptjqueryreactjswebowl-carousel

Accordion animation lag in Chrome caused by Bootstrap 4

I've noticed a significant lag in animation when using the accordion feature on my website. Surprisingly, this issue only seems to occur in Chrome, as other browsers like Edge, Firefox, and even the Android Samsung Browser handle it fine. I attempted ...

jqueryhtmlcssanimationbootstrap-4

What could be causing the malfunction of the dropdown menu attached to my button?

I've been working on setting up a simple button in my Angular application that should display a dropdown menu with various options when clicked. I copied and pasted some Bootstrap template code, made some modifications to match the style of my app, bu ...

htmlcssangularbootstrap-4frontend

Select a key value from an array and categorize the items based on that value

I'm trying to organize an array of objects by a specific value and use that value as a key for the rest of the object values. Here's an example: { 0: {prize: "Foo", first_name: "John", last_name: "Smith"}, 1: {pr ...

javascriptarraysjsontypescriptlodash

The overflow scroll feature is activated, causing the background to appear greyed out, yet the

I've been struggling for hours to achieve this layout: Check out the code example here html, body { height: 100%; overflow-y: hidden; overflow-x: hidden; margin: 0px; padding: 0px; } .MyNavbar { height: 30px; background-color: red; } ...

htmlcss

What causes the failure of making an ajax call tied to a class upon loading when dealing with multiple elements?

I can see the attachment in the console, but for some reason, the ajax call never gets triggered. This snippet of HTML code is what I'm using to implement the ajax call: <tr> <td>Sitename1</td> <td class="ajax-delsit ...

javascriptjqueryajax

Guide to obscuring all instances of a particular subsequence within a <p> tag

I am currently developing a project in Angular that showcases short texts. Within these texts, I aim to blur out specific substrings every time they appear. For example: Tomorrow I will have to go to London. Tomorrow is the day it will happen. My only hop ...

javascripthtmlangularreplacesubstring

Assign a function in one class to be equivalent to a function in a different class

What is causing this issue and how should it be resolved? class A { constructor() { console.log('constructin A') } public someMethod = (x: string) => { console.log(x) } } class B { private myA: A constructor ...

javascripttypescript

How can I generate two directory-based slider instances?

Update: Finally, I discovered the root of the problem within my stylesheet. Despite both sliders being loaded, they were overlapping due to their positioning, causing the second slider (or any additional ones) to remain hidden. I've been striving to ...

javascriptphpjquery

Extra horizontal spacing in CSS

Struggling to eliminate the excess horizontal space on my HTML/CSS page. Any thoughts on what might be causing this? Appreciate any help! ...

htmlcssspaceextra

What is the process for extracting Html sub elements from parent elements?

While using my HTML editor, specifically the Kendo Editor, to generate bullets and indent them for sub-bullets, I noticed that the HTML output wasn't as expected. <ul> <li>Focusing on lifetime income replacement <ul>< ...

c#html