Summary  
This chapter covers using HTML, CSS, and JavaScript to implement interactive toggles that display or hide hint, solution, and video sections on a webpage.

General domain of usage  
E-learning platforms

<link
  rel="stylesheet"
  href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.24.1/themes/prism.min.css"
/>
<link
  rel="stylesheet"
  href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.24.1/themes/prism-okaidia.min.css"
/>
<link
  rel="stylesheet"
  href="https://staging-content-media-cdn.codefinity.com/courses/c1087363-9025-4c37-8d5e-983a32a007e9/buttons-section/hint-solution-video.css"
/>


<link rel="stylesheet" href="https://cdn.plyr.io/3.6.8/plyr.css" />
<link
  rel="stylesheet"
  href="https://staging-content-media-cdn.codefinity.com/courses/c1087363-9025-4c37-8d5e-983a32a007e9/video-tools-section/video-player.css"
/>


<div class="button-container">
  <button id="btn-hint" class="button" onclick="hintClick()">Hint</button>
  <button id="btn-solution" class="button" onclick="solutionClick()">
    Solution
  </button>
  <button id="btn-video" class="button" onclick="videoClick()">
    Video Tutorial
  </button>
</div>


<div id="hint-block" class="block">
  1. It is recommended to do ... <br />
  2. Use such method <code>some code</code> text again <br />
  3. Return the format <br />
</div>


<div id="solution-block" class="block">
  <pre><code class="language-csharp">
using System;

namespace HelloWorld
{
  class Program
  {
    static void Main(string[] args)
    {
      Console.WriteLine("Hello World!");    
    }
  }
}
      </code></pre>
</div>


<div id="video-block" class="block">
  <div class="custom-player">
    <video width="100%" controls>
      
      <source
        src="https://codefinity-content-media.s3.eu-west-1.amazonaws.com/code-1/react-pro/react-router/suspense-recording.mp4"
        type="video/mp4"
        data-plyr-config='{
          "quality": {
            "default": "720",
            "options": ["144", "240", "360", "480", "720", "1080"]
          }
        }'
      />
    </video>
  </div>
</div>


<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.24.1/prism.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.24.1/components/prism-csharp.min.js"></script>
<script src="https://staging-content-media-cdn.codefinity.com/courses/c1087363-9025-4c37-8d5e-983a32a007e9/buttons-section/hint-solution-video.js"></script>


<script src="https://cdn.plyr.io/3.6.8/plyr.js"></script>
<script src="https://staging-content-media-cdn.codefinity.com/courses/c1087363-9025-4c37-8d5e-983a32a007e9/video-tools-section/video-player.js"></script>

PCEtLSBTdHlsZXMgZm9yIEhpbnQgU29sdXRpb24gVmlkZW8gLS0+CjxsaW5rCiAgcmVsPSJzdHlsZXNoZWV0IgogIGhyZWY9Imh0dHBzOi8vY2RuanMuY2xvdWRmbGFyZS5jb20vYWpheC9saWJzL3ByaXNtLzEuMjQuMS90aGVtZXMvcHJpc20ubWluLmNzcyIKLz4KPGxpbmsKICByZWw9InN0eWxlc2hlZXQiCiAgaHJlZj0iaHR0cHM6Ly9jZG5qcy5jbG91ZGZsYXJlLmNvbS9hamF4L2xpYnMvcHJpc20vMS4yNC4xL3RoZW1lcy9wcmlzbS1va2FpZGlhLm1pbi5jc3MiCi8+CjxsaW5rCiAgcmVsPSJzdHlsZXNoZWV0IgogIGhyZWY9Imh0dHBzOi8vY29kZWZpbml0eS1jb250ZW50LW1lZGlhLXYyLnMzLmV1LXdlc3QtMS5hbWF6b25hd3MuY29tL2NvdXJzZXMvYzEwODczNjMtOTAyNS00YzM3LThkNWUtOTgzYTMyYTAwN2U5L2J1dHRvbnMtc2VjdGlvbi9oaW50LXNvbHV0aW9uLXZpZGVvLmNzcyIKLz4KCjwhLS0gU3R5bGVzIGZvciBWaWRlbyAtLT4KPGxpbmsgcmVsPSJzdHlsZXNoZWV0IiBocmVmPSJodHRwczovL2Nkbi5wbHlyLmlvLzMuNi44L3BseXIuY3NzIiAvPgo8bGluawogIHJlbD0ic3R5bGVzaGVldCIKICBocmVmPSJodHRwczovL2NvZGVmaW5pdHktY29udGVudC1tZWRpYS12Mi5zMy5ldS13ZXN0LTEuYW1hem9uYXdzLmNvbS9jb3Vyc2VzL2MxMDg3MzYzLTkwMjUtNGMzNy04ZDVlLTk4M2EzMmEwMDdlOS92aWRlby10b29scy1zZWN0aW9uL3ZpZGVvLXBsYXllci5jc3MiCi8+Cgo8IS0tIEJ1dHRvbiBjb250YWluZXIgLS0+CjxkaXYgY2xhc3M9ImJ1dHRvbi1jb250YWluZXIiPgogIDxidXR0b24gaWQ9ImJ0bi1oaW50IiBjbGFzcz0iYnV0dG9uIiBvbmNsaWNrPSJoaW50Q2xpY2soKSI+SGludDwvYnV0dG9uPgogIDxidXR0b24gaWQ9ImJ0bi1zb2x1dGlvbiIgY2xhc3M9ImJ1dHRvbiIgb25jbGljaz0ic29sdXRpb25DbGljaygpIj4KICAgIFNvbHV0aW9uCiAgPC9idXR0b24+CiAgPGJ1dHRvbiBpZD0iYnRuLXZpZGVvIiBjbGFzcz0iYnV0dG9uIiBvbmNsaWNrPSJ2aWRlb0NsaWNrKCkiPgogICAgVmlkZW8gVHV0b3JpYWwKICA8L2J1dHRvbj4KPC9kaXY+Cgo8IS0tIEhJTlQgQkxPQ0sgLS0+CjxkaXYgaWQ9ImhpbnQtYmxvY2siIGNsYXNzPSJibG9jayI+CiAgMS4gSXQgaXMgcmVjb21tZW5kZWQgdG8gZG8gLi4uIDxiciAvPgogIDIuIFVzZSBzdWNoIG1ldGhvZCA8Y29kZT5zb21lIGNvZGU8L2NvZGU+IHRleHQgYWdhaW4gPGJyIC8+CiAgMy4gUmV0dXJuIHRoZSBmb3JtYXQgPGJyIC8+CjwvZGl2PgoKPCEtLSBTT0xVVElPTiBCTE9DSyAtLT4KPGRpdiBpZD0ic29sdXRpb24tYmxvY2siIGNsYXNzPSJibG9jayI+CiAgPHByZT48Y29kZSBjbGFzcz0ibGFuZ3VhZ2UtY3NoYXJwIj4KdXNpbmcgU3lzdGVtOwoKbmFtZXNwYWNlIEhlbGxvV29ybGQKewogIGNsYXNzIFByb2dyYW0KICB7CiAgICBzdGF0aWMgdm9pZCBNYWluKHN0cmluZ1tdIGFyZ3MpCiAgICB7CiAgICAgIENvbnNvbGUuV3JpdGVMaW5lKCJIZWxsbyBXb3JsZCEiKTsgICAgCiAgICB9CiAgfQp9CiAgICAgIDwvY29kZT48L3ByZT4KPC9kaXY+Cgo8IS0tIFZJREVPIEJMT0NLIC0tPgo8ZGl2IGlkPSJ2aWRlby1ibG9jayIgY2xhc3M9ImJsb2NrIj4KICA8ZGl2IGNsYXNzPSJjdXN0b20tcGxheWVyIj4KICAgIDx2aWRlbyB3aWR0aD0iMTAwJSIgY29udHJvbHM+CiAgICAgIDwhLS0gQ2hhbmdlIHRoZSB2aWRlbyBzcmMgLS0+CiAgICAgIDxzb3VyY2UKICAgICAgICBzcmM9Imh0dHBzOi8vY29kZWZpbml0eS1jb250ZW50LW1lZGlhLnMzLmV1LXdlc3QtMS5hbWF6b25hd3MuY29tL2NvZGUtMS9yZWFjdC1wcm8vcmVhY3Qtcm91dGVyL3N1c3BlbnNlLXJlY29yZGluZy5tcDQiCiAgICAgICAgdHlwZT0idmlkZW8vbXA0IgogICAgICAgIGRhdGEtcGx5ci1jb25maWc9J3sKICAgICAgICAgICJxdWFsaXR5IjogewogICAgICAgICAgICAiZGVmYXVsdCI6ICI3MjAiLAogICAgICAgICAgICAib3B0aW9ucyI6IFsiMTQ0IiwgIjI0MCIsICIzNjAiLCAiNDgwIiwgIjcyMCIsICIxMDgwIl0KICAgICAgICAgIH0KICAgICAgICB9JwogICAgICAvPgogICAgPC92aWRlbz4KICA8L2Rpdj4KPC9kaXY+Cgo8IS0tIEhpbnQgU29sdXRpb24gVmlkZW8gU2NyaXB0IC0tPgo8c2NyaXB0IHNyYz0iaHR0cHM6Ly9jZG5qcy5jbG91ZGZsYXJlLmNvbS9hamF4L2xpYnMvcHJpc20vMS4yNC4xL3ByaXNtLm1pbi5qcyI+PC9zY3JpcHQ+CjxzY3JpcHQgc3JjPSJodHRwczovL2NkbmpzLmNsb3VkZmxhcmUuY29tL2FqYXgvbGlicy9wcmlzbS8xLjI0LjEvY29tcG9uZW50cy9wcmlzbS1jc2hhcnAubWluLmpzIj48L3NjcmlwdD4KPHNjcmlwdCBzcmM9Imh0dHBzOi8vY29kZWZpbml0eS1jb250ZW50LW1lZGlhLXYyLnMzLmV1LXdlc3QtMS5hbWF6b25hd3MuY29tL2NvdXJzZXMvYzEwODczNjMtOTAyNS00YzM3LThkNWUtOTgzYTMyYTAwN2U5L2J1dHRvbnMtc2VjdGlvbi9oaW50LXNvbHV0aW9uLXZpZGVvLmpzIj48L3NjcmlwdD4KCjwhLS0gVmlkZW8gU2NyaXB0IC0tPgo8c2NyaXB0IHNyYz0iaHR0cHM6Ly9jZG4ucGx5ci5pby8zLjYuOC9wbHlyLmpzIj48L3NjcmlwdD4KPHNjcmlwdCBzcmM9Imh0dHBzOi8vY29kZWZpbml0eS1jb250ZW50LW1lZGlhLXYyLnMzLmV1LXdlc3QtMS5hbWF6b25hd3MuY29tL2NvdXJzZXMvYzEwODczNjMtOTAyNS00YzM3LThkNWUtOTgzYTMyYTAwN2U5L3ZpZGVvLXRvb2xzLXNlY3Rpb24vdmlkZW8tcGxheWVyLmpzIj48L3NjcmlwdD4K

This section contains a variety of buttons, each designed to perform a specific function.

This section provides auxiliary tools that support content formatting and data manipulation.

This section contains additional features and tools designed to provide enhanced functionality.

This section contains various text box elements.

Please don't use any elements from this section, as it doesn't provide any value for the content development. Thank you!

Please note that the elements in this section are deprecated and no longer recommended for use. It would be best to avoid using them moving forward. Thank you!

+ (deprecated) Hint/Solution/Video Tutorial

Source Code

Awesome!

+ (deprecated) Hint/Solution/Video Tutorial

Source Code