Skip to main content

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?
 

 

@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

 

 

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)

 

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>nperson_name_original]</strong> gtransaction_date] </span></td>
            </tr>
         </table>
      </div>
      <div class="csc-message csc-my-message csc-inner-message">
          activity_original]
      </div>
   </div>
</div>
</div>

 

Terms & ConditionsCookie settings