show the content on the right hand side

Question

Here in the demo shown http://plnkr.co/edit/4BahcwPQp2vUi9rAEEXR?p=preview i'm facing two issues which can be resolved using simple css/bootstrap code.

Below are the issues i am facing.

1) I am trying to show the content on the right side when user click any option present on the left hand side. Right now when user click on any link(OS packages,Option Two), the content is displayed in the down to the options listed ass hown in the plnkr demo. Any suggestions how to show the content on the right hand side when user click on any of the option.

2)And second issue is when user click on an option, it is showing the content and again if user selects the same option it is hiding the content.I don't want to hide the content again when user clicks the same link for the second time. I tried to modify ng-click but could not get the expected output.

html code:

<div ng-controller="MainCtrl">
<div class="row">
<div class="col-sm-12">
<div class="panel panel-primary">
<div class="modal-body">
<div class="row">
<div  ng-controller="MainCtrl">
  <div class="workspace">
    <div class="sidebar-wrap">
      <h3>Click below options:</h3>
      <div class="sidebar-contents">
    <a class="nav clearfix"
      ng-click="showOsPackages=!showOsPackages; optionTwo=false;"
      ng-class="{ 'active' : showOsPackages }">
OS Packages  
     </a>
    <p>
    <a class="nav clearfix"
      ng-click="optionTwo=!optionTwo; showOsPackages=false"
      ng-class="{ 'active' : optionTwo }">

      Option Two

    </a>
    </p>
      </div>
    </div>
      <div class="" ng-show="showOsPackages">
    <h1>OS Packages</h1>
    <p>Computer, belay that order. Now we know what they mean by 'advanced' tactical training. The game's not big enough unless it scares you a little. The Federation's gone; the Borg is everywhere! Yesterday I did not know how to eat gagh. But the probability of making a six is no greater than that of rolling a seven. Earl Grey tea, watercress sandwiches... and Bularian canapés? Are you up for promotion? My oath is between Captain Kargan and myself. Your only concern is with how you obey my orders. Or do you prefer the rank of prisoner to that of lieutenant? Sure. You'd be surprised how far a hug goes with Geordi, or Worf. What's a knock-out like you doing in a computer-generated gin joint like this?</p>
    </div>
    <div class="" ng-show="optionTwo">

    <h1>Option Two</h1>
    <p>Computer, belay that order. Now we know what they mean by 'advanced' tactical training. The game's not big enough unless it scares you a little. The Federation's gone; the Borg is everywhere! Yesterday I did not know how to eat gagh. But the probability of making a six is no greater than that of rolling a seven. Earl Grey tea, watercress sandwiches... and Bularian canapés? Are you up for promotion? My oath is between Captain Kargan and myself. Your only concern is with how you obey my orders. Or do you prefer the rank of prisoner to that of lieutenant? Sure. You'd be surprised how far a hug goes with Geordi, or Worf. What's a knock-out like you doing in a computer-generated gin joint like this?</p>
    </div>

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

js code:

var app = angular.module('plunker', ["ngAnimate"]);

app.controller('MainCtrl', function($scope) {
  $scope.name = 'slideout steeze';
});

Any suggestions would be helpful.

Answer 1

I checked your code. Here are the corrections.

• I am trying to show the content on the right side when user click any option present on the left hand side. Right now when user click on any link(OS packages,Option Two), the content is displayed in the down to the options listed ass hown in the plnkr demo. Any suggestions how to show the content on the right hand side when user click on any of the option.

Firstly I wrapped your content in a wrapper div with a class contents-wrap then the sidebar-wrapper and contents-wrap can be set to 30% and 70% respectively, so that we get the desired result.

CSS:

.contents-wrap{
  display:inline-block;
  width:70%;
  float:left;
}

.sidebar-wrap{
  display:inline-block;
  width:30%;
  float:left;
}

• And second issue is when user click on an option, it is showing the content and again if user selects the same option it is hiding the content.I don't want to hide the content again when user clicks the same link for the second time. I tried to modify ng-click but could not get the expected output.

For this I suggest setting the respective variable to just true , instead of toggling the input.

But here is a even better version, where you only use one variable toggle and you set the selected tab name to the toggle variable, using this method, the number of variables needed to be defined is reduced.