TechQA.

Linked Questions

Popular Questions

How to show the same DIV container and different content based on the link click

Asked by At

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>

javascript jquery html css
Original Q&A

2 Answers

0
Jazib Jafri On

@NewToJS 's fiddle seems to work, but if you want to display only the corresponding div to that link click. You should try

$(".accept").click(function() {
    $(".hidden_div").show("slow");
    $("#link").hide("slow");
    if($(this).hasClass("link_1")){
        $("#link_1").show("slow");
    }
    if($(this).hasClass("link_2")){
        $("#link_2").show("slow");
    }
});

And add classes to your link row like

<tr class="accept link_1">
<tr class="accept link_2">

Here is a working Fiddle

Hope it helps.

EDIT: I changed value attribute of anchor to name, so it can be accessed in jQuery. Here is the Fiddle when large number of options are present for links.

0
Community On

you can create a global object to put value:description. Eg.

const data = [{link_1:'LINK 1 Description'},{link_2: 'LINK 2 Description'}];

When you click in row, with JS you get current link and other variable.

In your view, create a generic structure to show a Description and with JS, appendToHtml value

document.getElementById('#whatever').innetHTML = data.currentValue

Related Questions