In Inline Manual, you can hide and un-hide text in a step using custom CSS and a custom button. We will be using a simple blur and reveal effect to achieve this.


Prerequisites:


  1. Create a topic


Instructions:


1) Add HTML to the step


In the WYSIWYG editor of the step, click Source to switch to the code view of the step and add the sample HTML code below as the text you want to hide in the step.


<div class="inm-reveal">
  <input class="inm-reveal-checkbox" id="inm-reveal-checkbox" type="checkbox" />
  <label class="inm-reveal-label" for="inm-reveal-checkbox">Show Text</label>
  <div class="inm-reveal-content">Nulla facilisi. Mauris nec magna luctus, efficitur sapien eu, posuere odio</div>
</div>


Make sure to replace the dummy text in the code above with the actual text you want to hide. Show Text is the label of the button that un-hides the text. You can change this to anything you want.

2) Add custom CSS to Inline Manual site settings


Add the following custom CSS to the CSS tab in your Inline Manual site settings


/* reveal component */
.inm-reveal {
  position: relative;
}
/* hide checkbox */
#inm-reveal-checkbox {
  display: none;
}
/* style reveal content button */
.inm-reveal-label {
  background: #a5d6a7;
  padding: 0.5rem 1rem;
  margin-bottom: 2em;
  border-radius: 0.5rem;
  cursor: pointer;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
/* style reveal content button hover */
.inm-reveal-label:hover {
  background: #53b556;
}
/* blur the content if not checked */
[id^=inm-reveal-checkbox]:not(:checked) ~ .inm-reveal-content {
  color: transparent;
  text-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
}
[id^=inm-reveal-checkbox]:checked ~ .inm-reveal-label {
  display: none;
}


Make sure to save the settings. Allow up to 5 minutes for the CSS changes to propagate.


3) Preview the topic


Go to your application and launch the topic where you have added the text you want to hide to preview it.

 

Outcome


You should now have a text blurred out and then when the button is clicked it should reveal the blurred text.

 

Step with hidden text.


Step with revealed text.