The following is the code i am using for expanding and collapsing my div. Now I want to make little changes to the code. When I Expand the div,A "[-]" with div content and when I collapse a "[+]" with div content should e.

<style type="text/css">
.gap
{

 border:1px solid black

}
</style>

<script type="text/javascript">

    function toggle_visibility(id) {
       var e =document.getElementById(id);

       if(e.style.display == 'none')
        {
          e.style.display = 'block';
          col.innerHTML=valu;
        }
       else
       {
          e.style.display = 'none';

       }
    }

    function edit(id,item)
    {
       var e = document.getElementById(id);
       var f = document.getElementById(item);

     document.getElementById('id4').innerHTML=e.innerHTML;     
      e.innerHTML=f.innerHTML;
      window.location=window.location;

    }
    function cancel(id,item)
    {

        document.getElementById(id).innerHTML=document.getElementById(item).innerHTML;
    }

</script>

<div class="gap" ><a href="#" onclick="toggle_visibility('id1');" id="x">[+]<div id="click" style="float:right;">Click here</div></a></div>

<div id="id1" style="display:none;">This is foo</div>


<a href="#" onclick="toggle_visibility('id2');" ><div class="gap">click here1</div></a>

<div id="id2" style="display:none;">click here1
<div> <a href="#"  onclick="edit('id2','id3');">Edit</a></div>
</div>




<div id="id3" style="display:none;">Edit
<div> <a href="#"  onclick="cancel('id2','id4')">cancel</a></div>
</div>


<div id="id4" style="display:none;"></div>

I am Waiting Fotr your help.

Thanks In Advance

The following is the code i am using for expanding and collapsing my div. Now I want to make little changes to the code. When I Expand the div,A "[-]" with div content and when I collapse a "[+]" with div content should e.

<style type="text/css">
.gap
{

 border:1px solid black

}
</style>

<script type="text/javascript">

    function toggle_visibility(id) {
       var e =document.getElementById(id);

       if(e.style.display == 'none')
        {
          e.style.display = 'block';
          col.innerHTML=valu;
        }
       else
       {
          e.style.display = 'none';

       }
    }

    function edit(id,item)
    {
       var e = document.getElementById(id);
       var f = document.getElementById(item);

     document.getElementById('id4').innerHTML=e.innerHTML;     
      e.innerHTML=f.innerHTML;
      window.location=window.location;

    }
    function cancel(id,item)
    {

        document.getElementById(id).innerHTML=document.getElementById(item).innerHTML;
    }

</script>

<div class="gap" ><a href="#" onclick="toggle_visibility('id1');" id="x">[+]<div id="click" style="float:right;">Click here</div></a></div>

<div id="id1" style="display:none;">This is foo</div>


<a href="#" onclick="toggle_visibility('id2');" ><div class="gap">click here1</div></a>

<div id="id2" style="display:none;">click here1
<div> <a href="#"  onclick="edit('id2','id3');">Edit</a></div>
</div>




<div id="id3" style="display:none;">Edit
<div> <a href="#"  onclick="cancel('id2','id4')">cancel</a></div>
</div>


<div id="id4" style="display:none;"></div>

I am Waiting Fotr your help.

Thanks In Advance

• javascript

• I don't understand the question. Are you saying that when you try to make these changes, you get some sort of error? If so -- what is the error? Or are you saying that you haven't tried to make these changes, and are hoping that someone here will graciously make them for you? Or . . . ? – ruakh Commented Jun 24, 2013 at 4:33
• Please put your working code, that you mentioned, in your question so people can look at it an tell you how to add [+] and [-] signs. – Gimmy Commented Jun 24, 2013 at 4:44
• Original fiddle for anyone who wishes to take a shot: jsfiddle/acdcjunior/kDYtU/2 – acdcjunior Commented Jun 24, 2013 at 5:22

3 Answers 3

is this you want?

function toggle_visibility(id) {
   var e =document.getElementById(id);
   var label = document.getElementById("x");

   if(e.style.display == 'none')
    {
      label.innerHTML = label.innerHTML.replace("[+]","[-]");
      e.style.display = 'block';
      col.innerHTML=valu;
    }
   else
   {
      label.innerHTML = label.innerHTML.replace("[-]","[+]");
      e.style.display = 'none';

   }
}

use the show and hide functions of javascript to show and hide the divs:

<div id="showHide" class="open" style="display: block;" onclick="showHide();">
    <!-- Your Contents -->
</div>

Javascript:

function showHide(currentElem) {
    if (currentElem.ClassName.indexOf('open') > -1) {
        // This means its open, now close it
        currentElem.className = 'closed';
        currentElem.style.display = 'none'; 
    } else {
        currentElem.className = 'open';
        currentElem.style.display = 'block';  
    }
}

function toggle_visibility(id) {
    var e = document.getElementById(id);

    if (e.style.display == 'none') {
        document.getElementById('x').innerText = '[-]';
        e.style.display = 'block';
        //col.innerHTML = valu;
    }
    else {
        e.style.display = 'none';
        document.getElementById('x').innerText = '[+]';
    }
}

When you click the [+] on the div this code shows the div and changes the [+] to [-] and vice versa. if you want to change the [+] to something else? like '[+]click here' you can just change the corresponding string in the code. I do not understand what do you mean by 'you want to change the content also..'. What exactly do you want to change?