How to show hide specific div in table?

Question

HTML:-

'<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 is button in table

Jquery:-

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

In this When i click on button i want to show selected id column only and hide rest columns. But when i click on button it shows all column or hides all column

Answer 1

Try this below code

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

Hope this will help you.

Answer 2

In addition to balachandar answer. if you want to hide p tag initially then use display:none for 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 3

You can select the element by its id and find the p element inside:

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

Or just use this :

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

Answer 4

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

Answer 5

You can use:

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

Answer 6

This function picks all p inside td of your table and hides all of them, then it shows only the one with the same ID as the button.

function Clicked(e) {
    var SelectedID = e.id;
    $("td p").hide();
    $("#" + SelectedID).show();
};