在网格中向下滑动div的底部，而不滑动整个行。

Question

I'm working with a grid structure using CSS. Within the grid there are panels within each panel there is a button and at the bottom there is a hidden div.

When the button is clicked the hidden div slides down (using jQuery slideToggle). There are multiple panels in the rows and columns.

I have an issue that when the button is clicked to slide down then the entire row slides down - not just the row directly below!

How do I get it to only slide down the panel below it, rather than the whole next row?

I have created a JSFiddle: http://jsfiddle.net/xpvt214o/873688/

Here is the code I have been trying to get working!

Thanks!

HTML

<div id="expand-box">
  <div class="wrapper">
    <div id="handlebars-sandbox">

      <div class="panel">
      <div class="title">HELLO WORLD</div>
      <div class="button"><button>OPEN</button></div>
      <div id='reveal-container'> BOTTOM</div>
      </div>

      <div class="panel">
      <div class="title">HELLO WORLD</div>
      <div class="button"><button>OPEN</button></div>
      <div id='reveal-container'> BOTTOM</div>
      </div>

      <div class="panel">
      <div class="title">HELLO WORLD</div>
      <div class="button"><button>OPEN</button></div>
      <div id='reveal-container'> BOTTOM</div>
      </div>

       <div class="panel">
      <div class="title">HELLO WORLD</div>
      <div class="button"><button>OPEN</button></div>
      <div id='reveal-container'> BOTTOM</div>
      </div>

    </div>  
  </div>
</div>

CSS

.panel {
  border: 1px solid black; 
  margin-left: 5px;
  margin-right: 5px; 
  text-align: center;}

#reveal-container {
  display:none;
  height: 30px}

#expand-box {
    width: 65%;
    margin: 0 auto;}

.wrapper {
  margin: 0 auto;
  width: 100%;}

.title{
  height: 80px}

#handlebars-sandbox {
  padding: 8px;
  display: grid;
  margin: 0 auto;
  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr)) ;
  grid-auto-rows: minmax(100px, auto);
  grid-gap: 20px;
  margin-top: 20px
}

@media (max-width: 1100px) {
  .wrapper {
    grid-template-columns: 1fr;
  }

  #handlebars-sandbox {
    width: 100%;
    grid-template-columns: repeat(auto-fill, minmax(360px, 1fr) ) ;
    grid-auto-rows: minmax(300px, auto);
  }
}

@supports (display: grid) {
  .wrapper > * {
    width: auto;
    margin: 0;
  }
}

JS

/* REVEALS REVEAL CONTAINER*/
$(document).on('click', '.button', function () {
  $(this).parents('.panel').find('#reveal-container').slideToggle()

});

Answer 1

All what you need to do is change id='reaveal-container' to class. ID has to be unique. It can perform once on the page. When I changed it on to class, everything works perfectly.

 /* REVEALS REVEAL CONTAINER*/ $(document).on('click', '.button', function () { $(this).parents('.panel').find('.reveal-container').slideToggle() }); 

 .panel { border: 1px solid black; margin-left: 5px; margin-right: 5px; text-align: center;} .reveal-container { display:none; height: 30px} #expand-box { width: 65%; margin: 0 auto;} .wrapper { margin: 0 auto; width: 100%;} .title{ height: 80px} #handlebars-sandbox { padding: 8px; display: grid; margin: 0 auto; grid-template-columns: repeat(auto-fill, minmax(350px, 1fr)) ; grid-auto-rows: minmax(100px, auto); grid-gap: 20px; margin-top: 20px } @media (max-width: 1100px) { .wrapper { grid-template-columns: 1fr; } #handlebars-sandbox { width: 100%; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr) ) ; grid-auto-rows: minmax(300px, auto); } } @supports (display: grid) { .wrapper > * { width: auto; margin: 0; } } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="expand-box"> <div class="wrapper"> <div id="handlebars-sandbox"> <div class="panel"> <div class="title">HELLO WORLD</div> <div class="button"><button>OPEN</button></div> <div class='reveal-container'> BOTTOM</div> </div> <div class="panel"> <div class="title">HELLO WORLD</div> <div class="button"><button>OPEN</button></div> <div class='reveal-container'> BOTTOM</div> </div> <div class="panel"> <div class="title">HELLO WORLD</div> <div class="button"><button>OPEN</button></div> <div class='reveal-container'> BOTTOM</div> </div> <div class="panel"> <div class="title">HELLO WORLD</div> <div class="button"><button>OPEN</button></div> <div class='reveal-container'> BOTTOM</div> </div> </div> </div> </div> 

Answer 2

Carsten Løvbo Andersen is right, ID'should be unique, an switched to classes, it can cause errors. What I think you are confusing for the next row opening is not the the ID or jQuery, but really the fault of the CSS you are using.

#handlebars-sandbox {
  padding: 8px;
  display: grid;
  margin: 0 auto;
  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr)) ;
  grid-auto-rows: minmax(100px, auto);
  grid-gap: 20px;
  margin-top: 20px
}

You are confusing revealing with boarders and margins, its not revealing the next one its just that the margin and borders of each panel are linked to each other because you are using display: grid; on #handlebars-sandbox, it kinda like having inline-block.

What I suggest is a putting a min-height: 130px; under .panel or just get rid of grid and do it with dispaly:block which it be a little harder.