So, this demo shows how you can add a feature to show/hide more text on the field with JavaScript
Showing the contents
Huge textarea field |
---|
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. |
123 |
Test |
dfasdfasdfasdfasdf |
56465a4sfd65a4f65a4sf54asf56a4as565a6546 |
aafdasfdasfdasdfasfdasfdasfda5sfd4a5 5asd4f5a64 54 5asdf4 as5df4a5sd4 asd5f4 asd5f43a5sd14 sa5d f4as5d fa65sdf4a6s5d 4fa6s5d as65 d4as d4f5as65d 4asd fs565as6d asdf |
sfsdsdfsdfsdfsdfddddddddddddddddddddddddddddddddddddddddfsdfsdfsfsdfsfsdsdfsdfsdfsdfddddddddddddddddddddddddddddddddddddddddfsdfsdfsfsdfsfsdsdfsdfsdfsdfddddddddddddddddddddddddddddddddddddddddfsdfsdfsfsdfsfsdsdfsdfsdfsdfddddddddddddddddddddddddddddddddddddddddfsdfsdfsfsdfsfsdsdfsdfsdfsdfddddddddddddddddddddddddddddddddddddddddfsdfsdfsfsdfsfsdsdfsdfsdfsdfddddddddddddddddddddddddddddddddddddddddfsdfsdfsfsdf |
test text |
djkhk.sdjfn |
sdfsdfsdfsdfsdf |
asd |
ddddd |
hello good morning. |
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. |
123456789012345689012345678901234568901234567890123456890123456789012345689012345678901234568901234567890123456890 |
55555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555 |
aga |
niko |
nikooooooooooooooooooooooooooooo |
111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 |
xcvxcvcxvxc |
dfjdjdfj |
this is a string |
Testing ` 1 2 3 4 5 6 fadsafdsadas DSds dasd dD afdsadf afdasdf asffadsf |
hgjb;;;;;;;;;lkkkkkkjmml; pjk;j |
Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test |
fdsafdsafdsafdsafdsa |
qqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqq |
jbjkbjkhjkhjnjhljkh |
ewrwe |
vvvv |
vcxvzxcvzxvzcx |
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. |
test |
guyigyhiuhghjhsdjfhlsdjkfsjdfnjnfjkshfuhfnjkdfns sdfjbrfgbdrg rfgkdnfklndfgnal;kf asdferjkntgjeruoginfvkldrg adfjgnaornjfgdrgjkr |
Vader: There is no escape. Don't make me destroy you. Luke, you do not yet realize your importance. You've only begun to discover your power. Join me, and I will complete your training. With our combined strength, we can end this destructive conflict, and bring order to the galaxy! Luke: [wincing] I'll NEVER join you! Vader: If only you knew the power of the dark side. Obi-Wan never told you what happened to your father. Luke: He told me enough. He told me you killed him. Vader: No. I am your father. Luke: [shocked] No. No. That's not true! That's impossible! Vader: Search your feelings, you know it to be true. Luke: NOOOOOOO!!! NOOOOOOOO!!! |
asdfsdfds |
uihkjjo joikokl |
сасал |
now is the time |
jhj |
toto is alive toto is alive toto is alive toto is alive toto is alive toto is alive toto is alive toto is alive |
fdsfdsf |
gngngngnhgngngngnghnhnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnn |
rythn |
sdfsdfsdfdsf |
ññññññññññññññññññññññññññññññññññññññññññññññññññññññññññññññññññññññññññññññññññññññññññññññññññññññññllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkjjjjjjjjjjjjjkkkkkkkkkkkjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjj |
asdsdasd |
test |
Friday Afternoon Test |
abcsd |
test |
dsddd |
test |
hgfytfytvy yfy gy |
fgdfgd |
jhbjhb |
HelloWord |
qwasdfghj |
mkkl;l'lk;l';lkl;kl |
fffff |
xcxzczxcz |
fgbhcvxb |
ggggggg |
zazaz |
123ABC |
dsdjsdsajdkadjaskdj dsdjsdsajdkadjaskdj dsdjsdsajdkadjaskdj dsdjsdsajdkadjaskdj dsdjsdsajdkadjaskdj dsdjsdsajdkadjaskdj dsdjsdsajdkadjaskdj dsdjsdsajdkadjaskdj dsdjsdsajdkadjaskdj dsdjsdsajdkadjaskdj dsdjsdsajdkadjaskdj dsdjsdsajdkadjaskdj dsdjsdsajdkadjaskdj dsdjsdsajdkadjaskdj dsdjsdsajdkadjaskdj dsdjsdsajdkadjaskdj dsdjsdsajdkadjaskdj dsdjsdsajdkadjaskdj dsdjsdsajdkadjaskdj dsdjsdsajdkadjaskdj dsdjsdsajdkadjaskdj dsdjsdsajdkadjaskdj dsdjsdsajdkadjaskdj dsdjsdsajdkadjaskdj dsdjsdsajdkadjaskdj dsdjsdsajdkadjaskdj dsdjsdsajdkadjaskdj dsdjsdsajdkadjaskdj dsdjsdsajdkadjaskdj dsdjsdsajdkadjaskdj dsdjsdsajdkadjaskdj dsdjsdsajdkadjaskdj |
asdasd |
dasd |
dfdfdfd |
Hallo Welt |
test |
testing |
vccvcx |
hihi |
testse |
123 |
test |
test |
bhkjlbiygjvh,.bhjbhkb.b |
ssssssssssssssssssssssssssssssssssssss |
jhkjk |
test |
dsffds |
sdfsfdsdfsdfsdfsfsdfsdfsssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssss |
Lulululululululululululululu Lililololoooolilililillilillliollioooi |
Iihciioycooooooyvoopppp0 |
zadddazdaz |
sdfsdsdfsdsffdsfsdf dsf d fs dfs df sdf sd f sd fdds fsdsd f dsf dsfs |
fff |
qweqwe |
Test |
testing |
hhhhhhhhhhhh |
Storage format
<ac:structured-macro ac:macro-id="d69a709c-8d46-4a80-bc3f-451e22d98df5" ac:name="confiform" ac:schema-version="1"> <ac:parameter ac:name="formName">myform1</ac:parameter> <ac:rich-text-body> <ac:structured-macro ac:macro-id="5fb1c0d1-5c36-489d-a94c-2833a50c70e2" ac:name="confiform-entry-register" ac:schema-version="1"> <ac:parameter ac:name="embedded">true</ac:parameter> <ac:parameter ac:name="atlassian-macro-output-type">INLINE</ac:parameter> <ac:rich-text-body> <p> <br/> </p> </ac:rich-text-body> </ac:structured-macro> <p> <ac:structured-macro ac:macro-id="39f92f63-7dc1-4c3e-9276-bfd5c053440c" ac:name="confiform-field-definition" ac:schema-version="1"> <ac:parameter ac:name="fieldName">hugeta</ac:parameter> <ac:parameter ac:name="fieldLabel">Huge textarea field</ac:parameter> <ac:parameter ac:name="fieldDescription">max 1000 symbols</ac:parameter> <ac:parameter ac:name="type">textarea</ac:parameter> </ac:structured-macro> </p> <p> <ac:structured-macro ac:macro-id="03b90e65-9ad8-40e3-a8c7-58597024451f" ac:name="confiform-field-definition-rules" ac:schema-version="1"> <ac:parameter ac:name="condition">hugeta.asCount:>1000</ac:parameter> <ac:parameter ac:name="fieldName">We accept only 1000 symbols here</ac:parameter> <ac:parameter ac:name="action">Validation rule</ac:parameter> </ac:structured-macro> </p> <p> <br/> </p> </ac:rich-text-body> </ac:structured-macro> <p>Showing the contents</p> <ac:structured-macro ac:macro-id="377bb64c-95db-421d-b853-b0cd05767345" ac:name="confiform-table" ac:schema-version="1"> <ac:parameter ac:name="formName">myform1</ac:parameter> <ac:rich-text-body> <p> <ac:structured-macro ac:macro-id="6354e4b6-2358-403e-9296-f21319ad343d" ac:name="confiform-field" ac:schema-version="1"> <ac:parameter ac:name="fieldName">hugeta</ac:parameter> </ac:structured-macro> </p> </ac:rich-text-body> </ac:structured-macro> <ac:structured-macro ac:macro-id="3d4d8dd2-0381-45e2-ac3f-d48ffaf4d002" ac:name="html" ac:schema-version="1"> <ac:plain-text-body><![CDATA[<style> .morecontent span { display: none; } .morelink { display: -ms-flexbox; display: flex; -ms-flex-align: center; align-items: center; position: relative; margin-top: 20px; font-size: 13px; color: #ececec; } .morelink:after { content: ''; -ms-flex-item-align: start; align-self: flex-start; display: inline-block; width: 5px; height: 5px; margin-top: 6px; margin-left: 10px; border: 1px solid #ececec; border-top: none; border-right: none; background: transparent; transform: rotate(-45deg); transform-origin: bottom; } .morelink.less:after { margin-left: 7px; transform: rotate(135deg); } </style> <script> function showHideText(sSelector, options) { // Def. options var defaults = { charQty : 100, ellipseText : "...", moreText : "Show more", lessText : "Show less" }; var settings = AJS.$.extend( {}, defaults, options ); var s = this; s.container = AJS.$(sSelector); s.containerH = s.container.height(); s.container.each(function() { var content = AJS.$(this).html(); if(content.length > settings.charQty) { var visibleText = content.substr(0, settings.charQty); var hiddenText = content.substr(settings.charQty, content.length - settings.charQty); var html = visibleText + '<span class="moreellipses">' + settings.ellipseText + '</span><span class="morecontent"><span>' + hiddenText + '</span><a href="" class="morelink">' + settings.moreText + '</a></span>'; AJS.$(this).html(html); } }); s.showHide = function(event) { event.preventDefault(); if(AJS.$(this).hasClass("less")) { AJS.$(this).removeClass("less"); AJS.$(this).html(settings.moreText); AJS.$(this).prev().fadeToggle('fast', function() { $(this).parent().prev().fadeIn(); }); } else { AJS.$(this).addClass("less"); AJS.$(this).html(settings.lessText); AJS.$(this).parent().prev().hide(); AJS.$(this).prev().fadeToggle('fast'); } } AJS.$(".morelink").bind('click', s.showHide); } /*------------------------------------------*/ AJS.toInit(function() { new showHideText('span[cf-field^="hugeta"]', { charQty : 50 }); }); </script>]]></ac:plain-text-body> </ac:structured-macro>