Skip to main content
Solved

HTML with javascript in Universal

  • January 19, 2023
  • 3 replies
  • 149 views
M
Vanguard
Forum|alt.badge.img+3

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?
 

 

Best answer by Freddy

Martin wrote:

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>

 

View original
Did this topic help you find an answer to your question?
This topic has been closed for comments

3 replies

Freddy
Forum|alt.badge.img+16
  • Freddy
  • Thinkwise Local Partner Brasil
  • 528 replies
  • January 20, 2023

@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 — Lift. Empower. Fulfill. [lef.digital]
M
Vanguard
Forum|alt.badge.img+3
  • MartinVanguard
  • Author
  • Vanguard
  • 20 replies
  • January 23, 2023

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
Forum|alt.badge.img+16
  • Freddy
  • Thinkwise Local Partner Brasil
  • 528 replies
  • Answer
  • January 23, 2023
Martin wrote:

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 — Lift. Empower. Fulfill. [lef.digital]
M
1 person likes this
  • M
    Martin
Terms & ConditionsCookie settings

Cookie policy

We use cookies to enhance and personalize your experience. If you accept you agree to our full cookie policy. Learn more about our cookies.

 
Cookie settings