Solved

HTML with javascript in Universal

  • 19 January 2023
  • 3 replies
  • 114 views
M
Rank
Badge +2

For our application we what to show actions and messages in HTML. When a message is to long we want to collapse it and give the user the possibility to unfold it manually by clicking on it (see image) and therefore we added some javascript to the HTML. 

I have tested this in a form and in a cardlist but it seems the script gets filtered out. Also tested this with a preview-screentype as mentioned in this topic but it seems this is not supported in Universal.

Is there a way to achieve this in Universal?
 

 

icon

Best answer by Freddy 23 January 2023, 13:56

View original
This topic has been closed for comments

3 replies

Freddy
Userlevel 5
Badge +16

@Martin you can do this with CSS in your HTML .. we use it in an application as well. > https://www.w3schools.com/howto/howto_js_collapsible.asp

 

 

LEF - The future favors the brave. [lef.tec.br]
M
Rank
Badge +2

Thanks @Freddy for the reply. 

I already have a HTML, CSS and script and when I use it as plain HTML it works fine. But as soon as I try to load it into Universal it doesn't work anymore.

See also the example you mentioned. I can click on the buttons what I want but the text doesn't collapse or unfold (it seems the script gets filtered out)

 

Freddy
Userlevel 5
Badge +16

Thanks @Freddy for the reply. 

I already have a HTML, CSS and script and when I use it as plain HTML it works fine. But as soon as I try to load it into Universal it doesn't work anymore.

See also the example you mentioned. I can click on the buttons what I want but the text doesn't collapse or unfold (it seems the script gets filtered out)

 

Yes, you should not try to use the javascript but rely solely on the CSS functionality to have collapsible content. Try this:

 


<html>
<head>
</head>
<body>
<div><style>
input[type='checkbox'] {
	display: none;
}
.collapsible-content {
	max-height: 0px;
	overflow: hidden;
	transition: max-height .4s ease-in-out;
}

.toggle:checked+.lbl-toggle+.collapsible-content {
	max-height: 100%;
}

.toggle:checked+.lbl-toggle {
	border-bottom-right-radius: 0;
	border-bottom-left-radius: 0;
}

</style> 
<div class="wrap-collabsible">
   <input id="collapsible1" class="toggle" type="checkbox"> 
   <label for="collapsible1" class=" csc-message csc-other-message-response  lbl-toggle csc-float-right csc-message-radius" > 
   Click to open
   </label>   
   <div class="csc-other-response collapsible-content csc-float-right csc-other-label">
      <div class=" csc-align-right">
         <table style="padding-right: 8%; width:100%">
            <tr>
               <td style="width:30px"> [question_old]</td>
               <td style="width:30px"> [visible_old]</td>
               <td style="width:30px"> [contact_mode_old]</td>
               <td style="text-align: right"> <span class="csc-message-data-time"><strong>[person_name_original]</strong> [transaction_date] </span></td>
            </tr>
         </table>
      </div>
      <div class="csc-message csc-my-message csc-inner-message">
         [activity_original]
      </div>
   </div>
</div>
</div>

 

LEF - The future favors the brave. [lef.tec.br]
Terms & ConditionsCookie settings