How to close CSS3 accordion

CSS3, accordion

[gwenaelle]

Hello, I do not understand how close my accordion. I want what is close individually and not when I open another.
  Thank you for your help.
Ex : [w3schools.com...]

My code css

@import url(http://fonts.googleapis.com/css?family=Titillium+Web:300);
*, *:before, *:after {
 margin:0;
 padding:0;
 -webkit-box-sizing:border-box;
 -moz-box-sizing:border-box;
 box-sizing:border-box;
}
.accordeon {
 position:relative;
 top:50px;
 width:90%;
 margin:0 auto;
}
.item {
 position:relative;
 width:100%;
 min-height:40px;
 margin:2px 0;
}
input[type="radio"], input[type="radio"] + label {
 position:absolute;
 width:100%;
 height:40px;
}
input[type="radio"] {
 opacity:0;
 z-index:9;
 cursor:pointer;
}
input[type="radio"] + label {
 background:url('/image123.svg') #f5f3f2;
 background-repeat:no-repeat;
 background-position:100% 0%;
 padding:2px 15px 0 15px;
 font-size:1.4rem;
 color:#333;
 z-index:8;
}
article[id^="content-"] { /* more or individual styling can be applied by using id$="number" */
 position:relative;
 width:100%;
 padding:0px 15px 0px 15px;
 height:auto;
 max-height:0px;
 background:white;
 overflow:hidden;
 -webkit-transition:all .25s;
 -moz-transition:all .25s;
 -o-transition:all .25s;
 transition:all .25s;
}
article[id^="content-"]:before {
 content:'';
 position:absolute;
 top:45px;
 left:15px;
 width:0;
 height:1px;
 background:tomato;
 -webkit-transition:width 0s;
 -moz-transition:width 0s;
 -o-transition:width 0s;
 transition:width 0s;
}
input[type="radio"]:hover + label {
 background:url('/image123.svg') #fff;
 background-repeat:no-repeat;
 background-position:100% 0%;
}
input[type="radio"]:checked + label {background:white;}
input[type="radio"]:checked ~ article[id^="content-"] {
 height:auto;
 max-height:600px;
 padding:55px 15px 15px 15px;
 -webkit-transition:all .25s .25s;
 -moz-transition:all .25s .25s;
 -o-transition:all .25s .25s;
 transition:all .25s .25s;
}
input[type="radio"]:checked ~ article[id^="content-"]:before {
 width:40px;
 -webkit-transition:width .3s .3s;
 -moz-transition:width .3s .3s;
 -o-transition:width .3s .3s;
 transition:width .3s .3s;
}
em {
 font-weight:300;
 font-style:normal;
 color:tomato;
}
body {
 background:#d6d2d1;
 font-family: 'Titillium Web', sans-serif;
 font-weight:300;
 color:#333;
 -webkit-transform:translate3d(0, 0, 0);
 -moz-transform: translate3d(0, 0, 0);
 -ms-transform: translate3d(0, 0, 0);
 -o-transform: translate3d(0, 0, 0);
 transform: translate3d(0, 0, 0);
}
html, body {
 width:100%;
 height:100%;
}

My html

<div class="accordeon">
 <div class="item">
 <input type="radio" name="btn" value="one"/>
 <label id="btn4" class="entypo-">Open tab</label>
 <article id="content-4"><h4>Title</h4><p>My texte</p></article>
 </div>
 </div>

[edited by: not2easy at 12:10 pm (utc) on Sep 7, 2016]
[edit reason] anonymized image urls [/edit]

[NickMNS]

It is not clear what functionality exactly you want. W3 example you link to is not strictly speaking an accordion, it is three consecutive collapsible divs.
Here is a bootstrap example of a simple collapsible: [w3schools.com...]
A typical accordion is like this one using JQuery: [jqueryui.com...]

Are you looking for a pure CSS solution, can you not use JQuery or JavaScript. If you can you JS then simply use the Jquery example.

[gwenaelle]

Hello Nick, I add a js, thank you for help ;)

<script>
var lastSelected = document.querySelector('.accordeon .item input[type="radio"]:checked');
$('.accordeon').on('click', '.item input[type=radio]', function(e){
if(lastSelected == this && this.checked){
this.checked = false;
lastSelected = null;
}else{
lastSelected = this;
}
})
</script>