title: How to toggle a separate drop down beneath a grid of items using JQuery?
body: <p>Honestly, I'm at the end of my rope here because I am a total newbie at jquery and the like. My wording might be confusing, so let me explain. Picture a screen with multiple icons, and under these icons is a button. When clicked on, this button makes another box under this icon, of a different size, appear underneath. I've figured out how to make things toggle on click, more or less ... however the problem I'm having is that when I use this same button on the icon following it, it opens both the box under icon number one and the box from icon number two ... because the boxes are appearing in the same place, icon number two's box does not appear where i want it-right under icon number two. does that make sense ? What I want is for the box to appear in the same place relative to the icon - right under it. And I want to be able to add in as many icons ( and thus dropdown boxes ) as I'd like. Here is my code:</p>
  
  <h1>JQUERY</h1>
  
  <pre><code> &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"&gt;&lt;/script&gt;
  
  &lt;script src="https://npmcdn.com/isotope-layout@3.0/dist/isotope.pkgd.min.js"&gt;&lt;/script&gt;
  
  &lt;script&gt;
  $(function() {
  
  $(".name").click(function () {
      $(".drop").toggle("slow");
  });
  
      $('.grid').isotope({
    // options...
    itemSelector: '.grid-item',
    masonry: {
  columnWidth: 100
    }
  });
  
  });
  &lt;/script&gt;
  </code></pre>
  
  <h1>CSS</h1>
  
  <pre><code>.grid {
  margin: auto;
  margin-bottom: 50px;
  max-width: 600px;
  height: 100%;
  }
  
  .grid:after {
  display: block;
  clear: both;
  content: '';
  }
  
  .grid-item {
  position: relative;
  float: left;
  overflow: hidden;
  margin: 10px;
  width: 150px;
  height: 150px;
  }
  
  .grid-item img {
  height: 100px;
  width: 100px;
  }
  
  .icon {
  position: absolute;
  top: 0;
  right: 0;
    border: 5px solid #f3f3f3;
    height: 100px;
    width: 100px;
  }
  
  .name {
  background-color: #000;
  color:#fff;
  font-size: 8px;
  font-family: 'silkscreen';
  position: relative;
  margin-top: 115px;
  padding:3px;
  margin-left: 40px;
  border: none;
  text-align: left;
  width: 150px;
  }
  
  .name:focus {
  outline: 0;
  }
  
  .drop {
  height: 300px;
  width: 300px;
  position: absolute;
  left: 50px;
  top: 150px;
  font-size: 10px;
  display: none;
  }
  </code></pre>
  
  <h1>HTML</h1>
  
  <pre><code>&lt;body&gt;
  &lt;div class="grid"&gt;
    &lt;div class="grid-item"&gt;
      &lt;div class="icon"&gt;&lt;img src="http://i.imgur.com/aN7vtIU.png"&gt;&lt;/div&gt;
      &lt;button class="name"&gt;NAME&lt;/button&gt;
  &lt;div class="drop"&gt;DROPDOWN TEXT&lt;/div&gt;
    &lt;/div&gt;
  
  
    &lt;div class="grid-item"&gt;
      &lt;div class="icon"&gt;
        &lt;img src="http://i.imgur.com/aN7vtIU.png"&gt;
      &lt;/div&gt;
      &lt;button class="name"&gt;NAME&lt;/button&gt;
  &lt;div class="drop"&gt;DROPDOWN TEXT&lt;/div&gt;
    &lt;/div&gt;
  
  &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>Many thanks in advance! I've been trying to crack this one all day to no avail.</p>