JSFiddle - React, Tailwind, and code Playground

by mrunali tatkundawar

HTML

<div><a title="Show Tables" href="javascript:toggle('hiddendiv1')"><img src="plus.gif" name="imagePM" width="12" height="12" border="0" id="hiddendiv1_img" /> title to show for hidden div #1 </a></div>
    <div style="display:none; border: 1px solid #ccc; padding: 10px;" id="hiddendiv1">
        <p style="margin: 0; padding: 0;">content of hidden div #1</p>
    </div>
    <!-- hidden div #2 -->
    <div><a title="Show Tables" href="javascript:toggle('hiddendiv2')"><img src="plus.gif" name="imagePM" width="12" height="12" border="0" id="hiddendiv2_img" /> title to show for hidden div #2 </a></div>
    <div style="display:none; border: 1px solid #ccc; padding: 10px;" id="hiddendiv2">
        <p style="margin: 0; padding: 0;">content of hidden div #2</p>
    </div>

JavaScript

function toggle(el) {
            if(typeof(el) == 'string')
                el = document.getElementById(el);
            var img = document.getElementById(el.id + '_img');
            if(!img) {
                alert('Unable to locate image');
                return;
            }
            switch(el.style.display) {
                case 'none' : 
                    img.src = 'minus.gif';
                    el.style.display = 'block';                
                break;
                case 'block' :
                    img.src = 'plus.gif';
                    el.style.display = 'none';        
                break;
                default:
                    img.src = 'minus.gif';
                    el.style.display = 'block';
                break;
            }
            alert(img.src);
            alert(el.style.display);
        }