title: Javascript to reveal hidden DIV
body: <p>I have been working on a code to display more details when an item is clicked. So far I have come up with this.</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;script&gt;
  
      $(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)
              }
  
          });
  
      });
  
  &lt;/script&gt;
  
  
  
  &lt;div id="info-1-btn" class="products-item" data-target="info-1" data-number="0"&gt;
  
           &lt;div class="products-item-img buoy-1"&gt;&lt;/div&gt;&lt;br /&gt;
  
           &lt;div class="products-item-text"&gt;Sign Float&lt;/div&gt;
  
           &lt;div class="products-item-details"&gt;
  
               &lt;div id="info-1" class="products-item-details toggleTarget"&gt;
  
                   &lt;table class="products-item-details-table" cellpadding="15px"&gt;
  
                          &lt;tr&gt;
  
                              &lt;th&gt;Sizes:&lt;/th&gt;
                              &lt;th&gt;Material:&lt;/th&gt;
  
                          &lt;/tr&gt;
  
                          &lt;tr&gt;
  
                              &lt;td&gt;500mm&lt;/td&gt;
                              &lt;td&gt;*MATERIAL*&lt;/td&gt;
  
                          &lt;/tr&gt;
  
                    &lt;/table&gt;
  
                 &lt;/div&gt;
  
             &lt;/div&gt;
  
       &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.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;
  }
  </code></pre>
  
  <p>I am looking to reveal <code>products-item-details</code> when I click on the selected <code>products-item</code> div.</p>
  
  <p>If you require more information, please let me know.</p>
  
  <p>Thank you.</p>