How to opena a division with a grid of data?

Eduardo Fuerte
Eduardo Fuerte used Ask the Experts™
on
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!
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Most Valuable Expert 2017
Distinguished Expert 2018
Commented:
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
Eduardo FuerteDeveloper and Analyst

Author

Commented:
Very good solution!

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

Thanks!
Most Valuable Expert 2017
Distinguished Expert 2018

Commented:
always a pleasure.

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial