Welcome to WebmasterWorld Guest from 100.24.209.47

Forum Moderators: not2easy

Message Too Old, No Replies

How to close CSS3 accordion

CSS3, accordion

     
7:23 am on Sep 7, 2016 (gmt 0)

New User

joined:Aug 15, 2016
posts: 4
votes: 0


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]

2:37 pm on Sept 15, 2016 (gmt 0)

Senior Member

WebmasterWorld Senior Member Top Contributors Of The Month

joined:Apr 1, 2016
posts: 2662
votes: 794


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.
5:13 pm on Sept 15, 2016 (gmt 0)

New User

joined:Aug 15, 2016
posts: 4
votes: 0


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>