How to add expand/collapse icon in html?

[hema36]

Hi,

In Knowledge Management, while creating an article when I change the article type corresponding template will appear inside the text field. In every template there will be a heading and description below that. For each heading of the article, I need to add expand/collapse icon at the right end so that I can expand/collapse the description below the title. Can anyone help me in doing this in HTML ?

Regards,

Hema P

[himapallela87]

Hi,

Below is the simple HTML Script that allows Expand / Collapse. How ever you can find many examples in google.

=====================================================================

<style>

ul { list-style-type: none; }

label{

      border-radius: 5px;

      padding: 3px;

      padding-left: 25px;

}

li {

      margin: 10px;

      padding: 5px;

      border: 1px solid #ABC;

      border-radius: 5px;

}

input[type=checkbox] { display: none; }

input[type=checkbox] ~ ul {

      max-height: 0;

      max-width: 0;

      opacity: 0;

      overflow: hidden;

      white-space:nowrap;

    -webkit-transition:all 1s ease;  

    -moz-transition:all 1s ease;  

    -o-transition:all 1s ease;  

    transition:all 1s ease;  

}

input[type=checkbox]:checked ~ ul {

      max-height: 100%;

      max-width: 100%;

      opacity: 1;

}

input[type=checkbox] + label:before{

      transform-origin:25% 50%;

  border: 8px solid transparent;

  border-width: 8px 12px;      

  border-left-color: white;

  margin-left: -20px;

      width: 0;

      height: 0;

      display: inline-block;

      text-align: center;

      content: '';

      color: #AAAFAB;

    -webkit-transition:all .5s ease;  

    -moz-transition:all .5s ease;  

    -o-transition:all .5s ease;  

    transition:all .5s ease;

      position: absolute;

      margin-top: 1px;

}

input[type=checkbox]:checked + label:before {

      transform: rotate(90deg);

      /*margin-top: 6px;

  margin-left: -25px;*/

}

</style>

<ul>

      <li><input type="checkbox" id="cb1"/><label for="cb1"><img src="add_sign.pngx" width="57" height="29"/>Test for Collapse / Expand</label>

              <ul>

                      <br/>&#160;Please Find the below data.<br/>

              </ul>

      </li>

</ul>

================================================================

Regards,

Hima Pallela

[hema36]

I couldn't do this in CSS. Can u pls temme in html, because the field is of the html type.

[Chandan23]

Which field are you refering in Knowledge table.

if it the text field then make use of below code in the onchange clint script.

textareaSizer_Resize('knowledge.text', +5);

for reducing

textareaSizer_Resize('knowledge.text', -5);

[hema36]

Hi Chandan,

I've written an onchange client script in which, if I change the type of an article the appropriate format will appear inside the text area.I've written a html code inside the client script for the necessary format to be displayed. Where do I have to insert this code?

Regards,

Hema P.