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

How to remove an extra horizontal scroll bar from a fixed-header HTML table?

Assign a CSS class to a specific option within a SelectField in a WTForms form

Error encountered when importing a Material-UI component: Unable to load a module from @babel/runtime

ESLint error caught off guard by function expression in customized MUI Snackbar Component with Alert

Incorporating the click function into dynamically created divs using jQuery

Using JSON in combination with any client or server programming language allows for seamless

Position elements in the center of the page at 33.3333% width

Unraveling Vue Async Components - Harnessing the power of emitted events to resolve

The JavaScript code that added links to the mobile menu on smaller screens is no longer functioning properly

Receiving the most recent data in a protractor examination as a text string

Organize routes into distinct modules in Angular 6

Incorporate axios within getStaticProps while utilizing Next.js

Issue with scroll being caused by the formatting of the jQuery Knob plugin

Unifying flex and position:fixed

Calendars malfunctioning following the execution of npm run build

Leveraging classes in routing with express framework

Tips on containing the reach of a function in JavaScript/jQuery

Ensure that the sidebar automatically scrolls to the bottom once the main content has reached the bottom

What is the best way to accurately determine the height and offset values of an element while utilizing ng-repeat?

How can I showcase both a username and email address in a Material UI chip?