CSS Grid: how to make grid cell a hyperlink target? - css

Question

I am designing a simple two-column layout with CSS Grid; the grid areas are named Cell1 and Cell2. In the left column (Cell1) I want a list of hyperlinks; when a hyperlink is clicked, I want the content to open in the right column (Cell2).
I think I could use bookmarks to content already loaded into Cell2, but I prefer a way to display content in the right cell when a link is clicked, without using bookmarks.
Using a CSS Grid layout, is there any way to designate a cell where content should go when a hyperlink is clicked, other than the cell that contains the hyperlinks -- using bookmarks or anything else?
Thanks very much for any info.

Answer 1

Yes, this is possible, but is much easier to do if you are permitted to use JavaScript/jQuery. Here is an example of using HTML and CSS only to accomplish what you need:
a {
text-decoration: none;
color: #333;
}
.tabs {
position: relative;
clear: both;
}
.tabs .tab {
float: left;
margin-right: 10px;
}
.content {
position: absolute;
background-color: white;
width: 100%;
left: 0px;
}
.tabs .tab:nth-of-type(1) .content {
z-index: 1;
}
.tab:target a {
font-weight: bold;
}
.tab:target .content {
z-index: 1;
}
<div class="tabs">
<div class="tab" id="tab1">
Tab 1
<div class="content">Content of Tab1</div>
</div>
<div class="tab" id="tab2">
Tab 2
<div class="content">Content of Tab2</div>
</div>
<div class="tab" id="tab3">
Tab 3
<div class="content">Content of Tab3</div>
</div>
</div>