Question

I have 10 html divs with same class name “dp-check” which i am using as a component
and used at lots of time in the same page. Now my problem is initially all divs are hidden when i clicks one of them then its “display” is set to “inline”(only of that instance) and all others are hidden, I want to close when any other div with same class name is shown or somewhere else on page is clicked.

Answer 1

Try this:

function clickHandler(e){
    e = e || window.event;
    var elements = document.getElementsByClassName('dp-check');
    for(var i = 0; i < elements.length; i++){
        elements[i].style.display = 'none'; // Hide all elements.
    }
    e.target.style.display = 'inline'; // Show the clicked element.
}

You’ll have to assign the clickHandler to the click events on the elements.