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

[Chandan23]

Hi Hema,

The same onchange client script you can use for inserting above code::

I understood what you are trying to implement, once you put the the (HTML fomatted) text in the text field that should expand/collapse.

where you have written the above code (puting value in the text field), just after that only add the my given function (collapse/expand depends on your requirement, that will sure work..)

[hema36]

Hi Chandan,

The requirement is that the content inside the text field must have this expand/collapse. ie if I change the type, corresponding format will appear in the text field in which it contains many headings. I need to have this icon at the right corner of each heading to expand/collapse the contents under each heading. I've given the heading inside <strong> tag.

Regards,

Hema P

[Chandan23]

sorry I could not understand you much at the earliest..and also sorry for misguide..

[hema36]

Hi,

If suppose I want to create an article and publish it, finally it goes to the published status and the article is published now. When I click on the view article link it will direct me to the page which shows the entire article in the respective format. For each heading, I need to add expand/collapse button in which the heading is a field of the type html. Guess I'm clear.

Regards,

Hema P

[kbuser]

Hello,

I am a knowledge manager, not a developer. I wanted to be able to expand/contrast text in my articles. I used Hema's script and made some adjustments after searching on Google.Can we do this expand/contrast functionality starting a regular paragraph rather than a list? If so, can you please share how? If not, is it possible to make the list begin flush left, without any indent? (I have attached examples.)

Here's what I have:

<p>

<style><!--

ul { list-style-type: none; }

label{  

            padding: 0px;

      padding-left: 0px;        

}

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

input[type=checkbox] ~ ul {

      max-height: 0;

      max-width: 0;

      opacity: 0;

}

input[type=checkbox]:checked ~ ul {

      max-height: 100%;

      max-width: 100%;

      opacity: 1;

}

input[type=checkbox] + label:before{

  border-width: 0px 0px;    

  border-left-color: white;

  margin-left: -15px;

      width: 0;

      height: 0;

      display: left;

      text-align: left;

      content: '';

      color: #AAAFAB;

      position: absolute;

      margin-top: 0px;

}

--></style>

</p>

<ul>

<li><span style="font-family: Arial; font-size: medium;" face="Arial" size="3"><a id="1"></a>Are you having trouble with {application}? <input id="cb1" type="checkbox" /><span style="text-decoration: underline;"><label for="cb1"><span style="font-family: Arial; font-size: medium;" face="Arial" size="2">Please click here.</span></label></span>

<ul>

<li><span style="font-family: Arial; font-size: medium;" face="Arial" size="3">1.  Begin typing here.</span></li>

<li><span style="font-family: Arial; font-size: medium;" face="Arial" size="3">2. Press enter.</span></li>

</ul>

</span></li>

</ul>

<ul>

<li><span style="font-family: Arial; font-size: medium;" face="Arial" size="3"><a id="2"></a>Is this your first time to use {application}? <input id="cb2" type="checkbox" /><span style="text-decoration: underline;"><label for="cb2"><span style="font-family: Arial; font-size: medium;" face="Arial" size="3">Please click here.</span></label></span>

<ul>

<li><span style="font-family: Arial; font-size: medium;" face="Arial" size="2">1. Please find the below data.</span></li>

<li><span face="Arial" size="3">2. Please find the data</span></li>

</ul>

</span></li>

</ul>