Ok, time for some final touches. What we want now is to provide a mechanism to toggle the visibility of the labels of the infographic. Due to the fact that our SVG is inline, we can turn them off by simply adding opacity: 0 to their id selector, in the same way as we would have done with plain HTML elements. So let's add the following lines to application.css:
#Layer_2{ /* this id is present within the SVG */
opacity: 0;
transition: opacity 1s;
}The next step is to find a way to let the user toggle the
opacity value. We can achieve this result using a checkbox and taking advantage of the :checked pseudo-selector more or less as we did with the :target one.
So, first of all let's add a checkbox just before the <section> tag in our index.html file:
<input type="checkbox" id="show_labels" name="show_labels">
And then, let's add the corresponding label just before the </ul> tag in the
nav command:
<li><label for="show_labels"></label>...