I am attempting to have a hidden DIV that is displayed based on a link clicked in the table and it shows the associated information about that specific link click. A different link click should show that same table, however different information that is associated only with that link click.
I have tried utilizing some jquery. And everything works, as in showing the div and hiding content behind it. But it only shows the first content, not the second if I click the second link.
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(
function() {
$(".accept").click(function() {
$(".hidden_div").show("slow");
$("#link").hide("slow");
$($this).show("slow");
});
$("#close_tab_button").click(function() {
$(".hidden_div").hide("slow");
$("#link").show("slow");
$($this).hide("slow");
});
});
</script>
</head>
<body>
<div id="link" <p>Link Table and DIV</p><br>
<div style="width: 100%; height: 100%">
<table>
<tr class="accept">
<td><a href="#" value="link_1">Link 1</td>
<td>Link 1 Description</td>
</tr>
<tr class="accept">
<td><a href="#" value="link_2">Link 2</td>
<td>Link 2 Description</td>
</tr>
</table>
</div>
</div>
<div class="hidden_div">
<div class="hidden_div_container">
<div class="hidden_div_close"><div id="close_tab"><a href=""><img id="close_tab_button" src="../Media/close_button.png" width="20"></a></div>
</div>
<div class="hidden_div_content">
<div id="link_1"> blah blah blah</div>
<div id="link_2"> blah blah blah blah</div>
</div>
</div>
</div>
@NewToJS 's fiddle seems to work, but if you want to display only the corresponding
div
to that link click. You should tryAnd add classes to your link row like
Here is a working Fiddle
Hope it helps.
EDIT: I changed
value
attribute ofanchor
toname
, so it can be accessed in jQuery. Here is the Fiddle when large number of options are present for links.