I have divs on my webpage that I want to keep hidden until a specific element is clicked.
When trying to hide them, I encountered three options:
visibilty: hidden - I didn't like this because the hidden div still took up space in the layout.
display: none - This option worked to hide the content, but it made it inaccessible to search engines.
Positioned, Clipped, and (almost) Collapsed - I came across this method through a Google search that involves the following CSS styling:
.element-invisible {
position: absolute !important;
height: 1px; width: 1px;
overflow: hidden;
clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
clip: rect(1px, 1px, 1px, 1px);
}
This approach seems to meet my requirements while keeping the content searchable by search engines.
Now, I want to reveal this hidden content when a user clicks another element.
I initially thought of using .removeAttr() to remove the specified attributes and display the content, then set them back with attr(). However, my attempts were unsuccessful as .removeAttr() did not seem to reveal the hidden div. It's possible that my approach was incorrect from the start.