- 1. 0x0: Expand or collapse?
- 2. 0x1: div structure
- 3. 0x2: Modal box
- 4. 0x3: Accordion
- 5. 0x4: Responsive
- 6. 0x5: Limitations
The Making of the New 1A23 (1): Accordion and Modal in the same
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.
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:
Then when your URL has anchored on this div,
: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.
Basically, I wrapped the main item, the accordion/modal in the same large
div. It looks something like this:
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.
What is necessary in the modal box:
- Full image
- Close modal button
To fix a div in a specific position in a div, and make it full screen, we can simply use a few lines:
I used flex box and
max-width to do it, basically:
This is simple, just give it a 2em padding.
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…
With the hint given, it should be very simple to achieve. If you are still confused, here is the sample code:
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.
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.
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.