On enlève le CSS qui déclenche le :hover et on le remplace par un évènement JS "click" qu'on applique aux divs mainCol

On ferme toutes les divs subCol au cas où l'une serait ouverte (pour l'effet accordéon) et on ouvre celle qui se trouve être un enfant de la div mainCol cliquée

Charge à vous de gérer la sortie de la souris si vous souhaitez que l'utilisateur puisse fermer toutes les divs ou non. PS : Pour des questions de clarté, je n'ai pas modifié le HTML, le target de l'event n'est pas mainCol, mais sdB (e.target); A garder en tête