1

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>
Elaine Byene
  • 3,868
  • 12
  • 50
  • 96
  • its already on SO, [here](http://stackoverflow.com/questions/16268606/responsive-dropdown-navbar-with-angular-ui-bootstrap-done-in-the-correct-angula). also [jsffidle](http://jsfiddle.net/iscrow/Es4L3/) provided in the same link. – mkawa Nov 04 '16 at 15:13

1 Answers1

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>
Yoan
  • 2,158
  • 1
  • 12
  • 21
  • Ummm this won't work. Why remove `uib-collapse="isCollapsed"`? – Elaine Byene Nov 04 '16 at 14:42
  • 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 – Yoan Nov 04 '16 at 14:50
  • 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. – Elaine Byene Nov 04 '16 at 14:55