MrBuggy MrBuggy - 2 months ago 16
CSS Question

Close/expand widths on hover/mouseout events

it was hard to find a good title so sorry for that...

I've got follow code



.wrapper {
display: flex;
border: 1px solid red;
padding: 10px;
}
.groups {
display: flex;
border: 2px solid blue;
width: 70%;
}
.leftColumn {
width: 30%;
background-color: lightgrey;
}
.group1 {
width: 85%;
background-color: lightblue;
}
.group2 {
width: 15%;
background-color: lightyellow
}
.group2:hover {
cursor: pointer;
}

<div class="wrapper">
<div class="leftColumn">Left</div>
<div class="groups">
<div class="group1">Group 1</div>
<div class="group2" ng-click="toggleColumn()">Group 2</div>
</div>
</div>





So in the snippet you can see a wrapper (red border), which contains three columns. The first column (lightgrey one) has a fix width of 30%. Then you can see another wrapper (blue border) which contains two columns (lightblue and lightyellow one). The wrapper (blue border) has also a fix width of 70% to his parent. The the columns within have again two widths of 85% (lightblue) and 15% (lightyellow). Now, I would like to expand/close the lightyellow one, when I click on it. The clue is, when I expand it, the lightblue and yellow blue should have 50% of the wrapper (blue border). When I close the lightyellow it should have again 85% and 15%. This should be dynamicly... I have no idea how to do this...Hope someone can help me..Thanks

!!! EDIT: MY OWN SOLUTION WITH ANGULARJS/NG-CLASS !!!

Descitpion: I've found a good solution with
angularjs
and it's
ng-class
. I use a
boolean
, which is default false for checking if my column is expanded or not. Than I implemented a new
css
class
with a width of 50%. I assign this class to my two columns which should have a width of 50% when the column is expanded. So when I expand the column and the boolean is true, they both get the class with 50% width and show correctly. When I close the column again, the class is removed and the groups have their default width's of 85% and 15%. This works fine and it's very simply. Here you go:



angular.module("myApp", []).controller("myController", function($scope) {
$scope.isExpanded = false;
});

.wrapper {
display: flex;
border: 1px solid red;
padding: 10px;
}
.groups {
display: flex;
border: 2px solid blue;
width: 70%;
}
.leftColumn {
width: 30%;
background-color: lightgrey;
}
.group1 {
width: 85%;
background-color: lightblue;
}
.group2 {
width: 15%;
background-color: lightyellow
}
.group2:hover {
cursor: pointer;
}
.cExpandedWidth {
width: 50%;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div class="wrapper" ng-app="myApp" ng-controller="myController">
<div class="leftColumn">Left</div>
<div class="groups">
<div class="group1" ng-class="{cExpandedWidth: isExpanded}">Group 1</div>
<div class="group2" ng-class="{cExpandedWidth: isExpanded}" ng-click="isExpanded = !isExpanded">Group 2</div>
</div>
</div>




Answer

i guess you want something like this ?

Explanation : on click on .group2 i add a class expanded . on the second click that class will be removed ( toggleClass ) . same for .group1 with class shrink

then, with CSS , i give the group2 with class expanded a width of 50% and to it's sibling .group1.shrink reduce the width to 50%

i also gave some transitions so it will work nicer

LET me know if this is what you were looking for

$('.group2').click(function(){
     $(this).toggleClass("expanded")
     $(this).siblings(".group1").toggleClass("shrink")
})
.wrapper {
  display: flex;
  border: 1px solid red;
  padding: 10px;
}
.groups {
  display: flex;
  border: 2px solid blue;
  width: 70%;
}
.leftColumn {
  width: 30%;
  background-color: lightgrey;
}
.group1 {
  width: 85%;
  background-color: lightblue;
  transition:0.5s;
}
.group2 {
  width: 15%;
  background-color: lightyellow;
   transition:0.5s;
}
.group2:hover {
  cursor: pointer;
}
.group2.expanded{
  width:50%;
}
.group1.shrink {
  width:50%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
  <div class="leftColumn">Left</div>
  <div class="groups">
    <div class="group1">Group 1</div>
    <div class="group2">Group 2</div>
  </div>
</div>