showhideMultipleElements.js

var title1=document.querySelector('#title1');var icon1=document.querySelector('#icon1');var details1=document.querySelector('#details1');title1.addEventListener('click',function(){toggleVisibility(icon1,details1);});details1.style.display='none';var title2=document.querySelector('#title2');var icon2=document.querySelector('#icon2');var details2=document.querySelector('#details2');title2.addEventListener('click',function(){toggleVisibility(icon2,details2);});details2.style.display='none';var title3=document.querySelector('#title3');var icon3=document.querySelector('#icon3');var details3=document.querySelector('#details3');title3.addEventListener('click',function(){toggleVisibility(icon3,details3);});details3.style.display='none';var title4=document.querySelector('#title4');var icon4=document.querySelector('#icon4');var details4=document.querySelector('#details4');title4.addEventListener('click',function(){toggleVisibility(icon4,details4);});details4.style.display='none';function toggleVisibility(icon,details){if(details.style.display==='block'){details.style.display='none';icon.className='fa fa-plus-square fa-2x';}else{details.style.display='block';icon.className='fa fa-minus-square fa-2x';}}