1

I have a panel that I've created using Bootstrap. The panel contains a list of items with the item detail stored in a hidden div within the item itself.

When the list item is clicked I would like to replace the entire panel content with the content of the detail div for the clicked item.

I also need to revert back to the list view when the "Back to List" link is clicked.

Obviously, I'm going to need to create a javascript function to do this, as I assume there's nothing within Bootstrap that handles this.

What's the best way to do this? 

  <div class="col-md-4 col-sm-6">
       <div class="panel panel-default">
           <div class="panel-heading"><a href="#" class="pull-right">Back to List</a> <h4>Symmetric Keys</h4></div>
           <div class="panel-body">
               <div>Item 1
                   <div class="hidden">This is the rest of the data</div>
               </div>
               <div>Item 2
                   <div class="hidden">This is the rest of the data</div>
               </div>
               <div>Item 3
                   <div class="hidden">This is the rest of the data</div>
               </div>
               <div>Item 4
                   <div class="hidden">This is the rest of the data</div>
               </div>
               <div>Item 5
                   <div class="hidden">This is the rest of the data</div>
               </div>
           </div>
       </div>
   </div>

I've created an example here:

http://www.bootply.com/y84ZiHTQ5W

user1513388
  • 7,165
  • 14
  • 69
  • 111

1 Answers1

2

HTML

<!doctype html>
<html ng-app="ui.bootstrap.demo">
  <head>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.js"></script>
    <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.12.1.js"></script>
    <script src="app.js"></script>
    <link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
    <link  href="style.css" rel="stylesheet" />
  </head>
  <body>

<div ng-controller="showhideCtrl">

  <div class="panel panel-default">
    <!-- Default panel contents -->
    <div class="panel-heading">Panel heading</div><button class="btn btn-default " ng-show="hidevar" ng-click= "hidevar=false">Back</button>


    <!-- List group -->
    <ul class="list-group" ng-hide="hidevar" >
      <li class="list-group-item" ng-repeat="item in items" ng-click="showdes(item)"><a>{{item.title}}</a> </li>
    </ul>


    <div class="panel-body" ng-show="hidevar">
      {{itemdesc.content}}
    </div>
  </div>

</div>
  </body>
</html>

Angular 

angular.module('ui.bootstrap.demo', ['ui.bootstrap']);
angular.module('ui.bootstrap.demo').controller('showhideCtrl', function ($scope) {

 $scope.items = [
    {
      title: 'Header - 1',
      content: 'Dynamic Group Body - 1'
    },
    {
      title: ' Header - 2',
      content: 'Dynamic Group Body - 2'
    },
    {
      title: ' Header - 3',
      content: 'Dynamic Group Body - 3'
    }
  ];

  $scope.showdes = function(item){

    $scope.itemdesc=item;
    $scope.hidevar=true;
  }


});

Plnkr

http://plnkr.co/edit/LGJxQl2EVXKjjczkdipO?p=preview

roxid
  • 493
  • 4
  • 14