Javascript揭示隐藏的DIV

Question

我一直在编写代码，以便在单击项目时显示更多详细信息。到目前为止，我已经想出了这个。

HTML：

<script>

    $(document).ready(function(){

        $('.toggleTarget').hide();

        $(".products-item")
        .click(function() {

            var id = $(this).attr('data-number');
            var toggleTargetId = $(this).attr('data-target');
            var toggleTarget = $(document.getElementById(toggleTargetId));

            if ( id.val() === "0" ) {
                toggleTarget.show("slow", "swing");
                id.val(1)
            } else {
                toggleTarget.hide("slow", "swing");
                id.val(0)
            }

        });

    });

</script>



<div id="info-1-btn" class="products-item" data-target="info-1" data-number="0">

         <div class="products-item-img buoy-1"></div><br />

         <div class="products-item-text">Sign Float</div>

         <div class="products-item-details">

             <div id="info-1" class="products-item-details toggleTarget">

                 <table class="products-item-details-table" cellpadding="15px">

                        <tr>

                            <th>Sizes:</th>
                            <th>Material:</th>

                        </tr>

                        <tr>

                            <td>500mm</td>
                            <td>*MATERIAL*</td>

                        </tr>

                  </table>

               </div>

           </div>

     </div>

CSS：

.products-item {
    height: auto;
    width: 300px;

    display: inline-block;

    margin: 10px;

    padding-top: 20px;
    padding-left: 20px;
    padding-right: 20px;

    border: solid 2px #f5f5f5;
    border-radius: 10px;

    background-color: #f5f5f5;

    cursor: pointer;

    transition: all 0.25s ease-in-out;
}
.products-item-img {
    height: auto;
    width: auto;

    display: inline-block;

    border-radius: 140px;

    transition: all 0.25s ease-in-out;

    z-index: 10;
}
.products-item-text {
    width: auto;
    height: auto;

    bottom: 0px;
    left: 0px;

    margin: 10px;

    padding: 15px;

    display: inline-block;

    font-family: Comfortaa;
    font-size: 14px;

    text-align: center;

    border-radius: 5px;

    color: #333;
    background-color: transparent;

    transition: all 0.25s ease-in-out;
}
.products-item:hover {
    background-color: #bae9ff;

    border: solid 2px #bae9ff;
}
.products-item:hover .products-item-text {
    color: #000;

    border-radius: 5px;
}
.products-item-details-table {
    background-color: transparent;

    width: 100%;

    font-family: Comfortaa;
    font-size: 14px;

    padding-top: 20px;
    padding-bottom: 20px;

    table-layout: fixed;

    white-space: nowrap;

    /*border-collapse: collapse; REMOVE BORDER GAPPING */
}
.products-item-details-table tr {
    background-color: #fff;

    width: 600px;
}
.products-item-details-table th {
    background-color: #ccc;
    color: #fff;

    font-size: 15px;
    font-weight: normal;

    width: auto;

    border: none;

    text-align: center;
}
.products-item-details-table td {
    background-color: #fff;

    width: 200px;

    text-align: left;
}

当我点击选定的products-item-details div时，我希望透露products-item。

如果您需要更多信息，请告诉我们。

谢谢。