AngularJS is used to vertically collapse three different div elements. This feature

Question

AngularJS is used to vertically collapse three different div elements. This feature

I am facing an issue with the design of my page that contains three panels. Two of these panels have tables, and when viewing the page on a smaller display, it disrupts the layout. I am wondering if there is a way to add collapsible buttons to the panels so users can collapse the ones they do not need on smaller screens.

Below is my HTML code:

<div class="row">
    <div class="col-md-2">
        <div class="hpanel hblue">
            <div class="panel-heading" translate>
                Factory
            </div>
            <div class="panel-body">

                <img file-url="logo" thumbnail="true" class="img-logo" ng-show="logo"/>
            </div>
        </div>
    </div>


    <div class="col-md-4">
        <div class="hpanel hblue">
            <div class="panel-heading" translate>
                Factory centers
            </div>
            <div class="panel-body">
                <div class="table-responsive">
                    <table class="table table-striped table-bordered table-hover" ng-table="centersTable">

                    </table>
                </div>
            </div>
        </div>
    </div>

    <div class="col-md-6">
            <div class="hpanel hblue">
                    <div class="panel-heading" translate>
                        Factory services
                    </div>
                    <div class="panel-body">
                        <div class="table-responsive">
                            <table class="table table-striped table-bordered table-hover nowrap" ng-table="servicesTable">

                            </table>
                        </div>
                    </div>
                </div>
        </div>
</div>

I would appreciate it if the collapse button could be located in the panel-heading at the right place. When clicked, it should hide the panel, and clicking again should open it up. I have searched online for solutions but haven't found anything helpful yet. P.S. I am using AngularJS, which might be crucial for this problem. Can someone please assist me with resolving this issue?

html css angularjs

Answer 1

Answer №1

I have embedded the tr tag and td tag within the table tag

Additionally, I have applied CSS (margin-top or margin-bottom) to the respective Div

You can review the code below:

var app = angular.module('myApp', []);
app.controller('customersCtrl', function() {

});

table, th , td  {
  border: 1px solid grey;
  border-collapse: collapse;
  padding: 5px;
}
table tr:nth-child(odd) {
  background-color: #f1f1f1;
}
table tr:nth-child(even) {
  background-color: #ffffff;
}
.marginTop{
margin-top:25px;
}
.marginBottom{
margin-bottom:25px;
}

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>

<body>
    <div ng-app="myApp" ng-controller="customersCtrl">
        <div class="row">
            <div class="col-md-2">
                <div class="hpanel hblue">
                    <div class="panel-heading" translate>
                        Factory
                    </div>
                    <div class="panel-body">
                        <img file-url="logo" thumbnail="true" class="img-logo" ng-show="logo" />
                    </div>
                </div>
            </div>
            <div class="col-md-4 marginTop">
                <div class="hpanel hblue">
                    <div class="panel-heading" translate>
                        Factory centers
                    </div>
                    <div class="panel-body">
                        <div class="table-responsive">
                            <table class="table table-striped table-bordered table-hover nowrap" ng-table="servicesTable">
                                <tr>
                                    <td>your table1 data1</td>
                                    <td><button>button1</button></td>
                                </tr>
                                <tr>
                                    <td>your table1 data2</td>
                                    <td><button>button2</button></td>
                                </tr>
                                <tr>
                                    <td>your table1 data3</td>
                                    <td><button>button3</button></td>
                                </tr>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-6 marginTop">
                <div class="hpanel hblue">
                    <div class="panel-heading" translate>
                        Factory services
                    </div>
                    <div class="panel-body">
                        <div class="table-responsive">
                            <table class="table table-striped table-bordered table-hover nowrap" ng-table="servicesTable">
                                <tr>
                                    <td>your table2 data1</td>
                                    <td><button>button1</button></td>
                                </tr>
                                <tr>
                                    <td>your table2 data2</td>
                                    <td><button>button2</button></td>
                                </tr>
                                <tr>
                                    <td>your table2 data3</td>
                                    <td><button>button3</button></td>
                                </tr>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>

</html>

Answer 2

I have embedded the tr tag and td tag within the table tag

Additionally, I have applied CSS (margin-top or margin-bottom) to the respective Div

You can review the code below:

var app = angular.module('myApp', []);
app.controller('customersCtrl', function() {

});

table, th , td  {
  border: 1px solid grey;
  border-collapse: collapse;
  padding: 5px;
}
table tr:nth-child(odd) {
  background-color: #f1f1f1;
}
table tr:nth-child(even) {
  background-color: #ffffff;
}
.marginTop{
margin-top:25px;
}
.marginBottom{
margin-bottom:25px;
}

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>

<body>
    <div ng-app="myApp" ng-controller="customersCtrl">
        <div class="row">
            <div class="col-md-2">
                <div class="hpanel hblue">
                    <div class="panel-heading" translate>
                        Factory
                    </div>
                    <div class="panel-body">
                        <img file-url="logo" thumbnail="true" class="img-logo" ng-show="logo" />
                    </div>
                </div>
            </div>
            <div class="col-md-4 marginTop">
                <div class="hpanel hblue">
                    <div class="panel-heading" translate>
                        Factory centers
                    </div>
                    <div class="panel-body">
                        <div class="table-responsive">
                            <table class="table table-striped table-bordered table-hover nowrap" ng-table="servicesTable">
                                <tr>
                                    <td>your table1 data1</td>
                                    <td><button>button1</button></td>
                                </tr>
                                <tr>
                                    <td>your table1 data2</td>
                                    <td><button>button2</button></td>
                                </tr>
                                <tr>
                                    <td>your table1 data3</td>
                                    <td><button>button3</button></td>
                                </tr>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-6 marginTop">
                <div class="hpanel hblue">
                    <div class="panel-heading" translate>
                        Factory services
                    </div>
                    <div class="panel-body">
                        <div class="table-responsive">
                            <table class="table table-striped table-bordered table-hover nowrap" ng-table="servicesTable">
                                <tr>
                                    <td>your table2 data1</td>
                                    <td><button>button1</button></td>
                                </tr>
                                <tr>
                                    <td>your table2 data2</td>
                                    <td><button>button2</button></td>
                                </tr>
                                <tr>
                                    <td>your table2 data3</td>
                                    <td><button>button3</button></td>
                                </tr>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>

</html>

AngularJS is used to vertically collapse three different div elements. This feature

Answer №1

Similar questions

I am experiencing issues with a few of my design choices not functioning correctly

Click on an element using jQuery to apply a specific class to all other similar

An error occurred: [object Object] does not support the 'popup' method

AngularJS Element Connections

I'm attempting to render HTML emails in ReactJS

What could be the reason that my Bootstrap dropdown menu is not appearing on my website

Step-by-step guide for implementing LoadGo animation with HTML

Unraveling HTML elements within a string using MongoDB: A step-by-step guide

I am interested in developing a program using Javascript or JQuery that can effectively capture the anchor text within <a></a> link tags

The CSS border on a div has inexplicably ceased functioning in Chrome, yet continues to work perfectly in

How to troubleshoot passing json data from a controller to an AngularJS directive

Is there a different way to invoke PHP within JavaScript?

Personalizing the React Bootstrap date picker

Steps for serving audio files in a Spring Boot application

The challenge of Angular form data binding

Do Scss mixins have the ability to adapt to different screen sizes

What is the best way to combine two AngularJS apps on a single Express server?

How can I set the text to be in the center of a VML

I am looking to create a split div with a diagonal line running through

Having trouble displaying Json data on an HTML page?