title: Show hide links using angular js or JS on click
body: <p>On click of "Show all" I want to show all elements, On click of link "1st half" , I want to show "abc" "def" and "ghi". ON click of 2nd link "2nd half", I want to show "jkl", "mno" and "pqr". Again on click of link "show all ", I want to show everything. "abc" , "def", "ghi", "jkl", "mno", "pqr". </p>
  
  <p>There are some similar questions which I found and tried to implement that. But I am not able to display again the hidden element.</p>
  
  <p>Here are the sample of code:</p>
  
  <p>When I click "Show first half", in JS I am doing this:</p>
  
  <pre><code>document.getElementById("abc").style.display = 'visible';
  document.getElementById("def").style.display = 'visible';
  document.getElementById("ghi").style.display = 'visible';
  document.getElementById("jkl").style.display = 'none';
  document.getElementById("mno").style.display = 'none';
  document.getElementById("pqr").style.display = 'none';
  </code></pre>
  
  <p>Again when I click "Show All", I am doing this:</p>
  
  <pre><code>document.getElementById("abc").style.display = 'visible';
  document.getElementById("def").style.display = 'visible';
  document.getElementById("ghi").style.display = 'visible';
  document.getElementById("jkl").style.display = 'visible';
  document.getElementById("mno").style.display = 'visible';
  document.getElementById("pqr").style.display = 'visible';
  </code></pre>
  
  <p>But this is not able to display the hidden element again.</p>
  
  <p>Please let me know if you need any further information.</p>
  
  <p>Thanks.</p>