Toggle the visibility of an element by clicking a button

I have a table structured as follows: 

<tr>
    <td class="title">Title</td>
    <td class="body">Body</td>
    <td class="any">Any text</td>
</tr>
<tr>
    <td class="title">Title</td>
    <td class="body">Body</td>
    <td class="any">Any text</td>
</tr>
<tr>
    <td class="title">Title</td>
    <td class="body">Body</td>
    <td class="any">Any text</td>
</tr>

To toggle the visibility of the "body" td, I am currently using this script:

$('.title').append("<button class='moredrop'>&darr;</button>");
$(".moredrop").click(function(){
    $(".body").toggle();

However, it toggles all td elements in the table. My goal is to only hide/show the specific td like demonstrated below:

     $("tr").toggle(
    function(){$(".body",this).css("display","block");},
    function(){$(".body",this).css("display","none");});

Is there any way to achieve this functionality on button click?

javascriptjquerycsshtml-table

Answer №1

Locate the parent TR element and access the designated .body section

$('.moredrop').on('click', function () {
    $(this).closest('tr').find('.body').toggle();
});

Answer №2

Give this a shot:

$(document).ready(function(){
    $('.title').append("<button class='moredrop'>&darr;</button>");
    $('tr').on('click','.moredrop',function(){
            $(this).parents('tr').children('.body').toggle();
    });
});

Check out the live example.

Answer №3

$('.moredrop').on('click', function(){
    $('td.body').slideToggle();
});

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

What is the process for changing the output paper size to A4 in React Native (expo android)?

Using React Native to develop an Android app for billing purposes, I encountered an issue with the output paper size being 216mmX279mm instead of the standard PDF size of 210mmX297mm. Utilizing expo-print and printToFileAsync from expo, I aim to achieve a ...

javascriptandroidhtmlcssreact-native

Do I need to utilize getStaticProps along with JSON imports in Next.js?

Is it necessary to use getStaticProps in order to render static data from a JSON or typescript file, or can the data be imported without using getStaticProps? The documentation I read didn't provide a clear answer. projects.tsx const projects: [ { ...

javascriptnext.js

What is the correct way to properly insert a display none attribute

I'm experiencing some alignment issues with the images in my slideshow. I used this example as a reference to create my slide: https://www.w3schools.com/w3css/tryit.asp?filename=tryw3css_slideshow_dots When clicking on the next image, it seems to mo ...

javascripthtmlcss

What are some successful methods for displaying extensive data lists to users in a meaningful and organized manner?

From dropdown lists to hover menus with fly-out options, there are various ways to present content on a website... I am managing a comprehensive list of U.S. military bases across the world for my website. This list includes both active and inactive bases ...

jquerycsslistmenu

What is the reason behind the def.reject code in setTimeout not executing when the sendToSocket operation is successful?

What causes the setTimeout function inside the send method to not run if the sendToSocket operation is successful? this.send = function(type, body) { var def = Promise.defer(); try{ sendToSocket({...}); setTimeout(function() { // ...

javascriptnode.js

Tips for adjusting background-image position after page scale increase

I have a div block with the specified styles: .promo-blocks .first-appointment { background-image: url("../images/41d000_e4b9806a75b61053f1d6d4ccab8903df.png_srz_980_345_85_22_0.50_1.20_0 (2).00_png_srz"); position: relative; background-c ...

htmlcss

What causes the shift in the position of the div element?

I have been struggling with a problem in my code. Whenever I hover over this element, it rotates as intended but it also changes its position. I can't figure out why this is happening. Can someone please help me debug this? I would greatly appreciate ...

htmlcsstransition

Tips for creating a dropdown that autocompletes similar to the one found in Google Chrome

Looking to create a unique custom drop-down autocomplete suggestion list using HTML and CSS, similar to Chrome's design (shown below). In my attempts to achieve this, I utilized an absolutely positioned table beneath the input element. I applied vert ...

htmlcss

Storing account information in a .env file can be a more secure option compared to storing it in a client

Working on a basic nodejs application using express for file processing operations. Planning to package the final app with pkg. I need to implement a login system and one time account creation. The app will launch a browser tab running a vuejs UI app. Cons ...

javascriptnode.jsvue.jsdotenvnedb

Automatically Dismissing a Bootstrap Alert After a Set Number of Seconds

Having some trouble closing a Bootstrap alert automatically on my new site built using the Bootstrap Framework. The issue arises when trying to close the alert after a certain amount of time. On the main page of the site, there is a modal login form. When ...

javascriptphpjqueryhtmltwitter-bootstrap

Unable to modify the bar's color using the .css document

Below is the JavaScript code being used: var marginEducation = {top: 20, right: 30, bottom: 40, left: 300}, widthEducation = 1000, heightEducation = 460; const svgEducation = d3.select("#Education") .append("svg") .attr("w ...

javascripthtmlcssd3.jsgraph

How come the link function of my directive isn't being triggered?

I'm encountering a strange issue with this directive: hpDsat.directive('ngElementReady', [function() { return { restrict: "A", link: function($scope, $element, $attributes) { // put watche ...

javascripthtmlangularjsangularjs-directiveangularjs-scope

Controlling numerous websockets using React

I am currently developing a single-page application using React.js with a JSON RPC 2.0 backend API that relies on websockets. Managing multiple websocket connections simultaneously across different React.js components has been a challenge. Initially, I th ...

javascriptreactjstypescriptwebsocketsingle-page-application

Is there a way to manually add route resolve data to a controller without using automatic injection?

Two routes in my application share a controller, but one route requires data to be resolved before the view loads while the other does not. Here is an example of the routing segments: ... when('/users', { controller: 'UsersCtrl', ...

javascriptangularjs

Preventing Duplicate Random Numbers in Vue 3 and JavaScript: A Guide

I've been working on creating a function that can iterate through an array of objects with names and IDs, randomize the array, and then return one filtered item to slots.value. The current spin function successfully loops through the randomized object ...

javascriptarraysvue.jsfor-loopvuejs3

Stripping out only the position attribute using jQuery

I have implemented a code with the following characteristics: The navigation items' texts are hidden behind certain Divs, which I refer to as Navigation Divs. When the mouse hovers over these pixels (navigation Divs), the text that is behind the ...

javascriptjquerycss

Using JavaScript, include a child class into a parent class

I am facing an issue with my class hierarchy, which includes classes like Parent, Child1 (which extends Parent), and Child2. Parent contains an array of child items, but importing Child1 and Child2 into Parent leads to circular dependencies and errors whe ...

javascript

Attempting to create an auto-suggestion tool that can process and accept multiple input values, filtering out only those that begin with a designated character

I've been working on implementing an auto-suggestion feature that displays suggestions with partial matches or values within the input box. The goal is for it to only provide suggestions that begin with a specific character, like the "@" symbol. Fo ...

javascriptjqueryhtml

What steps are necessary to add a Contact Us form to my HTML website?

Currently, I am searching for a way to add a "Contact Us" section to my website that is completely HTML-based. I believe the best approach would involve using a PHP script to handle sending emails from a form on the Contact Us page, but I am not familiar ...

phpjavascriptjqueryhtml

Exploring the differences between translate3d and matrix in CSS 3 animations

Lately, my projects have demanded seamless transitions and animations. We've made the shift from using Javascript to CSS animations almost entirely. I've discovered that utilizing translate3d produces incredibly smooth animations on various devi ...

csscss-animationscss-transformstranslate3d