How to opena a division with a grid of data?

Hi Experts!

Could you give a path for the resolution for this situation:

I need to provide a set of 03 buttons to open 03 kind of grids.

Accordingly with the Picture:
img grid
If one of the 03 buttons  is pushed a division is openned and the grid is populated with the correspondent data defined by the button.
TODOS, PPAIS, PNAE

And finally, the last button opens another division with just one kind of data.

Thanks in advance!
Eduardo FuerteDeveloper and AnalystAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Julian HansenCommented:
This looks like a simple tab box. You can implement it like this
CSS
<style type="text/css">
a, a:hover {
  text-decoration: none;
}
ul.tabs {
  list-style: none;
  margin: 0;
  padding: 0;
}
ul.tabs li {
  display: inline-block;
}
ul.tabs li a {
  border: 1px solid #0097ce;
  border-radius: 3px 3px 0 0;
  color: #0097ce;
  padding: 5px 15px;
  display: block;
}
ul.tabs li a.selected,
ul.tabs li a:hover {
  background: #0097ce;
  color: #fff;
}
ul.tabs li a.selected a,
ul.tabs li a:hover a {
  color: #fff;
}
.tab {
  border: 1px solid #0097ce;
  display: none;
  margin-top: -1px;
  padding: 15px;
}
</style>

Open in new window

HTML - The Tabs
    <ul class="tabs">
       <li><a href="#tab1" class="selected">Tab 1</a></li>
       <li><a href="#tab2">Tab 2</a></li>
       <li><a href="#tab3">Tab 3</a></li>
    </ul>

Open in new window

HTML The Tab Targets
    <div class="tab" id="tab1" style="display: block;">
      <p>Content for tab1 - Any valid HTML can go in here</p>
    </div>
    <div class="tab" id="tab2">
      <p>Content for tab2</p>
    </div>
    <div class="tab" id="tab3">
      <p>Content for tab3</p>
    </div>

Open in new window

The jQuery to manage switching between the tabs
<script>
$(function() {
  $('ul.tabs li a').click(function(e) {
    e.preventDefault();
    if (!$(this).hasClass('selected')) {
      $('.selected').removeClass('selected');
      $(this).addClass('selected');
      $('.tab').hide();
      $($(this).attr('href')).show();
    }
  });
});
</script>

Open in new window

Working sample here

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Eduardo FuerteDeveloper and AnalystAuthor Commented:
Very good solution!

I'm getting another issue related and posting another question.

Thanks!
Julian HansenCommented:
always a pleasure.
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.