title: AngularJS - Show and Hide multiple content
body: <p>In AngularJS, to simply show a field through an a tag, I would do in this way:</p>
  
  <pre><code>&lt;div ng-show="aField"&gt;Content of aField&lt;/div&gt;
  
  &lt;a ng-click="aField=true"&gt;Show aField&lt;/a&gt;       
  </code></pre>
  
  <p>until here, no problem.
  I would like now to put more buttons and fields so that, when I click on A it shows the content of A, then when I click on button B, content of A disappears and content of B appears.</p>
  
  <p>How can I do this? Thank you.</p>
  
  <p>UPDATE</p>
  
  <p>Thank you everyone for your solutions, they works! Now, I am doing a template for every content of  and  because I have much data to show but all in the same structure. </p>
  
  <p>Here the index.html</p>
  
  <pre><code>&lt;div ng-model="methods" 
   ng-include="'templateMethod.html'" 
   ng-repeat = "method in methods"&gt;
  </code></pre>
  
  <p>here the script.js:</p>
  
  <pre><code>function Ctrl($scope) {
  $scope.methods =
  [ { name: 'method1',
      description: 'bla bla bla',
      benefits: 'benefits of method1',
      bestPractices : 'bestPractices',
      example: 'example'},
  
   { name: 'method2',
      description: 'bla bla bla',
      benefits: 'benefits of method2',
      bestPractices : 'bestPractices',
      example: 'example'} ];
  }
  </code></pre>
  
  <p>and here the templateMethod.html:</p>
  
  <pre><code>&lt;table&gt;
   &lt;tr&gt;
     &lt;td&gt;
       &lt;div ng-show="toShow=='{{method.name}}Field'"&gt;
       &lt;h3&gt;{{mmethodethod.name}}&lt;/h3&gt;
       &lt;p&gt;    
         &lt;strong&gt;Description&lt;/strong&gt;
         {{method.description}}
       &lt;/p&gt;
       &lt;p&gt;    
         &lt;strong&gt;Benefits&lt;/strong&gt;
         {{method.benefits}}
       &lt;/p&gt;
       &lt;p&gt;
         &lt;strong&gt;Best practices&lt;/strong&gt;
         {{method.bestPractices}}
       &lt;/p&gt;
        &lt;p&gt;   
          &lt;strong&gt;Examples&lt;/strong&gt;
          {{method.example}}
        &lt;/p&gt;
      &lt;/div&gt;
      &lt;/td&gt;
      &lt;td class = "sidebar"&gt;
        &lt;ul&gt;
           &lt;li&gt;&lt;a ng-click="toShow='{{method.name}}Field'" class="{{method.name}} buttons"&gt;{{method.name}}&lt;/a&gt;&lt;/li&gt;   
        &lt;/ul&gt;             
      &lt;/td&gt;
    &lt;/tr&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>It works! 
  But: if I click the first button and then the second one, the content of the first button do not disappear, it appears under the content of the first button...
  Problem with the repetition?</p>
  
  <p>Thanks</p>