Buy me a coffee

Click Plus Icon – Show Text

#1. First, you add a Text Block with

  • Plus: Use Monospace style
  • Text under Plus: Use Paragraph

Click Plus Icon Show Text 01 Min

#2. Use this free tool to find the ID of the Text Block. In my case, we will have:

  • Text Block: #block-yui_3_17_2_1_1713954438114_16243

Click Plus Icon Show Text 02 Min

#3. Use this code to Page Header Code Injection (page where you use Text Block)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script>
  $(document).ready(function(){
   $('div#block-yui_3_17_2_1_1713954438114_16243 pre').click(function(){
    $("div#block-yui_3_17_2_1_1713954438114_16243 p").toggleClass("show");
    }
  );
});
</script>
<style>
  #block-yui_3_17_2_1_1713954438114_16243 pre {
  	cursor: pointer;
  }
  #block-yui_3_17_2_1_1713954438114_16243 p {
  display: none;
  transition: all 0.1s ease;
  }
  .show {
  display: block !important;
     transition: all 0.1s ease;
  }
</style>

Click Plus Icon Show Text 03 Min