goldfinger
New Member
I would like a div (currently \[code\]display:hidden;\[/code\]) to appear after the parent div has been clicked on, and stay there using CSS.I have currently made it appear when "clicked on" with \[code\]:active\[/code\], but as soon as I let go of the mouse's button the div disappears. How can i Make the Div stay in place after it's been clicked on?I have tried with \[code\]:visited\[/code\] and \[code\]:focus\[/code\] with no luck, any suggestions?I am new at this so pretty sure I am making a mistake somewhere here. It would be even better if the div went away if clicked on parent div once more.I would really appreciate your help.Thank you.\[code\]<html xmlns="http://www.w3.org/1999/xhtml"><head><style type="text/css">.container .l-col, .r-col {display: none;}.container {cursor: pointer;}.container:active .l-col {display: block;clear: left;float: left;width: 50%;height: 50%;}.container:active .r-col {display: block;float: right;width: 50%;height: 50%;}</style></head><body><div id="portfolio" class="container"><h2>Parent Element</h2><div class="l-col"><h3>Left Col</h3><p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p></div><div class="r-col"><h3>Right Col</h3><p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p></div></div></body></html>\[/code\]