JQuery clickable div to toggle content using Wildcard

Question

I am trying make groups of clickable DIVs ("card_ABC110-") to toggle display its respective content in the "product-Detail" area. The id is generated in a loop based on its category code (i.e. ABC, BBC,etc). So the current id group that starts with "card_ABC110-", may become "card_BBC221-*" next.

In order to get the exact id for toggling, I am not sure how to write a JQuery to extract partial id name using wildcard, plus using a category code that is a variable in the loop.

Here's my repeating HTML block:

<div class="product-cards">
    <div id="card_ABC110-AD" class="displayCardSelected">
        <a href="#cardDetail_ABC110-AD">ABC110-AD</a><br>
            ABC 110 (AD)
    </div>
    <div id="card_ABC110-BG" class="displayCard">
        <a href="#cardDetail_ABC110-BG">ABC110-BG</a><br>
            ABC 110 (BG)
    </div>
    <div id="card_ABC110-CE" class="displayCard">
        <a href="#cardDetail_ABC110-CE">ABC110-CE</a><br>
            ABC 110 (CE)
    </div>                                          
</div>

<div class="product-Detail">
    <div id="cardDetail_ABC110-AD" class="content" style="display: block;">
    Product ABC110-AD Info
    </div>  
    <div id="cardDetail_ABC110-BG" class="content" style="display: none;">
    Product ABC110-BG Info
    </div>
    <div id="cardDetail_ABC110-CE" class="content" style="display: none;">
    Product ABC110-CE Info
    </div>
</div>

Thanks!

Answer 1

$("a").click(function() {
  var elemId = $(this).attr('href')
  $('.product-Detail div').hide();
  $(elemId).show();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="product-cards">
  <div id="card_ABC110-AD" class="displayCardSelected">
    <a href="#cardDetail_ABC110-AD">ABC110-AD</a>
    <br>ABC 110 (AD)
  </div>
  <div id="card_ABC110-BG" class="displayCard">
    <a href="#cardDetail_ABC110-BG">ABC110-BG</a>
    <br>ABC 110 (BG)
  </div>
  <div id="card_ABC110-CE" class="displayCard">
    <a href="#cardDetail_ABC110-CE">ABC110-CE</a>
    <br>ABC 110 (CE)
  </div>
</div>

<div class="product-Detail">
  <div id="cardDetail_ABC110-AD" class="content" style="display: block;">
    Product ABC110-AD Info
  </div>
  <div id="cardDetail_ABC110-BG" class="content" style="display: none;">
    Product ABC110-BG Info
  </div>
  <div id="cardDetail_ABC110-CE" class="content" style="display: none;">
    Product ABC110-CE Info
  </div>
</div>