Expand only the column which is clicked

user_7458849 0
Viewed 440

I have the following layout of three columns and I'm using bootstrap. When I click on a column each column next to that one gets expanded too. For some reason I cant get the snippet code to show it here so I attached an image of what I'm getting. enter image description here

If possible I would like to change this behavior. I would like to click on one column and expand only that one and not the other columns. Any ideas on how I can implement that?

$('li.submenu a[href="#"]').click(
  function(e) {
    e.preventDefault();
    $(this).toggleClass('open');
    $(this).next().toggle();
    $('.col-md-4').toggleClass('flex-last');
    return false;
  });
ul.ul_submenu {
  display: none;
}

.submenu a i {
  transition: ease .3s;
}

.submenu a.open i {
  transform: rotate(-90deg);
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://kit.fontawesome.com/a076d05399.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container-fluid">
  <div class="row">
    <div class="col-md-4">
      <ul>
        <li class="submenu" id="atag"><a href="#">Apparel & Accessories #1 <i class="fas fa-caret-down" style="color: grey;"></i></a>
          <ul class="ul_submenu">
            <li class="submenu"><a href="#">Clothing <i class="fas fa-caret-down" style="color: grey;"></i></a>
              <ul class="ul_submenu">
                <li class="submenu"><a href="#">Men <i class="fas fa-caret-down" style="color: grey;"></i></a>
                  <ul class="ul_submenu">
                    <li class="submenu">blabla</li>
                  </ul>
                </li>
              </ul>
            </li>
          </ul>
        </li>
      </ul>
    </div>
       <div class="col-md-4">
      <ul>
        <li class="submenu" id="atag"><a href="#">Apparel & Accessories #1 <i class="fas fa-caret-down" style="color: grey;"></i></a>
          <ul class="ul_submenu">
            <li class="submenu"><a href="#">Clothing <i class="fas fa-caret-down" style="color: grey;"></i></a>
              <ul class="ul_submenu">
                <li class="submenu"><a href="#">Men <i class="fas fa-caret-down" style="color: grey;"></i></a>
                  <ul class="ul_submenu">
                    <li class="submenu">blabla</li>
                  </ul>
                </li>
              </ul>
            </li>
          </ul>
        </li>
      </ul>
    </div>
       <div class="col-md-4">
      <ul>
        <li class="submenu" id="atag"><a href="#">Apparel & Accessories #1 <i class="fas fa-caret-down" style="color: grey;"></i></a>
          <ul class="ul_submenu">
            <li class="submenu"><a href="#">Clothing <i class="fas fa-caret-down" style="color: grey;"></i></a>
              <ul class="ul_submenu">
                <li class="submenu"><a href="#">Men <i class="fas fa-caret-down" style="color: grey;"></i></a>
                  <ul class="ul_submenu">
                    <li class="submenu">blabla</li>
                  </ul>
                </li>
              </ul>
            </li>
          </ul>
        </li>
      </ul>
    </div>
       <div class="col-md-4">
      <ul>
        <li class="submenu" id="atag"><a href="#">Apparel & Accessories #1 <i class="fas fa-caret-down" style="color: grey;"></i></a>
          <ul class="ul_submenu">
            <li class="submenu"><a href="#">Clothing <i class="fas fa-caret-down" style="color: grey;"></i></a>
              <ul class="ul_submenu">
                <li class="submenu"><a href="#">Men <i class="fas fa-caret-down" style="color: grey;"></i></a>
                  <ul class="ul_submenu">
                    <li class="submenu">blabla</li>
                  </ul>
                </li>
              </ul>
            </li>
          </ul>
        </li>
      </ul>
    </div>
    <div class="col-md-4">
      <ul>
        <li class="submenu" id="atag"><a href="#">Apparel & Accessories #2 <i class="fas fa-caret-down" style="color: grey;"></i></a>
          <ul class="ul_submenu">
            <li class="submenu"><a href="#">Clothing <i class="fas fa-caret-down" style="color: grey;"></i></a>
              <ul class="ul_submenu">
                <li class="submenu"><a href="#">Men <i class="fas fa-caret-down" style="color: grey;"></i></a>
                  <ul class="ul_submenu">
                    <li class="submenu">blabla</li>
                  </ul>
                </li>
              </ul>
            </li>
          </ul>
        </li>
      </ul>
    </div>
    <div class="col-md-4">
      <ul>
        <li class="submenu" id="atag"><a href="#">Apparel & Accessories #3 <i class="fas fa-caret-down" style="color: grey;"></i></a>
          <ul class="ul_submenu">
            <li class="submenu"><a href="#">Clothing <i class="fas fa-caret-down" style="color: grey;"></i></a>
              <ul class="ul_submenu">
                <li class="submenu"><a href="#">Men <i class="fas fa-caret-down" style="color: grey;"></i></a>
                  <ul class="ul_submenu">
                    <li class="submenu">blabla</li>
                  </ul>
                </li>
              </ul>
            </li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
</div>

bootstrap-4 css html javascript
3 Answers

The Bootstrap grid system is built using Flexbox (I recommend reading about it if you haven't). Your HTML structure is currently built such that each row is one integral part, wrapped by div.row; you are building a single-line row that consists of three columns. When one of the child (your ul submenu) inside this div.row expands, it doesn't actually expand the other children, it expands the containing div (div.row). Because the containing block expands, it pushes down the bottom div.row and there's really nothing we can do about this. It's just how it works.

So if you want the behaviour you specified in your question, you should consider this HTML structure: build three columns, each consisting of n rows. Here's a working example (run in full-page mode). One side effect is the ordering of the vertical stacking (though I presume this isn't much of a problem).

$('li.submenu a[href="#"]').click(
  function(e) {
    e.preventDefault();
    $(this).toggleClass('open');
    $(this).next().toggle();
    $('.col-md-3').toggleClass('flex-last');
    return false;
  });
ul.ul_submenu {
  display: none;
}

.submenu a i {
  transition: ease .3s;
}

.submenu a.open i {
  transform: rotate(-90deg);
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://kit.fontawesome.com/a076d05399.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container-fluid">
  <div class="col-md-4">
    <div class="row">
      <ul>
        <li class="submenu" id="atag"><a href="#">Apparel & Accessories #1 <i class="fas fa-caret-down" style="color: grey;"></i></a>
          <ul class="ul_submenu">
            <li class="submenu"><a href="#">Clothing <i class="fas fa-caret-down" style="color: grey;"></i></a>
              <ul class="ul_submenu">
                <li class="submenu"><a href="#">Men <i class="fas fa-caret-down" style="color: grey;"></i></a>
                  <ul class="ul_submenu">
                    <li class="submenu">blabla</li>
                  </ul>
                </li>
              </ul>
            </li>
          </ul>
        </li>
      </ul>
    </div>
    <div class="row">
      <ul>
        <li class="submenu" id="atag"><a href="#">Apparel & Accessories #1 <i class="fas fa-caret-down" style="color: grey;"></i></a>
          <ul class="ul_submenu">
            <li class="submenu"><a href="#">Clothing <i class="fas fa-caret-down" style="color: grey;"></i></a>
              <ul class="ul_submenu">
                <li class="submenu"><a href="#">Men <i class="fas fa-caret-down" style="color: grey;"></i></a>
                  <ul class="ul_submenu">
                    <li class="submenu">blabla</li>
                  </ul>
                </li>
              </ul>
            </li>
          </ul>
        </li>
      </ul>
    </div>
    <div class="row">
      <ul>
        <li class="submenu" id="atag"><a href="#">Apparel & Accessories #1 <i class="fas fa-caret-down" style="color: grey;"></i></a>
          <ul class="ul_submenu">
            <li class="submenu"><a href="#">Clothing <i class="fas fa-caret-down" style="color: grey;"></i></a>
              <ul class="ul_submenu">
                <li class="submenu"><a href="#">Men <i class="fas fa-caret-down" style="color: grey;"></i></a>
                  <ul class="ul_submenu">
                    <li class="submenu">blabla</li>
                  </ul>
                </li>
              </ul>
            </li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
  <div class="col-md-4">
    <div class="row">
      <ul>
        <li class="submenu" id="atag"><a href="#">Apparel & Accessories #2 <i class="fas fa-caret-down" style="color: grey;"></i></a>
          <ul class="ul_submenu">
            <li class="submenu"><a href="#">Clothing <i class="fas fa-caret-down" style="color: grey;"></i></a>
              <ul class="ul_submenu">
                <li class="submenu"><a href="#">Men <i class="fas fa-caret-down" style="color: grey;"></i></a>
                  <ul class="ul_submenu">
                    <li class="submenu">blabla</li>
                  </ul>
                </li>
              </ul>
            </li>
          </ul>
        </li>
      </ul>
    </div>
    <div class="row">
      <ul>
        <li class="submenu" id="atag"><a href="#">Apparel & Accessories #2 <i class="fas fa-caret-down" style="color: grey;"></i></a>
          <ul class="ul_submenu">
            <li class="submenu"><a href="#">Clothing <i class="fas fa-caret-down" style="color: grey;"></i></a>
              <ul class="ul_submenu">
                <li class="submenu"><a href="#">Men <i class="fas fa-caret-down" style="color: grey;"></i></a>
                  <ul class="ul_submenu">
                    <li class="submenu">blabla</li>
                  </ul>
                </li>
              </ul>
            </li>
          </ul>
        </li>
      </ul>
    </div>
    <div class="row">
      <ul>
        <li class="submenu" id="atag"><a href="#">Apparel & Accessories #2 <i class="fas fa-caret-down" style="color: grey;"></i></a>
          <ul class="ul_submenu">
            <li class="submenu"><a href="#">Clothing <i class="fas fa-caret-down" style="color: grey;"></i></a>
              <ul class="ul_submenu">
                <li class="submenu"><a href="#">Men <i class="fas fa-caret-down" style="color: grey;"></i></a>
                  <ul class="ul_submenu">
                    <li class="submenu">blabla</li>
                  </ul>
                </li>
              </ul>
            </li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
  <div class="col-md-4">
    <div class="row">
      <ul>
        <li class="submenu" id="atag"><a href="#">Apparel & Accessories #3 <i class="fas fa-caret-down" style="color: grey;"></i></a>
          <ul class="ul_submenu">
            <li class="submenu"><a href="#">Clothing <i class="fas fa-caret-down" style="color: grey;"></i></a>
              <ul class="ul_submenu">
                <li class="submenu"><a href="#">Men <i class="fas fa-caret-down" style="color: grey;"></i></a>
                  <ul class="ul_submenu">
                    <li class="submenu">blabla</li>
                  </ul>
                </li>
              </ul>
            </li>
          </ul>
        </li>
      </ul>
    </div>
    <div class="row">
      <ul>
        <li class="submenu" id="atag"><a href="#">Apparel & Accessories #3 <i class="fas fa-caret-down" style="color: grey;"></i></a>
          <ul class="ul_submenu">
            <li class="submenu"><a href="#">Clothing <i class="fas fa-caret-down" style="color: grey;"></i></a>
              <ul class="ul_submenu">
                <li class="submenu"><a href="#">Men <i class="fas fa-caret-down" style="color: grey;"></i></a>
                  <ul class="ul_submenu">
                    <li class="submenu">blabla</li>
                  </ul>
                </li>
              </ul>
            </li>
          </ul>
        </li>
      </ul>
    </div>
    <div class="row">
      <ul>
        <li class="submenu" id="atag"><a href="#">Apparel & Accessories #3 <i class="fas fa-caret-down" style="color: grey;"></i></a>
          <ul class="ul_submenu">
            <li class="submenu"><a href="#">Clothing <i class="fas fa-caret-down" style="color: grey;"></i></a>
              <ul class="ul_submenu">
                <li class="submenu"><a href="#">Men <i class="fas fa-caret-down" style="color: grey;"></i></a>
                  <ul class="ul_submenu">
                    <li class="submenu">blabla</li>
                  </ul>
                </li>
              </ul>
            </li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
</div>

user_90602230

You can use indexing to specify the element you want to work with :

var elementOne = $(".yourClass")[0];

This will select the first element with that class and for the others you can change the index as per your requirement!

user_113042030

I can't be sure based on the code provided but I believe the error is in this line:

$('.col-md-3').toggleClass('flex-last');

This finds every element with class col-md-3 and toggle the class flex-last for each found element. (the behaviour you describe)

You could change it as follows to only search for the parents of the clicked element:

$(this).parents('.col-md-3').toggleClass('flex-last');
user_14569550
Related