Home/ Questions/Q 3750494
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-19T08:56:34+00:00

I have four images and four divs. When image 1 is clicked, div 1

  • 0

I have four images and four divs. When image 1 is clicked, div 1 should appear and all others should be hidden, etc. Each div has the same class name.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<title>Untitled 1</title>
<script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script>
<script type="text/javascript">
    $(window).load(function(){
        $(".DataList").hide();
        $(".DataList:first").show();    
        $(".trigger").click(function() {
            $(".DataList").hide();
            $(".DataList").eq($(this).index()).show();
        });
    });
</script>
</head>

<body>

<div id="LinkBar">
    <table border="0">
        <tr>
            <td>
               <a class="trigger" href="#"><img src="Package1.gif" /></a> </td>
            <td>
               <a class="trigger" href="#"><img src="Package2.gif" /></a> </td>
        </tr>
    </table>
</div>

<div class="DataList">
    <div class="Description">
        <ul class="Package">
            <li>Item 1</li>
            <li>Item 2</li>
            <li>Item 3</li>
        </ul>
        <div class="Hidden">
            1 </div>
    </div>
</div>

<div class="DataList">
    <div class="Description">
        <ul class="Package">
            <li>Item 1</li>
            <li>Item 2</li>
            <li>Item 3</li>
        </ul>
        <div class="Hidden">
            2 </div>
    </div>
</div>

</body>

</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Edited, based on your full markup:

    $(".DataList").hide();
$(".DataList:first").show();
$(".trigger").click(function() {
    $(".DataList").hide();
    $(".DataList").eq($(this).closest("td").index()).show();
});

    The above solution relies on the cell index in which the .trigger links appear.

    Try it here

    See:

    • 0