The Making of the New 1A23 (1): Accordion and Modal in the same tag with pure CSS.

This is my new series that talks about the making of the new 1A23 Studio site, and some tricks I’ve used in it. For the first article, I would like to talk about the gallery page.

If you have noticed, all of the pages in the new 1A23 come with responsive design feature, that also includes our new gallery page as well. If you are visiting from a desktop or a tablet, you should see a pop-up modal box showing the full picture of that image. Otherwise, it should be an accordion expanding directly from the image.

And this is all done with Pure CSS.

0x0: Expand or collapse?

Since in this case, we only need maximum of one item to be expanded at the same time, so we can use a simple CSS pseudo-selector called :target to solve this problem.

For example, when you have a tag with a specific id, let’s say:

1
2
3

<div id="item42">
    <!-- content goes here... -->
</div>

Then when your URL has anchored on this div, http://localhost/test-page.html#item42, the :target selector is activated.

As it provide a pretty simple way to target any div with just an <a> link, we can use just CSS to make accordion or modal boxes.

0x1: div structure

Basically, I wrapped the main item, the accordion/modal in the same large div. It looks something like this:

1
2
3
4
5
6
7
8
9
10
11
12

<div id="item42">
	<div class="main-content">
		<a href="#item42">
			<img src="https://ajcanjusao.cloudimg.io/v7/item42-thumb-500.png"

You should be able to see that in the code above, I used 2 a links, one point to the wrapping div, and the other to the web page itself. These are the links that controls the switch of the modal/accordion box.

0x2: Modal box

What is necessary in the modal box:

• Full image
• Title
• Description
• Links
• Close modal button

Key highlights

0x21: Full screen cover and fixed positions

To fix a div in a specific position in a div, and make it full screen, we can simply use a few lines:

1
2
3
4
5
6
7

position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
width: 100%;

0x22: Separate the image in a 7:3 layout

I used flex box and max-width to do it, basically:

1
2
3
4
5
6
7
8
9
10
11

.container{
	display: flex;
	flex-direction: flow;
	.img{
		flex-grow: 7;
	}
	.info{
		flex-grow: 3;
		max-width: 30%;
	}
}

0x23: Leave some space from the side of the screen

This is simple, just give it a 2em padding.

0x24: Fit the picture in, for ANY size of picture and screen proportion

Finally something challenging, after some research, I found out only one way to do this, but this can only fit pictures, not any other media. The secret is actually…

background-image.

Yes. Background image. As simple as that. As of now, I still cannot find a way to just fit a picture in a div of changeable size perfectly with pure CSS. Yah, I know it can be done with JavaScript, but this is not our topic.

With the hint given, it should be very simple to achieve. If you are still confused, here is the sample code:

1
2
3
4
5

background-color: #000;
background-image: url('https://ajcanjusao.cloudimg.io/v7/image.png'

0x3: Accordion

Accordion should be rather easy to write. Since the content is mostly same as what we have for modal, only need to get rid of something that we don’t need. Just get a background color, and hide some unnecessary divs. So, I will not talk much about it here.

0x4: Responsive

There is where accordion and modal comes together on one web page. Since all of those things are done with pure CSS, what we need to do is to wrap them in 2 separate @media queries, and let the browser do the rest for us. Just remember, <meta name="viewport" content="width=device-width, initial-scale=1"> is critical.

0x5: Limitations

Comparing to the common method of using JS, the pure CSS one may result in a larger size of webpage, since all of the contents of modal and accordion content have to be loaded together with the main page.

Using of advanced CSS features may cause compatibility issues to some out-dated browsers. If you are not caring about them, this is perfectly fine for you.

Due to the limitation of the anchors, when the user opens a modal, the box must come to the top of the screen, and when he closes it, the page have to get back to the top, so this method might not be suitable for a long list, or an AJAX driven list.