JSFiddle - React, Tailwind, and code Playground

by Stéphane LEGRAND

HTML

<section>
    <article>
        <div class="open verrou1"></div>
        <div class="open verrou2"></div>
        <div class="open verrou3"></div>
        <div class="open verrou4"></div>
        <div class="open verrou5"></div>
        <div class="open verrou6"></div>
        <div class="open verrou7"></div>
        <div class="open2 verrou8"></div>
        <div class="open2 verrou9"></div>
        <div class="open2 verrou10"></div>
        <div class="open2 verrou11"></div>
        <div class="open2 verrou12"></div>
        <div class="open2 verrou13"></div>
        <div class="open2 verrou14"></div>
    </article>
</section>

CSS

article {
    width:400px;
    height:400px;
    border:black 1px solid;
    position:relative;
    background:url('http://diarypeople.fr/plan.jpg') no-repeat;
}

div.open, div.open2 {
    height:1px;
    width:5px;
    background:black;
    display:block;
    transform:rotate(60deg);
    position:absolute;
}

div.open2 {
    background:#bbb;
}

.verrou1 {
    left:50px;
    top:20px;
}

.verrou2 {
    left:62px;
    top:20px;
}

.verrou3 {
    left:74px;
    top:20px;
}

.verrou4 {
    left:111px;
    top:20px;
}

.verrou5 {
    left:111px;
    top:73px;
}

.verrou6 {
    left:111px;
    top:88px;
}

.verrou7 {
    left:111px;
    top:103px
}

.verrou8 {
    left:62px;
    top:123px;
}

.verrou9 {
    left:82px;
    top:123px;
}

.verrou10 {
    left:103px;
    top:123px;
}

.verrou11 {
    left:124px;
    top:123px;
}

.verrou12 {
    left:145px;
    top:123px;
}

.verrou13 {
    left:166px;
    top:123px;
}

.verrou14 {
    left:187px;
    top:123px;
}

.close {
    height:1px;
    width:5px;
    background:black;
    display:block;
    transform:rotate(90deg);
    position:absolute;
}

JavaScript

$(document).ready(function(){
    $('.verrou1').click(function(){
       $('div.verrou1').removeClass('open');
       $('div.verrou1').addClass('close');
        $('.verrou1').css({'left':"52px"});
    });
});