Apply new CSS rules when on click of <a> element

Question

I'm currently trying to design and develop my own lightweight lightbox. The idea is when someone clicks <a href="#tab1"> it will change the properties of the <div id="tab1"> from display: none to display: block. Once the lightbox pops up it will have another link like <a href="#tab1_close"> to reverse the CSS properties back to display: none.

I've used input[name='name'] ~ #id for a lot of other sections on my site, I'm wondering if it's possible to change it so the input recognizes the <a> as the input and applies the CSS changes on the click.

Ideally, I could add id="tab_1" to the <a>, then the code would be something like a#tab_1:active ~ #tab1 { display: block } but that code doesn't seem to do anything.

Here's my Code Pen

Answer 1

If you want CSS only try the :target selector:

#tab1:target {
  display: block;
}

http://codepen.io/anon/pen/okEqr

Answer 2

jQuery's toggleClass() will dow hat you want: https://api.jquery.com/toggleClass/