Autohide children-tabs, show on hover

If you, like me, like to make the most of the available space, then maybe this idea is something for you.

Tracking Software

In a small project, any file* can be sent (by delivery service) from one location to another location of the same organization and tracked using a QR code.

* This project is all about physical document files, file-folders or boxes full of documents like court-files/court-records, which sometimes have to be physically sent to a different place. It is not about digital files.

As a result, everyone involved across locations knows where which file is at any given time. This kind of tracking we do here with files can be done in exactly the same way with any objects, for example with construction machines or rented objects.

Important Notice
The features shown in this "highlights" blog category are a showcase of things which can be done using AppGini, AppGini Helper Library, PHP, SQL, Javascript, JQuery, CSS and HTML. This definately does not mean that everything you can see here is part of our product. It took hours, sometimes days of research, trial-and-error, coding and testing. So, these showcases are not part of a 49$ library, they are not single-line copy&paste codes and they are not for sale. Just a demonstration of what can be done and what we did and do in paid projects for our customers.

Detail View of items table

This is how the detail view looks like:

There are some additional highlights like the additional Barcode-Search field in navbar (top right), the QR-Code display next to the form and a few additional buttons next to the save- and back-buttons. But let us focus on the bottom part.

Additional footer

In detail view of every file (item) I wanted to place some additional information at the bottom of the page showing the status of that specific file:

This has been done by adding some HTML to the $html variable in items_dv() hook-function of hooks/items.php file. Nothing fancy, nothing new.

Notes (child-records of items)

There can be notes for each file (item). As usual, these notes are displayed as a child-tab below the item-data.

As you can see, the notes take a lot of space and most of the status information (below) is hidden. The more notes there are, the less you see the status information. In this software, the status information is more important than the notes. So I wanted to find a better display.

Autohide/-show Children-Tabs

Then I had the idea that I could show the notes only when I need them. The result now looks like this, please play the video below:

After the page has loaded, I only see the tab captions. On mouseover (hover) the tabs fade in. When leaving the form-part of the page , the tabs fade out again.


For me, this is much better, because I can see the more important status information at the first glance. If I need to see details of notes, I just move the mouse over the tab captions.

There is some flickering due to visibility of (right) vertical scrollbar but this depends on your screen resolution. I can live with that.

Do you like it?

Give me your feedback and I will consider adding this feature to a future version of our AppGini Helper Javascript Library

Do you like it?