Learn how to toggle the visibility of three div elements arranged horizontally

Question

Learn how to toggle the visibility of three div elements arranged horizontally

$(document).ready(function () {
    $("#toggle").click(function () {
        if ($(this).data('name') == 'show') {
            $("#sidebar").animate({
                width: '10%'
            }).hide()
            $("#map").animate({
                width: '89%'
            });
            $(this).data('name', 'hide')
        } else {
            $("#sidebar").animate({
                width: '29%'
            }).show()
            $("#map").animate({
                width: '70%'
            });
            $(this).data('name', 'show')
        }
    });
});

html, body {
    width:100%;
    height: 100%;
}
#header {
    width: 100%;
    height: 20%;
    float: left;
    border: 1px solid;
}
#map {
    width: 80%;
    height: 80%;
    float: left;
    border: 1px solid;
}
#sidebar {
    width: 19%;
    height: 80%;
    float: left;
    border: 1px solid;
}
#toggle {
    width: 10%;
    height: 40%;
    margin-right: 6.5%;
    margin-top: 3.5%;
    float: right;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="header">HEADER
    <input type="button" data-name="show" value="Toggle" id="toggle">
</div>
<div id="map">MAP</div>
<div id="sidebar">SIDEBAR</div>

I am just starting out with angularjs, jquery, and css. I'd like to arrange three divs with a toggle side by side. Can anyone provide guidance on how to achieve this in angularjs?

In the regular mode, it should look like the following:

https://i.stack.imgur.com/Ma3HG.jpg

This is how it would appear.

If I extend the center div, it should look like the following example:

https://i.stack.imgur.com/ej7V7.jpg

If I expand the last div, it should resemble this example:

https://i.stack.imgur.com/QbW8S.jpg

Thank you!

javascript jquery html css angularjs

Answer 1

Answer №1

Give this a try! You can expand all the divs in any order and switch them back to their normal position by clicking on the expanded div again.

The width of the compressed and expanded states are represented in percentages and can be adjusted in the CSS to fit your needs. I've also included a transition property for smoother functionality.

Check out the code snippet on this codepen link.

$("a.expansion-btn").click(function () {
  classes = this.className;
  var divNumber = classes.slice(-1);
  var toGetId = "#div-" + divNumber;
  if ($(toGetId).hasClass("expanded-div")) {
    $(".normal-div").removeClass("compressed-div expanded-div");
  } else {
    $(".normal-div").removeClass("compressed-div expanded-div").addClass("compressed-div");
    ;
    $(toGetId).removeClass("compressed-div").addClass("expanded-div");
  }
});

*{
  box-sizing: border-box;
}
.container{
  margin: 0;
  padding: 0;
  width: 100%;
  height: 400px;
}
.normal-div{
  width: 33.33%;
  height: 100%;
  position: relative;
  border: 2px solid black;
  float: left;
  -webkit-transition: all 0.5s ease-in-out;
  -moz-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
}
.expanded-div{
  width: 80%;
}
.compressed-div{
  width: 10%;
}
#div-1{
  background-color: green;
}
#div-2{
  background-color: red;
}
#div-3{
  background-color: blue;
}
a.expansion-btn{
  position: absolute;
  top: 10px;
  right: 10px;
  font-weight: bold;
  cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="normal-div" id="div-1">
    <a class="expansion-btn exp-1">click</a>
  </div>
  <div class="normal-div" id="div-2">
    <a class="expansion-btn exp-2">click</a>
  </div>
  <div class="normal-div" id="div-3">
    <a class="expansion-btn exp-3">click</a>
  </div>
</div>

Answer 2

Give this a try! You can expand all the divs in any order and switch them back to their normal position by clicking on the expanded div again.

The width of the compressed and expanded states are represented in percentages and can be adjusted in the CSS to fit your needs. I've also included a transition property for smoother functionality.

Check out the code snippet on this codepen link.

$("a.expansion-btn").click(function () {
  classes = this.className;
  var divNumber = classes.slice(-1);
  var toGetId = "#div-" + divNumber;
  if ($(toGetId).hasClass("expanded-div")) {
    $(".normal-div").removeClass("compressed-div expanded-div");
  } else {
    $(".normal-div").removeClass("compressed-div expanded-div").addClass("compressed-div");
    ;
    $(toGetId).removeClass("compressed-div").addClass("expanded-div");
  }
});

*{
  box-sizing: border-box;
}
.container{
  margin: 0;
  padding: 0;
  width: 100%;
  height: 400px;
}
.normal-div{
  width: 33.33%;
  height: 100%;
  position: relative;
  border: 2px solid black;
  float: left;
  -webkit-transition: all 0.5s ease-in-out;
  -moz-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
}
.expanded-div{
  width: 80%;
}
.compressed-div{
  width: 10%;
}
#div-1{
  background-color: green;
}
#div-2{
  background-color: red;
}
#div-3{
  background-color: blue;
}
a.expansion-btn{
  position: absolute;
  top: 10px;
  right: 10px;
  font-weight: bold;
  cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="normal-div" id="div-1">
    <a class="expansion-btn exp-1">click</a>
  </div>
  <div class="normal-div" id="div-2">
    <a class="expansion-btn exp-2">click</a>
  </div>
  <div class="normal-div" id="div-3">
    <a class="expansion-btn exp-3">click</a>
  </div>
</div>

Answer 3

Answer №2

If you're looking to switch between different divs, you can use the following code snippet.

// define variable to track div index
var i = 0,
  // cache all div elements
  $div = $('.div');

// attach click event handler
$('.toggle').click(function() {
  $div
    // remove active and nonactive classes from all elements
    .removeClass('active nonactive')
    // select element by index
    .eq(i)
    // add active class
    .addClass('active')
    // select siblings
    .siblings()
    // add nonactive class
    .addClass('nonactive');
  // update index 
  i = ++i % $div.length;
})

.div {
  height: 300px;
  width: 30%;
  border: solid 1px black;
  display: inline-block
}
.active {
  width: 75%;
}
.nonactive {
  width: 10%;
}
.active,
.nonactive {
  -webkit-transition: width 1s ease-in-out;
  -moz-transition: width 1s ease-in-out;
  -o-transition: width 1s ease-in-out;
  transition: width 1s ease-in-out;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="toggle">toggle</button>
<br>
<div class="div"></div>
<div class="div"></div>
<div class="div"></div>

Alternatively, if you prefer to toggle when clicking a button inside the div, consider this approach.

$('.toggle').click(function() {
  $(this)
    // find parent div
    .parent()
    // remove nonactive class from clicked element
    .removeClass('nonactive')
    // toggle active class
    .toggleClass('active')
    // get sibling divs
    .siblings()
    // remove active class from siblings
    .removeClass('active')
    // toggle nonactive class based on the clicked element 
    .toggleClass('nonactive', $(this).parent().is('.active'));
})

.div {
  height: 300px;
  width: 30%;
  border: solid 1px black;
  display: inline-block
}
.active {
  width: 75%;
}
.nonactive {
  width: 10%;
}
.div,
.active,
.nonactive {
  -webkit-transition: width 1s ease-in-out;
  -moz-transition: width 1s ease-in-out;
  -o-transition: width 1s ease-in-out;
  transition: width 1s ease-in-out;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <div class="div">
    <button class="toggle">toggle</button>
  </div>
  <div class="div">
    <button class="toggle">toggle</button>
  </div>
  <div class="div">
    <button class="toggle">toggle</button>
  </div>
</div>

Answer 4

If you're looking to switch between different divs, you can use the following code snippet.

// define variable to track div index
var i = 0,
  // cache all div elements
  $div = $('.div');

// attach click event handler
$('.toggle').click(function() {
  $div
    // remove active and nonactive classes from all elements
    .removeClass('active nonactive')
    // select element by index
    .eq(i)
    // add active class
    .addClass('active')
    // select siblings
    .siblings()
    // add nonactive class
    .addClass('nonactive');
  // update index 
  i = ++i % $div.length;
})

.div {
  height: 300px;
  width: 30%;
  border: solid 1px black;
  display: inline-block
}
.active {
  width: 75%;
}
.nonactive {
  width: 10%;
}
.active,
.nonactive {
  -webkit-transition: width 1s ease-in-out;
  -moz-transition: width 1s ease-in-out;
  -o-transition: width 1s ease-in-out;
  transition: width 1s ease-in-out;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="toggle">toggle</button>
<br>
<div class="div"></div>
<div class="div"></div>
<div class="div"></div>

Alternatively, if you prefer to toggle when clicking a button inside the div, consider this approach.

$('.toggle').click(function() {
  $(this)
    // find parent div
    .parent()
    // remove nonactive class from clicked element
    .removeClass('nonactive')
    // toggle active class
    .toggleClass('active')
    // get sibling divs
    .siblings()
    // remove active class from siblings
    .removeClass('active')
    // toggle nonactive class based on the clicked element 
    .toggleClass('nonactive', $(this).parent().is('.active'));
})

.div {
  height: 300px;
  width: 30%;
  border: solid 1px black;
  display: inline-block
}
.active {
  width: 75%;
}
.nonactive {
  width: 10%;
}
.div,
.active,
.nonactive {
  -webkit-transition: width 1s ease-in-out;
  -moz-transition: width 1s ease-in-out;
  -o-transition: width 1s ease-in-out;
  transition: width 1s ease-in-out;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <div class="div">
    <button class="toggle">toggle</button>
  </div>
  <div class="div">
    <button class="toggle">toggle</button>
  </div>
  <div class="div">
    <button class="toggle">toggle</button>
  </div>
</div>

Answer 5

Answer №3

    <div id="header">HEADER
        <input type="button" data-name="show" value="Toggle" id="toggle">
    </div>
    <div id="maincont">
        <div id="map" class="active">MAP</div>
        <div id="sidebar" class="inactive">SIDEBAR</div>
        <div id="sidebar1" class="inactive">SIDEBAR1</div>
    </div>

script:

    $(document).ready(function () {     
            $("#toggle").click(function () {

                        var $div = $('#maincont').find(".active");
                        $div.removeClass('active').addClass("inactive").next().addClass("active");      

                        $('#maincont').find(".inactive").animate({
                            width: '10%'
                        })

                        $('#maincont').find(".active").animate({
                            width: '79%'
                        });           

             });

    });

css.

         html, body {
            width:100%;
            height: 100%;
        }
        #header {
            width: 100%;
            height: 100px;
            float: left;
            border: 1px solid;
        }
        #map {  
            height: 80%;
            float: left;
            border: 1px solid;
        }
        .active{
          width:78%;
           float: left;
           height: 100px;
        }
        .inactive{
          width:10%;
           float: left;
           border: 1px solid;
            height: 100px;
        }
        #sidebar {   
            height: 80%;
            float: left;

        }
        #toggle {
            width: 10%;
            height: 40%;
            margin-right: 6.5%;
            margin-top: 3.5%;
            float: right;
        }

Link to the fiddle

Answer 6

    <div id="header">HEADER
        <input type="button" data-name="show" value="Toggle" id="toggle">
    </div>
    <div id="maincont">
        <div id="map" class="active">MAP</div>
        <div id="sidebar" class="inactive">SIDEBAR</div>
        <div id="sidebar1" class="inactive">SIDEBAR1</div>
    </div>

script:

    $(document).ready(function () {     
            $("#toggle").click(function () {

                        var $div = $('#maincont').find(".active");
                        $div.removeClass('active').addClass("inactive").next().addClass("active");      

                        $('#maincont').find(".inactive").animate({
                            width: '10%'
                        })

                        $('#maincont').find(".active").animate({
                            width: '79%'
                        });           

             });

    });

css.

         html, body {
            width:100%;
            height: 100%;
        }
        #header {
            width: 100%;
            height: 100px;
            float: left;
            border: 1px solid;
        }
        #map {  
            height: 80%;
            float: left;
            border: 1px solid;
        }
        .active{
          width:78%;
           float: left;
           height: 100px;
        }
        .inactive{
          width:10%;
           float: left;
           border: 1px solid;
            height: 100px;
        }
        #sidebar {   
            height: 80%;
            float: left;

        }
        #toggle {
            width: 10%;
            height: 40%;
            margin-right: 6.5%;
            margin-top: 3.5%;
            float: right;
        }

Link to the fiddle

Answer 7

Answer №4

Including the angularjs tag in your question led me to provide a straightforward solution without any complex CSS:

Assume you have an array of objects in the controller that define the panels/divs like this:

$scope.panels = [{
    title: "One",
    expanded: true
  }, {
    title: "Two"
  }, {
    title: "Three"
  }];

The expanded flag keeps track of which panel is currently expanded, defaulting to the first one.

When you click on a panel, this function updates the flag for the selected panel:

$scope.expandPanel = function(panel) {
     $scope.panels.forEach(p => p.expanded = false);
     panel.expanded = true;
}

To display this, use an ng-repeat loop and dynamically set the class based on the expanded flag using ng-class:

<div class="panel" 
     ng-class="{'expanded': panel.expanded, 'reduced': !panel.expanded}" 
     ng-repeat="panel in panels" ng-click="expandPanel(panel)">
  <span>{{panel.title}}</span>
</div>

You can view this implementation live on this plunker link.

Note: The classes .panel, .expanded, and .reduced are defined in the plunker's CSS file.

Answer 8

Including the angularjs tag in your question led me to provide a straightforward solution without any complex CSS:

Assume you have an array of objects in the controller that define the panels/divs like this:

$scope.panels = [{
    title: "One",
    expanded: true
  }, {
    title: "Two"
  }, {
    title: "Three"
  }];

The expanded flag keeps track of which panel is currently expanded, defaulting to the first one.

When you click on a panel, this function updates the flag for the selected panel:

$scope.expandPanel = function(panel) {
     $scope.panels.forEach(p => p.expanded = false);
     panel.expanded = true;
}

To display this, use an ng-repeat loop and dynamically set the class based on the expanded flag using ng-class:

<div class="panel" 
     ng-class="{'expanded': panel.expanded, 'reduced': !panel.expanded}" 
     ng-repeat="panel in panels" ng-click="expandPanel(panel)">
  <span>{{panel.title}}</span>
</div>

You can view this implementation live on this plunker link.

Note: The classes .panel, .expanded, and .reduced are defined in the plunker's CSS file.

Learn how to toggle the visibility of three div elements arranged horizontally

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Toggle the visibility of the navigation bar in Angular based on the user

What are the steps to achieve the desired PrimeFaces theme appearance for selectOneMenu?

Eliminating an element from an array without the need for iteration

Concurrent Openlayers maps in Rails - A Viable Option

Spacing between products in Woocommerce product list

Transfer information from one Angular JS page to another pager based on ID

What is the process for retrieving a jQuery AJAX response from a NodeJS endpoint?

What steps can be taken to ensure express Node.JS replies to a request efficiently during periods of high workload

How can I place a submit button on a separate line using CSS?

progressing both forward and backward through every month

Unusual actions when making a $.ajax call using the PUT method

Loading content from external sources on the dashboard

Encountering issue while static generating project: Cannot find resolution for 'fs' module

Can AdonisJS 4.1.0 support conditional queries?

JavaScript was unable to locate the requested URL on the server

Switch out the rowspan attribute in HTML for a CSS alternative

Implementing cross-app module injection in Node.js

Tips for utilizing c# datatable in jquery ajax on asp.net webform

Stripping away HTML tags from a JSON output

Having trouble with jQuery validation: Seeking clarification on the error