How to opena a division with a grid of data?

Eduardo Fuerte
Eduardo Fuerte used Ask the Experts™
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.

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

Thanks in advance!
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Most Valuable Expert 2017
Distinguished Expert 2018
This looks like a simple tab box. You can implement it like this
<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;

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>

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 class="tab" id="tab2">
      <p>Content for tab2</p>
    <div class="tab" id="tab3">
      <p>Content for tab3</p>

Open in new window

The jQuery to manage switching between the tabs
$(function() {
  $('ul.tabs li a').click(function(e) {
    if (!$(this).hasClass('selected')) {

Open in new window

Working sample here
Eduardo FuerteDeveloper and Analyst


Very good solution!

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

Most Valuable Expert 2017
Distinguished Expert 2018

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