Apologies for the lack of a creative title...
I'm sharing the following code snippet:
.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>In the above snippet, there is a wrapper (with a red border) that contains three columns. The first column (light grey) has a fixed width of 30%. Next, you'll see another wrapper (with a blue border) containing two columns (light blue and light yellow). This wrapper also has a fixed width of 70% relative to its parent. The columns within have widths of 85% (light blue) and 15% (light yellow). I would like to dynamically expand/close the light yellow column when it is clicked. Specifically, when expanded, both columns should take up 50% of the wrapper's space. When closed, they should revert to their original widths of 85% and 15%. Any suggestions on how to achieve this dynamically will be greatly appreciated!
!!! EDIT: MY OWN SOLUTION WITH ANGULARJS/NG-CLASS !!!
Description: After some experimentation, I've come up with a solution using angularjs and its ng-class feature. By setting a boolean variable to false initially, I can check if the column is expanded or not. I then created a new CSS class with a width of 50%, which I can assign to the two columns that need to expand. When the column is expanded and the boolean is true, the columns adjust to the 50% width correctly. On closing the column, the class is removed, and the default widths are restored. This approach is simple yet effective. Here's the implementation:
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>