Question

I have the below requirement:

Front end for a big database which stores details about the sports students are in a school. For example student xyz plays cricket so database will store cricket details for him, student pqr plays soccer so database will store soccer details for him and so on.

The main screen is divided into two sections. The left section is a search section with several criteria user can input. On clicking search, result will be published in the right section as a summary.

For e.g. if searching for x resulted in 5 students, then the summary result will be 5 rows.

Now clicking on a specific student on the summary result should fetch all the other details specific to him and should publish it as new tabs in the same section. Like Occupation in One tab, his sports details in other tab.

1) How to achieve this using CSS and Javascript?
2) How to keep the other tabs disabled? For eg. soccer tab should not get enabled for student playing cricket.

I am extremely new in CSS and JS, so may be my requirement is not as complex as I feel. But I definitely require a starting point.

Answer 1

Use a separate <div> section for each tab, and specify a class attribute on each div that describes how it is being used. You can hide/show a div by modifying its style.visibility property (you set it to ‘hidden’ to hide the div and, for most situations, ‘block’ to display the div). You can use CSS to apply different styling to each div (such as its location on the page).

Personally, I would divide this up into three different tasks. The first task is setting the layout of the page to look right, using fake data (e.g. create a function that “fetches” the data, but actually just gives back canned data). The second task is provide request handlers that can return raw, unstyled data (preferably in JSON format) based on the data in the database. The third, final task is to connect the JavaScript in your user interface to actually fetch the data using XHR requests to these endpoints, and passing along the JSON response appropriately instead of passing along fake data.