Hiding and showing parts depending on importance

From a very broad point of view, an application is just a way to visualize, transform, and save information. Not always showing all the available information at the same time is a winning idea. For example, having all the information on a unique screen could make our app very crowded. In other cases, we are not interested in visualizing all the information simultaneously because we want to see only a specific piece of information that is of our interest. So, hiding and properly showing information in our web application is a very valuable skill to acquire.

Adding columns, expanders, and a textbox

Columns are very useful because they allow us to create some layers or different parts. This means that by using columns, we can divide the screen into as many vertical sections as we want and use these sections (or columns) for any kind of specific purpose we think should be in a specific – or let’s say dedicated – container. All we need to do is create or declare these widgets.

We start using them by adopting the with instruction. Let’s see it in detail:

Figure 5.9: Columns and expanders

The col1, col2 = st.columns(2) line just creates two columns named col1 and col2. In the two with lines, we use these columns. In each of the columns, we create an expander; any expander has its own label (Basic Info and Processed Text). Expanders are clickable since they have an up arrow and down arrow symbol. Clicking on these symbols, we expand or collapse these widgets to reveal their content – in our example, just st.write and st.success instructions. The effect in the browser is very beautiful:

Figure 5.10: Columns and expanders in our web application

Since we want to also include a couple of Advanced Features in our web app, let’s copy the latest part of the code in order to create another couple of columns and expanders, plus an info text box:

Figure 5.11: New columns and expanders

The code we added is the same as we already commented previously. Its impact on the web application is the following:

Figure 5.12: Our application layout is going to be completed

To summarize, up to now we have two layers, two expanders, and two columns for every layer; the effect is very clean and well-balanced. Now we can take care of the four functions: two basic and two advanced.