Ways to display or hide particular div in a table

Coding Example:-

'<td>' + item.Message + ' <input type="button" class="btn btn-info" id="' + item.LogID + '" onclick="Clicked(this);" value="View More"  /> <p> ' + item.FormattedMessage + ' </p></td></tr>'

This code snippet represents a button inside a table cell.

Functional Jquery Code:-

 function Clicked(e)
        {
            var SelectedID = e.id;
            $("p").toggle();
        };

When the button is clicked, only the selected column should be displayed while rest should be hidden. However, currently all columns are either shown or hidden on button click.

javascriptjqueryhtmlcssasp.net-mvc

Answer №1

Along with balachandar's response, if you wish to initially conceal the p tag, you can achieve this by using display:none for the p tag.

function Clicked(e)
    {
        var SelectedID = e.id;
        
        $("#"+SelectedID).next("p").toggle(function(){
        
          var btn_text =  $("#"+SelectedID).val();
  
          if(btn_text == "View More"){
    
             $("#"+SelectedID).val("Hide");
          }else{
           $("$("#"+SelectedID).val("View More")
          }
        
        
        });
       
     
    
    };
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="button" class="btn btn-info" id="myID" onclick="Clicked(this)" value="View More"  /> <p style="display:none"> Some Text you want to in future </p>

Answer №2

Give this code a shot

 function Clicked(e)
    {
        var SelectedID = e.id;
        $("#"+SelectedID).next("p").toggle();
    };

I trust this will be beneficial to you.

Answer №3

To locate the element based on its id and then locate the p element within it, you can follow this approach:

 function Clicked(e)
    {
        var SelectedID = e.id;
        $("#" + SelectedID).find("p").toggle();
    };

Alternatively, you can simply utilize this:

 function Clicked(e)
    {
        $(this).find("p").toggle();
    };

Answer №4

function Pressed(event)
    {
        var elementID = event.id;
        $("#" + elementID).toggle();
    };

Answer №5

Here is a simple function you can utilize:

function Clicked(element)
{
    var id = element.id;
    $("#" + id).toggle();
};

Answer №6

With this function, you can select all p elements within a td element in your table and hide them. Then, when a button with the same ID is clicked, it shows only that particular p element.

function ButtonClicked(button) {
    var buttonID = button.id;
    $("td p").hide();
    $("#" + buttonID).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

Guide on acquiring the Tololtip Tail in your Menu's inventory

HTML <div id="MyForm"> <a> <img src="ImageMenu.png" /></a> <ul> <li> <a class="selected" href="#">One</a> </li> <li> <a href="#">Two& ...

javascriptjqueryhtmlcsstooltip

Navigating between functions in JavaScriptBy switching from one function to another

I'm facing an issue with two functions where I am trying to return a value from the second function. Unfortunately, I keep getting an alert with undefined. Any ideas on what might be the problem with my code? function funcA(){ var test = funcB("h ...

javascriptjquery

Issue with Audio TAG functionality in Internet Explorer 9

I am facing an issue with my jQuery code that generates an audio tag. The code works perfectly in Firefox and Chrome, but it is not functioning properly in IE9. Here is the code snippet: $(document).ready(function () { var source = "/TTS.aspx?tts=" + ...

jqueryhtml

How can you ensure that it selects a random number to retrieve items from an array?

I am experiencing an issue with some code I wrote. Instead of displaying a random object from the array as intended, it is showing the random number used to try and display an object. <html> <body> <h1>HTML random objects< ...

javascripthtml

Angular Testing - issue with promise returning unexpected results

I'm having trouble with populating vm.chartData in my HomeCtrl. Even though I've mocked data to it in the beforeEach() function, when I console.log(scope.vm.chartData), it returns undefined. However, other scope variables like graphLoading are pr ...

javascriptangularjstestingjasminekarma-runner

What is the process for including paths as parameters in jvectormap?

Can you assist me with a simple question regarding jvectormaps? How can I pass paths as parameters using this plugin? $('#worldMap').vectorMap({ map: 'world_mill_en', backgroundColor: "transparent", ...

javascriptjqueryjvectormap

Steps to customize a CSS file within node_modules

Is there a way to make changes to a CSS file in the "node_modules" dependency without them being overwritten when I run npm install? I want to keep the modifications I've made to the node module files. ...

javascriptcssnode.jsnpmnode-modules

I am currently running a recursive loop to fetch data from MongoDB. However, the Express.js function runs through the entire script before the data can be successfully returned

Can someone assist me with setting up my Express route to handle the return of data from a recursive function that involves promises and fetching MongoDB data? Currently, my route is executing immediately without sending the data back to the client. The da ...

javascriptmongodbexpress

Is it possible to retrieve browser history from Google Chrome using Node.js on a Windows operating system?

I'm currently developing a personal electron app for managing my lifestyle. One of the key features is controlling my daily internet browsing through the app. I am aiming to integrate my Chrome history into the electron app. Could someone recommend a ...

javascriptc#node.jswindowsgoogle-chrome

How to obliterate an array element in JavaScript

Hello everyone, I am faced with an array of objects that I need to destructure. Below is a snippet from the array: [ { "Area": "Werk Produktivität [%] - Target", "Jan": 86.21397507374327, "Feb": 86.057 ...

javascriptarraysjsonobject

Toggling a div updates the content of a different div

I am looking to make the content within <div class="tcw-content"> dynamically change when a different div is clicked. I have little experience with Ajax, so I'm wondering if there are alternative ways to accomplish this using JS/CSS. If anyone h ...

javascripthtmlcssajax

Unique CSS Styles for Border Radius

Is there a way to achieve rounded corners on only the top left and top right, but not on the bottom two corners of a div using a specific value for -webkit-border-radius? ...

htmlcss

Using JQuery to create animations with fadeIn and fadeOut effects is a great way to

As a complete newbie taking my first steps in front-end development, I spent most of my day trying to work out an animation function but couldn't quite get it right. Below are the snippets of HTML, CSS, and JavaScript codes: <!DOCTYPE html> < ...

javascriptjqueryhtmlcssanimation

CSS - borders are overlapping with one another

Encountering an issue where the bottom border is overlapping the right border on the same element. Here's a visual representation of the problem: The green right border's bottom is appearing distorted due to the presence of the gray border at t ...

htmlcss

`ASP.net MVC3 Form with CheckBox List`

Looking for a solution on how to display a list of Employees with checkboxes for selection on a SuperVisor Form. After clicking Save, I want to save supervisor information along with the selected employees' IDs to the database. What is the recommend ...

asp.netasp.net-mvcasp.net-mvc-3

What is the most effective way to programmatically select checkboxes based on array values in

Trying to keep it concise :) Working on a project that generates multiple pages of thumbnail images with checkboxes. The total thumbnails vary and are sorted into 1000 item html pages, called by a parent html page via iframe. Goal is for users to check che ...

javascripthtmlarrayscheckbox

It appears that the $http request is causing an endless $digest Loop

Looking to determine a user's status in my AngularJS app in order to display specific functionality content, here is the HTML code in my view: <span ng-show="authService.isSuperUser()">You are a Super User</span> To check if the user has ...

javascriptangularjs

Angular CSS: ng-style applied to only one side, the other remains unaffected

I am working on an Angular application that requires a split screen with two halves, each displaying the same array values. The width and height values are set using a service and accessed by a controller. The style is applied using ng-style in the DOM. Ho ...

javascripthtmlcssangularjsng-style

Divide the JSON data into separate sections by creating individual div elements for each part

I have successfully set up the code to extract and display JSON data from an external source. The JSON data structure is as follows: JSON structure: { "title": "National bullets", "source": "Dataloft", "data ...

htmljqueryjson

Restoring the position of the <Rect/> element after dragging in a React + Konva application

In my attempt to make a Rect component snap back to its original position using ReactKonva, I defined a Toolbar class with certain dimensions and initial positions for the rectangle. However, after dragging the rectangle and attempting to reset its positio ...

javascriptreactjskonvajs