Развернуть и свернуть с помощью javascript с помощью [+] и [-]

Question

Ниже приведен код, который я использую для расширения и свертывания моего div. Теперь я хочу внести небольшие изменения в код. Когда я разворачиваю div, «[-]» с содержимым div, а когда я ругаю, «[+]» с содержимым div должен наступить.

<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> 

Я жду, когда ваша помощь.

Заранее спасибо

Answer 1

это вы хотите?

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'; 

    } 
} 

Answer 2

использовать шоу и скрыть функции JavaScript, чтобы показать и скрыть дивы:

<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'; 
    } 
} 

Answer 3

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 = '[+]'; 
    } 
} 

При нажатии кнопки [ +] на div этот код показывает div и изменяет [+] на [-] и наоборот. если вы хотите изменить [+] на что-то еще? например «[+] нажмите здесь», вы можете просто изменить соответствующую строку в коде. Я не понимаю, что вы подразумеваете под «вы хотите изменить контент тоже». Что именно вы хотите изменить?