In Inline Manual, you can hide and reveal text in a step using custom CSS and a custom button. A use case is when you want to create a simple question and answer walkthrough. In this guide we will create a walkthrough topic to showcase how the this effect can be achieved.



Prerequisites:

  1. Create a topic
  2. Create a step


Instructions:


1) Add Custom CSS code to your Inline Manual Site Settings

In your Inline Manual account, navigate to Sites > Click Settings for the Site > CSS. Copy the block of custom CSS code below and paste in the CSS tab of your Inline Manual site.


/* reveal component */
.inm-reveal {
  position: relative;
}
/* hide checkbox */
#inm-reveal-checkbox {
  display: none;
}
/* style reveal content button */
.inm-reveal-label {
  background: #4DA9FF;
  color: #FFFFFF;
  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: #2470FF;
    transition: all 0.2s ease-in-out;
}
/* 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 click the Save button.


Next we need to create a topic and add some content. Navigate to your application and click on the Authoring tool extension to activate it.


2) Create a topic in the Inline Manual Site

When the Authoring tool is activated, open the Inline Manual site (same as where you have added the custom CSS code) to create the topic and click the Create link to create a new walkthrough topic


3) Add a Step to the topic

Click the "+" sign to add a new step to the walkthrough


4) Add HTML to the Step

In the WYSIWYG editor of the step, click Source in the editor 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.


<p style="text-align:center"><strong>The text below is hidden. Click the &quot;Reveal Text&quot; button to reveal the text.</strong><br />
&nbsp;</p>

<div class="inm-reveal"><input class="inm-reveal-checkbox" id="inm-reveal-checkbox" type="checkbox" /> <label class="inm-reveal-label" for="inm-reveal-checkbox">Reveal Text</label>

<div class="inm-reveal-content" style="text-align:center">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec varius interdum dictum. Cras vel scelerisque urna, ac cursus lorem. Ut accumsan elit sollicitudin lorem iaculis semper. Nullam egestas arcu lacus, sit amet pulvinar metus varius ut.</div>
</div>


You can replace the sample text from above with your own content, including the "Reveal Text" button. Now you should see the custom CSS code in effect in the step.


If you need help with implementing this code, you can contact support for assistance.