jQuery slideToggle moves all bootstrap columns

Question

Right now all columns are moving, but I want it so that only the one which is clicked should slide down.

I already tried some solutions which I found here on stackoverflow, but none of them worked. I think its because the horizontal scroll, but I'm not sure.

$(".col-sm-2").click(function() {
  $(this).find(".col-sm-12").slideToggle();
});

.row {
  overflow-x: auto;
  white-space: nowrap;
}

.row>.col-sm-2 {
  display: inline-block;
  float: none;
}


/* Decorations */

.col-sm-2 {
    color: #fff;
    font-size: 48px;
    padding-bottom: 20px;
    padding-top: 18px;
}

.col-sm-2:nth-child(3n+1) {
  background: #c69;
}

.col-sm-2:nth-child(3n+2) {
  background: #9c6;
}

.col-sm-2:nth-child(3n+3) {
  background: #69c;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script 
src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <div class="row">
      <div class="col-sm-2">
        <div class="col-sm-12" style="display: none">
          <p>1</p>
        </div>
      </div>
      <div class="col-sm-2">
        <div class="col-sm-12" style="display: none">
          <p>2</p>
        </div>
      </div>
      <div class="col-sm-2">
        <div class="col-sm-12" style="display: none">
          <p>3</p>
        </div>
      </div>
      <div class="col-sm-2">
        <div class="col-sm-12" style="display: none">
          <p>4</p>
        </div>
      </div>
      <div class="col-sm-2">
        <div class="col-sm-12" style="display: none">
          <p>5</p>
        </div>
      </div>
      <div class="col-sm-2">
        <div class="col-sm-12" style="display: none">
          <p>6</p>
        </div>
      </div>
      <div class="col-sm-2">
        <div class="col-sm-12" style="display: none">
          <p>7</p>
        </div>
      </div>
    </div>

Here is my jsfiddle: http://jsfiddle.net/xpvt214o/502168/

Answer 1

In this case I would recommend you use dispay: flex; on your parent element and align-self: flex-start;on each of its child elements.

Per the MDN web docs,

self-start

Aligns the items to be flush with the edge of the alignment container corresponding to the item's start side in the cross axis.

$(".col-sm-2").click(function() {
  $(this).find(".col-sm-12").slideToggle();
});

.row {
  overflow-x: auto;
  white-space: nowrap;
  display: flex;
}

.row>.col-sm-2 {
  display: inline-block;
  float: none;
}

.col-sm-2 {
  color: #fff;
  font-size: 48px;
  padding-bottom: 20px;
  padding-top: 18px;
  align-self: flex-start;
}

.col-sm-2:nth-child(3n+1) {
  background: #c69;
}

.col-sm-2:nth-child(3n+2) {
  background: #9c6;
}

.col-sm-2:nth-child(3n+3) {
  background: #69c;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" type="text/css"/>

<div class="row">
  <div class="col-sm-2">
    <div class="col-sm-12" style="display: none">
      <p>1</p>
    </div>
  </div>
  <div class="col-sm-2">
    <div class="col-sm-12" style="display: none">
      <p>2</p>
    </div>
  </div>
  <div class="col-sm-2">
    <div class="col-sm-12" style="display: none">
      <p>3</p>
    </div>
  </div>
  <div class="col-sm-2">
    <div class="col-sm-12" style="display: none">
      <p>4</p>
    </div>
  </div>
  <div class="col-sm-2">
    <div class="col-sm-12" style="display: none">
      <p>5</p>
    </div>
  </div>
  <div class="col-sm-2">
    <div class="col-sm-12" style="display: none">
      <p>6</p>
    </div>
  </div>
  <div class="col-sm-2">
    <div class="col-sm-12" style="display: none">
      <p>7</p>
    </div>
  </div>
</div>