Collapse div only on mobile - Bootstrap AngularJS

Question

I have this code which I want to make it collapse when on mobile but it isn't working. I tried with visible-xs and hidden-xs as shown in the code but it's obviously not working.

What could I possible do to make this happen? I want to show the <ul>...</ul> in Desktop only and make it collapsible in Mobile view and show only the button which would open after being clicked.

<div>
    <button class="visible-xs" ng-click="isCollapsed = !isCollapsed">Collapsible</button>
    <ul class="hidden-xs in nav nav-pills nav-stacked uib-collapse="isCollapsed">
        <li class="active"><a ng-click="gotoElement('hired')">Hired</a></li>
        <li><a ng-click="gotoElement('applied')">Applied</a></li>
        <li><a ng-click="gotoElement('connections')">Connections</a></li>
    </ul>
</div>

its already on SO, here. also jsffidle provided in the same link. — mkawa
– mkawa, Commented Nov 4, 2016 at 15:13

Yoan · Accepted Answer · 2016-11-04 15:04:53Z

0

You need to use the ng-init to init the value of the isCollapsed property, if you want to have this logic on the template, but is better if you init all your data in the angular controller. Besides, to show the ul on desktop and hide it in mobile you need to have mobile detection. For example on express you can use: https://www.npmjs.com/package/express-device and use the variable isMobile to init the collapse property

<div>
    isCollapsed : {{isCollapsed}}
    <button class="visible-xs" ng-init="isCollapsed = isMobile" ng-click="isCollapsed = !isCollapsed">Collapsible</button>
    <ul class="nav nav-pills nav-stacked" uib-collapse="isCollapsed">
        <li class="active"><a ng-click="gotoElement('hired')">Hired</a></li>
        <li><a ng-click="gotoElement('applied')">Applied</a></li>
        <li><a ng-click="gotoElement('connections')">Connections</a></li>
    </ul>
</div>

edited Nov 4, 2016 at 15:04

answered Nov 4, 2016 at 14:26

Yoan

2,2171 gold badge14 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Elaine Byene Over a year ago

Ummm this won't work. Why remove uib-collapse="isCollapsed"?

Yoan Over a year ago

because the ng-show use to do kind of the same behabior, show and hide a section, let me fix the code to continues using the collapse

Elaine Byene Over a year ago

The tricky part is that it is hidden away from the desktop version. The use of visible-xs hides the div from the desktop version.

Collectives™ on Stack Overflow

Collapse div only on mobile - Bootstrap AngularJS

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related