Accordion With jQuery







### Item1


Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio in error ipsa facere, veritatis fuga incidunt tempore perferendis placeat. Dolore iste laborum porro possimus officia ratione rerum cumque itaque ullam.


### Item2


Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio in error ipsa facere, veritatis fuga incidunt tempore perferendis placeat. Dolore iste laborum porro possimus officia ratione rerum cumque itaque ullam.


### Item3


Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio in error ipsa facere, veritatis fuga incidunt tempore perferendis placeat. Dolore iste laborum porro possimus officia ratione rerum cumque itaque ullam.


/HTML/
section.accordion
div.item
h3{Item1}
p{Lorem}
div.item
h3{Item2}
p{Lorem}
div.item
h3{Item3}
p{Lorem}
/CSS/
body{
background-color: #f6704b;
}
{
margin:0;
padding: 0;
}
.accordion{
margin:50px auto;
width: 380px;
background-color: #ccc;
cursor:pointer;
}
.accordion .item{
height:100px;
}
.accordion .item h3{
display:inline-block;
vertical-align:middle;
height: 100%;
padding-left: 50px;
font-size: 20px;
font-weight: 400;
}
.accordion .item h3:before{
content:””;
display:inline-block;
vertical-align:middle;
height: 100%;
}
.accordion .item:first-of-type{
background-color: #620808;
color:#f4ce74;
}
.accordion .item:nth-of-type(2){
background-color: #a53f3f;
color:#ffe9c1;
}
.accordion .item:nth-of-type(3){
background-color: #f4ce74;
color:#620808;
}
.accordion p{
font-family:arial;
font-size: 18px;
font-weight: 400;
padding: 15px;
display:none;
box-shadow: inset 0 3px 7px rgba(0,0,0,.2);
}
.accordion p:first-of-type{
background-color: #620808;
color:#f4ce74;
}
.accordion p:nth-of-type(2){
background-color: #a53f3f;
color:#ffe9c1;
}
.accordion p:nth-of-type(3){
background-color: #f4ce74;
color:#620808;
}
/
jQuery*/
(function($) {
‘use strict’;
$(“.item”).on(“click”,function(){
$(this).next().slideToggle(100);
$(“p”).not($(this).next()).slideUp(‘fast’);
});
}(jQuery));





Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×